Navigation Width Issue

HTML & CSS
1

Hi,

I am having problems with my top navigation menu. The links do not fill out and some appear below others.

Why is this? I tried adding width:980px to #top-menu but no change

Thanks.


/* Top Navigation */
#top-menu {list-style:none;border-right: 1px solid #fff; height: 18px; float: left; z-index: 100; clear: both; font-size: 70%; position: absolute; top: 60px; left: 10px;}

/* Link Styling */
#top-menu a {color:#fff; /*#71a200;*/}
#top-menu a:active {position: relative; top: 1px;}
#top-menu a:hover {color: #f2d812;}
#top-menu li a {display: block; padding: 3px 10px; border-left: 1px solid #fff;}
2

This may not help your problem but the #top-menus position should be relative. This makes it relative to the header. Not absolute. That is relative to the page.
It causes it to look different on different monitors.

3

What I’m seeing is that there is a perfect list of links in a nice long line … as long as the window is about 900px wide. But at other widths, you’re getting problems, and that’s because of position:absolute;

If the window is too narrow, they start to wrap onto another line, but because the #nav is absolutely positioned, no extra space is made for them. And because the text is white and you’ve not set a background colour (bad idea! If you’re setting a text colour, always set a background colour, unless the colour you want will be inherited from the parent), once there get too many for two lines, they start to overlap the main text, but you can’t see them because they’re white.

If the window is too wide, the main content block remains fixed width and centred, but the #nav block is fixed to 10px from the left-hand edge of the page (not the content block), meaning that the first one or two items protrude outside the content block … and again, because they’re white with no background colour set, they become invisible against the white background.

position:absolute; is a powerful tool, but it’s also very dangerous, as it can result in all sorts of things going horribly wrong. I don’t see why you would need it here, because your #nav shouldn’t be absolutely positioned, it should be in the main flow of content.

4

Good Post. Much better said.

5

Thanks!!

6

Just to be clear … position:absolute; puts it in an absolute position relative to its nearest positioned ancestor.

So if you have Content with position:absolute; (or fixed or relative (I think)) and then inside that you have #nav also with position:absolute;, then #nav will be positioned relative to Content.

If the parent element isn’t positioned (ie static or float), and the grandma, great-granddaddy and so on are all not positioned, then and only then is the element positioned in relation to the page itself.