Grow your CSS skills. Land your dream job.

Help placing navigation bar into layout

  • # December 5, 2009 at 3:13 pm

    I set up a CSS navbar using the generator at http://lab.mattvarone.com/navbar/, but I’m having trouble getting it into my layout. I need it to line up with other page elements and sit on top of a background, but it’s shifting to the right, as well as causing gaps between it and the previous and following DIV elements. I’m fairly new to CSS, and am struggling with positioning, so any help would be greatly appreciated.

    Here’s how the navbar appears in Safari 4 (Mac):
    [attachment=0]navbar_screenshot.jpg[/attachment]

    Here’s the site:
    http://www.serenfarm.com/troubleshoot/

    The CSS code:

    Code:
    .navigation-container {
    background-image: url(../images/body-background.png);
    background-repeat: repeat-y;
    text-align: left;
    vertical-align: top;
    width: 894px;
    position:relative;
    }
    ul#navigation {
    width:894px;
    list-style:none;
    height:50px;
    }

    ul#navigation li {
    display:inline
    }

    ul#navigation li a {
    height:50px;
    float:left;
    text-indent:-9999px;
    text-decoration:none
    }

    ul#navigation li a span {
    float:left;
    display:block
    }

    ul#navigation li#navigation-1 a {
    width:120px;
    background:url(../images/navbar.jpg) no-repeat 0px 0
    }

    ul#navigation li#navigation-1 a:active,
    ul#navigation li#navigation-1 a:hover {
    background-position:0px -50px
    }
    ul#navigation li#navigation-1 a.current {
    background-position:0px 0px -50px
    }

    ul#navigation li#navigation-2 a {
    width:129px;
    background:url(../images/navbar.jpg) no-repeat -120px 0
    }

    ul#navigation li#navigation-2 a:active,
    ul#navigation li#navigation-2 a:hover {
    background-position:-120px -50px
    }
    ul#navigation li#navigation-2 a.current {
    background-position:-120px -120px -50px
    }

    ul#navigation li#navigation-3 a {
    width:187px;
    background:url(../images/navbar.jpg) no-repeat -249px 0
    }

    ul#navigation li#navigation-3 a:active,
    ul#navigation li#navigation-3 a:hover {
    background-position:-249px -50px
    }
    ul#navigation li#navigation-3 a.current {
    background-position:-249px -249px -50px
    }

    ul#navigation li#navigation-4 a {
    width:199px;
    background:url(../images/navbar.jpg) no-repeat -436px 0
    }

    ul#navigation li#navigation-4 a:active,
    ul#navigation li#navigation-4 a:hover {
    background-position:-436px -50px
    }
    ul#navigation li#navigation-4 a.current {
    background-position:-436px -436px -50px
    }

    ul#navigation li#navigation-5 a {
    width:147px;
    background:url(../images/navbar.jpg) no-repeat -635px 0
    }

    ul#navigation li#navigation-5 a:active,
    ul#navigation li#navigation-5 a:hover {
    background-position:-635px -50px
    }
    ul#navigation li#navigation-5 a.current {
    background-position:-635px -635px -50px
    }

    ul#navigation li#navigation-6 a {
    width:112px;
    background:url(../images/navbar.jpg) no-repeat -782px 0
    }

    ul#navigation li#navigation-6 a:active,
    ul#navigation li#navigation-6 a:hover {
    background-position:-782px -50px
    }
    ul#navigation li#navigation-6 a.current {
    background-position:-782px -782px -50px
    }
    .navigation-container
    background-image: url(../images/body-background.png);
    background-repeat: repeat-y;
    text-align: left;
    vertical-align: top;
    width: 894px;
    }

    And the relevant HTML:

    # December 5, 2009 at 8:24 pm

    Hey there dedobleve,

    Site is looking good, I can see what problems you’re having with your nav. Let me give you the best bit of advice I can possibly give as a web developer, download ‘Firebug’.

    It’s an addon for Firefox and makes creating websites & debugging an absolute dream.
    You can download it here:
    https://addons.mozilla.org/en-US/firefox/addon/1843

    Using this tool, I ‘inspected’ your navigation, and you can see the results here:
    [img]http://www.snapshotmedia.co.uk/screenshots/untitled1.png[/img]
    http://www.snapshotmedia.co.uk/screenshots/untitled1.png

    The yellow area is your margin, purple is your padding.

    It seems you have some margin & padding that you might not have been bargaining for. This isn’t something you’ve done though. Some HTML elements, in this case <ul>, have ‘default’ values for attributes such as margin and padding.

    Try setting your margin and padding to zero for your: ul#navigation in your CSS then try working from there.

    Hope that helps.

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

You must be logged in to reply to this topic.

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