www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS Nav Bar

  1. #1
    Join Date
    Aug 2005
    Posts
    18

    CSS Nav Bar

    Hi Guys,
    Could you help me out here? Take a look at the site I knocked together http://www.herrlip.com
    I am trying to get this CSS Nav bar to sit plum in the center of the page, I can move it to the right however when I chose center or middle in the code it goes down the page instead of across. Code below:

    #navcontainer
    {
    margin: 0;
    padding: 0 0 0 12px;
    }

    #navcontainer UL
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #navcontainer LI
    {
    display: block;
    margin: 0;
    padding: 0;
    float: left; TRIED CHANGING THIS PART HERE TO "MIDDLE" OR "CENTER"
    width: auto;
    }

    #navcontainer A
    {
    color: #444;
    display: block;
    width: auto;
    text-decoration: none;
    background: #DDDDDD;
    margin: 0;
    padding: 2px 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #aaa;
    }

    #navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

    #navcontainer A.active:link, #navcontainer A.active:visited
    {
    position: relative;
    z-index: 102;
    background: #BBBBBB;
    font-weight: bold;
    }

    Any help would be very useful

    Jamie

  2. #2
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    try:

    margin: auto;

    this will center it horizontally

    you also need to move your content down.
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  3. #3
    Join Date
    Nov 2005
    Location
    127.0.0.1
    Posts
    329
    whoa! it's almost 1am here and I must say that the weird laughter on your home page freaked me out!
    my computer suffers from short-term memory loss.

  4. #4
    Join Date
    May 2006
    Posts
    24
    Here is a tutorial to center a floated left nav bar.

    http://www.cssplay.co.uk/menus/centered.html

    Hope that helps. (",)

  5. #5
    Join Date
    Aug 2005
    Posts
    18

    Still having issues

    Hi guys,
    Still no luck - I am a bit of a virgin with CSS and I have tried the suggestion of my first response, this is what I did

    #navcontainer
    {
    margin:0 auto;
    padding: 0 0 0 12px;
    }

    #navcontainer UL
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #navcontainer LI
    {
    display: block;
    margin: auto;
    padding: 0;
    float: left;
    width: auto;
    }

    #navcontainer A
    {
    color: #444;
    display: block;
    width: auto;
    text-decoration: none;
    background: #DDDDDD;
    margin: 0;
    padding: 2px 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #aaa;
    }

    #navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

    #navcontainer A.active:link, #navcontainer A.active:visited
    {
    position: relative;
    z-index: 102;
    background: #BBBBBB;
    font-weight: bold;
    }

    I also tried moving the content down and I still cant get it centre take a look, www.herrlip.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles