Get a free trial // Grow your CSS skills // Land your dream job

[SOLVED] Header – floats and li navigation positioning

  • # June 21, 2009 at 11:10 am

    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:


    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:

    (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:

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

    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.

    # June 21, 2009 at 12:18 pm

    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…

    #lowersitenav li {

    #lowersitenav li a {


    /* 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 >>> */
    # June 22, 2009 at 5:04 am

    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!

    # June 24, 2009 at 4:56 pm

    Ya welcome :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed