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:

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

    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.

    # 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…

    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 >>> */
    # 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.

*May or may not contain any actual "CSS" or "Tricks".