PDA

View Full Version : Centering Navigation bar with CSS



2161
02-08-2007, 08:57 PM
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

areidmtm
02-08-2007, 09:15 PM
you could put the <ul></ul> tags in a <div></div> tag and use the align="center" property

2161
02-08-2007, 09:27 PM
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!!

areidmtm
02-08-2007, 09:37 PM
You should be fine on any browser

felgall
02-08-2007, 11:08 PM
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.

2161
02-09-2007, 05:11 AM
I will try it and see if I can get it to work.

2161
02-09-2007, 05:34 AM
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.

felgall
02-09-2007, 11:22 AM
ul#list-nav {
list-style:none;
margin:0 auto;
padding:0;
width:525px;
}

2161
02-09-2007, 04:22 PM
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.