Relative position of H1

  • Thread starter Michael Laplante
  • Start date
M

Michael Laplante

What I'm trying to do:
Set up an 800pixel wide "banner" for H1. It would look something like this:

____________________________________________________________
Title has an indent of 16 px
____________________________________________________________
<- 800 px wide ->

However, the ENTIRE element must be aligned in the middle of the page
(relative) to allow for browsers set to greater than 800 x 600.

I've got everything down, except for the relative positioning part. Can't
find it by googling -- all tutorials I've found refer to placing the TEXT in
the centre but that's not what I want to accomplish. The text would still be
indented from the left-edge of the banner but the entire banner would be in
the middle of the page. Hopefully, I've explained myself clearly. . .

M
 
A

Adrienne

Gazing into my crystal ball I observed "Michael Laplante"
What I'm trying to do:
Set up an 800pixel wide "banner" for H1. It would look something like
this:

____________________________________________________________
Title has an indent of 16 px
____________________________________________________________
<- 800 px wide ->

However, the ENTIRE element must be aligned in the middle of the page
(relative) to allow for browsers set to greater than 800 x 600.

I've got everything down, except for the relative positioning part.
Can't find it by googling -- all tutorials I've found refer to placing
the TEXT in the centre but that's not what I want to accomplish. The
text would still be indented from the left-edge of the banner but the
entire banner would be in the middle of the page. Hopefully, I've
explained myself clearly. . .

h1 {width: 800px; margin-left:auto; margin-right:auto; padding-left: 16px;}
http://www.cavalcade-of-coding.info/usenet/indenth1.html
 
T

Toby Inkster

Adrienne said:
h1 {width: 800px; margin-left:auto; margin-right:auto; padding-left: 16px;}

Or:
h1{width:800px;margin:auto;padding:0 16px}

Better still:
h1{width:100%;margin:0;padding:0 16px}
 
M

Michael Laplante

Adrienne said:
Gazing into my crystal ball I observed "Michael Laplante"
h1 {width: 800px; margin-left:auto; margin-right:auto; padding-left:
16px;}

Tried that. Works in Firefox but not IE6. In IE6 it lines up on the left
side. . .

M
 
M

Michael Laplante

Toby Inkster said:
16px;}

Or:
h1{width:800px;margin:auto;padding:0 16px}

Doesn't work in IE6 -- it aligns to the left. Works in Firefox though.

M
 
M

Michael Laplante

M

Michael Laplante

Take a look said:
it now more to your liking?

Yes, that works thanx for your time and effort. The problem was this
"quirks" mode vs "standard" mode thing. As I asked in an earlier response in
this thread what happens if the URL in the doctype were to be no longer
valid?

M
 
E

Els

Michael said:
Okay that fixed it for IE6, thanks. What do I do about anybody using IE5?

How about reading the link I just gave?
Also, what happens if that URL were no longer valid? Would this solution
cease working?

What URL, the DTD (www.w3.org....)? I somehow don't think that URL
will lose validity for a 'while' :)

But if you don't use that DTD, IE6 behaves like IE5 in this respect,
so if you use the solution for IE5, it will work for IE6 in Quirksmode
too.
 
J

Jukka K. Korpela

Michael Laplante said:
What I'm trying to do:
Set up an 800pixel wide "banner" for H1.

Stop wanting that. The sooner you do that, the more time you save and
the more damage you prevent.

Don't people ever test their pages even in Print Preview?
 
M

Michael Laplante

Won't work for IE5 though:
IE5?

How about reading the link I just gave?

Sorry - shoulda looked before I leaped. . .
What URL, the DTD (www.w3.org....)? I somehow don't think that URL
will lose validity for a 'while' :)

I guess you're saying that as long as the web exists that URL will as well.
Does the browser need information from the site?
I'm on high-speed but what if someone were using their IE browser tp view
the saved page offline?

M
 
M

Michael Laplante

Jukka K. Korpela said:
Stop wanting that. The sooner you do that, the more time you save and
the more damage you prevent.

Don't people ever test their pages even in Print Preview?

Is this like a Zen thing? Perhaps a little haiku is called for:

A newbie seeks code
Reply of cryptic nonsense
Novice scratches head

:)
 
T

Toby Inkster

Michael said:
I'm on high-speed but what if someone were using their IE browser tp view
the saved page offline?

The browser doesn't actually *fetch* the DTD. It doesn't need to. It
already knows what's there.
 
M

Michael Laplante

Toby Inkster said:
The browser doesn't actually *fetch* the DTD. It doesn't need to. It
already knows what's there.

Sorry to be dense but why does one then have to put that address in the
doctype? What would happen if I put any old URL in its place?

If it's easier to send me off to an online tutorial somewhere, throw me a
URL.

Thx. . .

M
 
J

Jukka K. Korpela

Michael Laplante said:
Sorry to be dense but why does one then have to put that address in
the doctype?

Because otherwise browsers that do doctype sniffing may fall into
"quirks" mode.

And formally, because the HTML spec says so.

Don't try too hard to understand the "why" part. There's not much
reason in doctype sniffing. The reason is out there. Or elsewhere,
anyway.
 
J

Jukka K. Korpela

Michael Laplante said:
Is this like a Zen thing?

If you wish to call common sense that way.
A newbie seeks code
Reply of cryptic nonsense
Novice scratches head

I think you may have something to be improved in the haiku section,
too, but surely you haven't understood what HTML authoring is about if
you ask for code.

Code is triviality. You just look at a reference. What's worth
discussing is how you use (HTML) code, what it really means,
and whether your goals are realistic (I told they aren't).

Why don't people ever ask "how do I set the duration of reading my page
to 2 minutes?"? That would be quite comparable to an attempt to set the
width to 800 pixels.
 
M

Michael Laplante

I think you may have something to be improved in the haiku section,
too, but surely you haven't understood what HTML authoring is about if
you ask for code.

That's why I'm a "novice."
Code is triviality. You just look at a reference. What's worth
discussing is how you use (HTML) code, what it really means,
and whether your goals are realistic (I told they aren't).

Hence, my description of myself as "newbie" and "novice". . .
Why don't people ever ask "how do I set the duration of reading my page
to 2 minutes?"? That would be quite comparable to an attempt to set the
width to 800 pixels.

2 minutes = 800 pixels? Time = space?

I gotta admit I'm not tuned into your ZenYodaEinstein thing. I have no idea
what you're trying to communicate. I'm guessing that English is your second
language. However, I DO appreciate that you read and respond to my request.
Perhaps you have the URL of some good online tutorials in CSS?

M
 
J

Joel Shepherd

Michael Laplante said:
Jukka Korpela posited:


2 minutes = 800 pixels? Time = space?

Yes, but that's off-topic here.
I gotta admit I'm not tuned into your ZenYodaEinstein thing. I have no idea
what you're trying to communicate.

The point, I believe, is that trying to fix page width (as it appears in
a browser) is about as likely to succeed as trying to fit just as much
text on the page as can be read in two minutes. The odds of success are
much more dependent on the *reader* than on you. If your reader's
browser window is less than 800px in width (assuming the 'browser' has a
window at all), then doing something that needs a width of at least
800px to succeed is bound to cause problems.

Since an H1 element contains text -- usually -- it's generally nicer to
just let the text flow naturally. Either align it left or align it
center for _all_ widths and let it flow naturally from there. It'll work
fine for folks with browser windows less than 800px across, exactly
800px across, and even more than 800px across. It'll even work fine for
folks without windowless 'browsers' (some of whom are very important).

Hmm ... Also, in reading your original post, I'm having a hard time
distinguishing what you mean by a 'banner' for an H1. HTML doesn't have
banners. Posting a URL to an example would be useful.




I'm guessing that English is your second
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top