[SOLVED] Header – floats and li navigation positioning

[mpenguin]

Hi everyone,

I’m a noob trying to teach myself HTML and CSS. I thought that it would be good practice to take apart a website written in HTML 4.0 and tables and convert it to XHTML+CSS divs. I’ve gotten most of the header done so far and I’ve hit a wall. Your expertise and advise is appreciated.

First of all, the header has a logo on the left, and then 2 navigation menus on the right, one right underneath each other. Here’s what the nav menus should look like:

[img]http://images.dr3vil.com//files3/245/target_header.jpg[/img]

Now then, I’ve created a couple sprites and turned the menus into Unordered Lists. The first one works exactly as I intended using a sprite I made. The 2nd one, however, is not behaving and I just can’t figure out why. Here’s what mine looks like:

http://dev.morbidpenguin.com/test/

(I know the logo isn’t displaying properly – that’s on purpose). For whatever reason, I cannot get the sprite in the 2nd nav menu to display properly (should be inline, 38px X 77px each), nor can I get my text-indent to work and kick the text off. I’ve been playing with it for a couple of hours, but being the noob that I am, it was mostly just changing this, changing that, uploading, viewing, trying again.

Here’s the HTML for the 2nd nav menu:

Code:

• ????
• ????
• ????
• ????
• ????
• ????
• ????
• ???
• ???

And here’s the CSS I have for it so far (doesn’t include the rest or global styles.

Code:

body {
background: #737373 url(../images/body-bg.png) repeat-x;
}

#wrap {
width: 960px;
margin: 0 auto;
}

#headerlogo {
float: left;
}

#headernav {
float: right;
}

#uppersitenav {
float: right;
}

#lowersitenav {
clear: both;
}

/* These styles are for the #lowersitenav div */

#lowersitenav li {
text-indent: -9999px;
display: inline;
}

#lowersitenav li a {
background: url(../images/lowersitenav_sprite.png) 0px 0px no-repeat;
display: block;
}

If you want to view it, I’m sure most of you have Firebug/Web Developer or you can see the whole thing here.

So, any ideas on how I can fix that? Also, any advice on the XHTML or CSS in general is greatly appreciated. I’m learning as I go, so I’m bound to make mistakes.
Thanks.

[lookslikepat]

Ok, I have a solution for you :)

See the screenshot, if it still doesn’t work I must have forgotten something or other…

All the LI’s have to be floated, and the text-indent moved to the A inside instead.
Also you need to set a width and height on the LI’s, as well as the A inside them ( @ 100% – 100% )
You can still keep display: inline on your LI’s as this is good for bugs in IE ( <7 ? )

After this, change your background-position for each of the LI > A to -38px, -76px and so on…

So change the following in your code (I havn’t written all of your code here, only the things I changed. So UPDATE your code, and don’t replace it ;)

EDIT: Maybe I should add that you have to add unique classes to each A link element in the menu as well, for background-positioning of your sprite. Check the additional code further down…

Code:

#lowersitenav li {
display:inline;
float:left;
height:38px;
width:77px;
}

#lowersitenav li a {
display:block;
height:100%;
text-indent:-9999px;
width:100%;
}

[img]http://elundmark.se/filer/1245600172781.png[/img]

Code:

/* This code depends on you already having declared a background-image for all the A elements. */
#lowersitenav a.about {
background-position: 0px 0px; /* Like it is now, right ? */
}
#lowersitenav a.department {
background-position: 0px -38px;
}
/* Then just keep adding, -76px >>> */

[mpenguin]

Awesome, that worked great! Thanks for the help! I’ll have to remember those tips (float the <li> to the left, height and width elements on the <li> <a>.

Thanks again!

[lookslikepat]

Ya welcome :)

[Author]

Posts