Results 1 to 9 of 9

Thread: Centering Navigation bar with CSS

  1. #1
    Join Date
    Jan 2007
    Location
    Bartlett, IL. USA
    Posts
    38

    Default Centering Navigation bar with CSS

    I am working on converting my site from HTML 4.01 to CSS DTD Strict. I have a navigation bar that I got from a site that shows how to create them. They didn't show how to center it on the page and I have been unable to contact them for more information.

    I also have had problems finding sites that show how to center it - seems nobody can do it very well. My CSS file is just a test file so I can work with the code and get it to do what I want before putting it on the site. The text is centered in the boxes just fine, but I want the navigation bar centered on the page. I can't get it away from the left side of the page.

    Thanks
    Last edited by 2161; 03-15-2007 at 07:20 PM.

  2. #2
    Join Date
    Feb 2006
    Location
    Somewhere where I don't know where I am
    Posts
    2,154

    Default

    you could put the <ul></ul> tags in a <div></div> tag and use the align="center" property
    Sign Up Now!
    Unlimited Storage, Unlimited Transfer, Host Unlimited domain names, 1 Free Domain Name
    BlueHost Features | BlueHost Help Desk | Become a BlueHost Affiliate | BlueHost CEO Blog
    (888) 401-4678 | Create a support ticket

  3. #3
    Join Date
    Jan 2007
    Location
    Bartlett, IL. USA
    Posts
    38

    Default

    I spent 2 days looking for that and couldn't find it. Everyone creates the nav bars to the left all the time. Some people have mentioned that it might not work perfectly on other browsers such as Mozzila, what do you think?? I would like it to display properly on any browser.

    Thanks it works fine on mine!!
    Last edited by 2161; 02-08-2007 at 09:29 PM.

  4. #4
    Join Date
    Feb 2006
    Location
    Somewhere where I don't know where I am
    Posts
    2,154

    Default

    You should be fine on any browser
    Sign Up Now!
    Unlimited Storage, Unlimited Transfer, Host Unlimited domain names, 1 Free Domain Name
    BlueHost Features | BlueHost Help Desk | Become a BlueHost Affiliate | BlueHost CEO Blog
    (888) 401-4678 | Create a support ticket

  5. #5
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    4,944

    Default

    align="center" is deprecated and so can't be used with a strict doctype.

    To center things you should use CSS. For example if you give your navigation an id of nav and want it 200 pixels wide and centered you would use:

    #nav {width:200px; margin:0 auto;}

    To work in IE6 the page needs the doctype as the first thing in the file.

  6. #6
    Join Date
    Jan 2007
    Location
    Bartlett, IL. USA
    Posts
    38

    Default

    I will try it and see if I can get it to work.
    Last edited by 2161; 02-09-2007 at 05:39 AM.

  7. #7
    Join Date
    Jan 2007
    Location
    Bartlett, IL. USA
    Posts
    38

    Default

    Quote Originally Posted by felgall
    To center things you should use CSS. For example if you give your navigation an id of nav and want it 200 pixels wide and centered you would use:

    #nav {width:200px; margin:0 auto;}
    Where where I put this in my code to get it to center? I tried it and can't get it to work. My .CSS file is in my first post.

  8. #8
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    4,944

    Default

    ul#list-nav {
    list-style:none;
    margin:0 auto;
    padding:0;
    width:525px;
    }

  9. #9
    Join Date
    Jan 2007
    Location
    Bartlett, IL. USA
    Posts
    38

    Default

    Well this sucks!! I centered the nav bar, but I am unable to center the boxes. It seems the center command is depreceated. I can float:left, float:right, but can't float:center. That is just stupid.

    I found a solution to my troubles. Someone else had the same problem and he had someone style a nav bar that is centered on the page. So I'll just have to use that and edit it to fit my nav bar setup.

    Why would someone design CSS so that you can't center the nav bar boxes?? You can center the nav bar itself, but what about the stuff inside??

    I've spent 5 days just trying to get the nav bar boxes centered. I can see why no one centers them, as I mentioned earlier all the nav bar boxes are either left or right on a centered nav bar.

    margin:0 auto; centers the nav bar which is fine, but all the boxes are to the left and no matter what I do I cannot center the boxes............very frusterated!

    Anyway thanks for the help.
    Last edited by 2161; 02-10-2007 at 06:32 AM.

Posting Permissions

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