Confusion over why my absolute positioned elements aren't positioned absolutely.

[Will Hartung]

http://localhost:8080/funwar/Homepage.jsp
http://localhost:8080/funwar/Strategy.jsp

Can someone perhaps enlighten me as to why the top nav section on the
Homepage linked above is not being positioned relative to the page, but
rather something else (and it's not clear what).

The second page shows it working.

I've looked at this with the Firefox DOM and CSS inspectors, and it looks
pretty much identical to me. So I must be missing something fundamental.

These behave the same in Mozilla and MS 6.

Thanx for any insight.

Regards,

Will Hartung
(re******@sbcglobal.net)

[ironcorona]

Will Hartung wrote:

http://localhost:8080/funwar/Homepage.jsp
http://localhost:8080/funwar/Strategy.jsp

I can't view your localhost. Perhaps you should put it up on the web.
--
Brian O'Connor (ironcorona)

[Will Hartung]

"ironcorona" <ir*********@gmail.com> wrote in message
news:44********@quokka.wn.com.au...

Will Hartung wrote:

http://localhost:8080/funwar/Homepage.jsp
http://localhost:8080/funwar/Strategy.jsp

I can't view your localhost. Perhaps you should put it up on the web.

Doh! My bad...cut and paste is not your friend.

http://funosophy.net:8080/funwar/Homepage.jsp
http://funosophy.net:8080/funwar/Strategy.jsp

Thanx!

[Spartanicus]

"Will Hartung" <re******@sbcglobal.net> wrote:

http://localhost:8080/funwar/Homepage.jsp
http://localhost:8080/funwar/Strategy.jsp

Can someone perhaps enlighten me as to why the top nav section on the
Homepage linked above is not being positioned relative to the page, but
rather something else (and it's not clear what).

The second page shows it working.

Does it? http://homepage.ntlworld.ie/spartanicus/funosophy.png

You are using absolute positioning in an inappropriate way that will
break if you knock it with a feather.

You've posted this design before, it's fundamentally broken. You are
trying to achieve a DTP like result, the web doesn't work like that.

--
Spartanicus

[John Hosking]

Will Hartung wrote:
Can someone perhaps enlighten me as to why the top nav section on the
Homepage linked above is not being positioned relative to the page, but
rather something else (and it's not clear what).

http://funosophy.net:8080/funwar/Homepage.jsp
http://funosophy.net:8080/funwar/Strategy.jsp

Thanx!

Here's a stab at your problem (though I'm far from expert)

Homepage references home.css, which contains
#topnav { position: absolute; top: 50px; left: 200px; }

This is the (relevant) difference. Get rid of this and your positioning
might improve.
Also, I can't say I enjoy all the extra whitespace in your source, nor
the extraneous (i.e., non-problem-related) elements on the page.

You've got rather too many (i.e., more than one) H1 element.

And last but not at all least, as Spartanicus points out, your design is
really brittle. It has a nice graphic look, but just try to change the
font size...

--
John

[VidTheKid]

John Hosking wrote:

You've got rather too many (i.e., more than one) H1 element.

You prefer that <H1> be used solely for the root heading / page title?
Is that a standard, or a personal preference? Actually I used to do
that, but lately i've preferred to put the page title in <DIV
class="pagetitle">. I might change my mind again in the future,
though.

Getting back to the absolute positioning thing: I was reading part of
the CSS2 rec a few days ago and there was some talk about absolute
positioning actually being relative to the containing element (or line
box)'s upper left corner. Maybe it wasn't "absolute" but another
setting... I was up way past what should have been bedtime, and I don't
remember very clearly.

--
Vid the Kid

[John Hosking]

VidTheKid wrote:

John Hosking wrote:

You've got rather too many (i.e., more than one) H1 element.

You prefer that <H1> be used solely for the root heading / page title?
Is that a standard, or a personal preference? Actually I used to do
that, but lately i've preferred to put the page title in <DIV
class="pagetitle">. I might change my mind again in the future,
though.

Well, for some time now I've considered exactly-one-H1 to be part of
correct markup. I adopted this belief to correct for my earlier
misconception that choosing a H# tag should be based on the size of text
I wanted a line to display in. :-P

However, I notice tonight that the W3C doesn't seem so strict about it;
they don't specifically say either way, but they have an example which
implies multiple <H1>'s might not be so terrible. At
http://www.w3.org/TR/html4/struct/gl...l#idx-headings , they say:

"Some people consider skipping heading levels to be bad practice. They
accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading
level H2 is skipped."

And now as I google around to find supporting pages (I thought for
*sure* I'd read some authoritative-sounding Web page about this
somewhere), I see from the discussions that the issue is still a matter
of some debate. And I think in the future I might let one of my pages
have multiple <H1> elements, if that's how the content really breaks
down. I can't even detect a problem with accessibility, so maybe it's
not the problem I thought it was. And the jury is apparently still out
as to whether Google "weights" the content of <H1> element(s).

So, having waffled myself to that conclusion, I think the OP's page
fails the test; his multiple <H1>'s on Strategy.jsp should really be
<H2>'s, logically below <H1>Strategy</H1>.

--
John

[Stephen Poley]

On 2 Jun 2006 14:46:11 -0700, "VidTheKid" <vi*******@gmail.com> wrote:

John Hosking wrote:

You've got rather too many (i.e., more than one) H1 element.
You prefer that <H1> be used solely for the root heading / page title?
Is that a standard, or a personal preference?

It's personal preference, though a very common one. I also use only one
H1 per page, and I think most people do (at least of those who are
sufficiently clued up to know what H1 and H2 actually are) but there's
nothing actually wrong with using more.
Actually I used to do
that, but lately i've preferred to put the page title in <DIV
class="pagetitle">. I might change my mind again in the future,
though.

If you have a page title in the page itself (as opposed to the TITLE
element) then it would be much better to put it in an H1.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[VidTheKid]

Stephen Poley wrote:

On 2 Jun 2006 14:46:11 -0700, "VidTheKid" <vi*******@gmail.com> wrote:

John Hosking wrote:

You've got rather too many (i.e., more than one) H1 element.

You prefer that <H1> be used solely for the root heading / page title?
Is that a standard, or a personal preference?

It's personal preference, though a very common one. I also use only one
H1 per page, and I think most people do (at least of those who are
sufficiently clued up to know what H1 and H2 actually are) but there's
nothing actually wrong with using more.

Actually I used to do
that, but lately i've preferred to put the page title in <DIV
class="pagetitle">. I might change my mind again in the future,
though.

If you have a page title in the page itself (as opposed to the TITLE
element) then it would be much better to put it in an H1.

I honestly don't see any reason why that would be objectively better
than using H1 for each of the page's major sections. (On pages I
write, the page title appears both in the TITLE element and as content
on the page. The appearance of the title on the page itself is more
for visual rather than semantic purposes. Having an H1 to label the
first section, often but not always an introduction, immediately after
the page title and navigation elements, makes the semantic structure of
the page logical and acceptible in my mind.) On the other hand, if the
highest-available heading tag were named H0, it would be a bit more
obvious to me to use that for a root heading / page title, and only
once.

Anyway, I didn't really look at the OP's page, though I did click the
large-font-size screenshot. If there is an <H1>Strategy</H1> followed
by other H1s that are logically subordinate to it, then I agree it's
wrong. A solution could be to change the other H1s to H2s. Or, if
Strategy is in fact the primary topic of the page (and especially if
the page is not part of a longer, broken-up document) then another
solution could be to make the Strategy heading not a heading at all
semantically, but style it to look important enough that it is clearly
the title of the page. Or simply not have it.

--
Vid the Kid

[dingbat]

VidTheKid wrote:

John Hosking wrote:

You've got rather too many (i.e., more than one) H1 element.
You prefer that <H1> be used solely for the root heading / page title?
Is that a standard, or a personal preference?

Depends which version of HTML you're using.

Under the W3C DTDs then they make no particular claims about the use of
individual heading levels.
http://www.w3.org/TR/html4/struct/global.html#h-7.5.5
ISO HTML is broadly similar to W3C, but they _do_ claim that headings
should be nested "correctly" as part of their standard. Now whether ISO
HTML is of any relevance whatsoever is a question in itself....
https://www.cs.tcd.ie/15445/15445.html#DTD

Interestingly the W3C informative notes do mention using multiple <h1>
elements, not just one per page. Of course these are informative, not
normative.
Actually I used to do
that, but lately i've preferred to put the page title in <DIV
class="pagetitle">. I might change my mind again in the future,
though.

I'd suggest that you use <h1> here, or maybe even <h2>, preceded by a
<h1> for the site title. On a "homepage" that's probably adequate
itself, but on related non-home pages it's possible to use CSS to make
the presentation of this <h1> far less prominent, yet still meet the
ISO requirement.

I wouldn't use <div class="pagetitle" > myself, at least not if I had
any intention of seeing it as some sort of "heading".

Use your heading elements. There are 6 of them and it's very rare to
"run out" of levels. You still have full control of their presentation,
so if <h3> wants to be big and prominent because it's the most
important thing in local context, then just do it.