Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help placing navigation bar into layout

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27090
    dedobleve
    Member

    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:

    #67597

    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)
  • The forum ‘CSS’ is closed to new topics and replies.