Hey guys. I am using a ul for my menu. It needs to be horizontal and the li's need to be blocks so I applied float:left to the li in css. Now I need to center the list on the page but applying margin:0 auto or text-align:center in their respective places does not work. How do I center a list where the li's are floated left? Here is my css: body { margin: 0; padding: 0; text-align: center; } #container { margin: 40px auto; width: 754px; } #header { width: 754px; height: 160px; background-image: url('images/header.gif'); } #header ul { margin: 0; padding: 0; list-style-type: none; } #header ul li { margin: 0; padding: 0; float: left; } Code (markup): And my html: <body> <div id="container"> <div id="header"> <ul> <li>Home</li> <li>Link</li> <li>Link</li> </ul> </div> </div> </body> HTML:
If I need a menu to be centered AND if there needs to be a background images which is 100% wide, I use the dreaded wrapping div : ( I've used the display:table technique for a menu that needed to accordion like a table. While it worked nicely, there's a nasty thing about display: table that real tables don't have: while a real table can has border-collapse: separate as a defining feature, display: table is permanently stuck as border-collapse: collapse. Meaning if you are using the li's as your table cells and the menu itself as your table row then you cannot add side margins. This pissed my off to no end when I first started struggling with it.
Table cells do not have margins, they have border spacing, set at the table. ul { border-spacing: 10px; display: table; margin: 0 auto; } li { display: table-cell; width: 150px; border: 1px solid black; text-align: center; } ============ <ul> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> </ul> Code (markup): cheers, gary
Thanks kk5st. This seems to do the trick in Firefox 3 but in IE7 the cells are not horizontally aligned.
No, it wouldn't. IE lacks support. Why must you float the list-items? What width is the list, or are the list items? There is nothing in your posted code to show compelling reason to limit yourself so. You may be correct, but without more specifics, we can't do more than guess at solutions. gary
Well the reason I originally wanted to use block was because of how I wanted to set my borders. I wanted to put different colour left and right borders and the border from one li should touch the border from the next li. When I use inline, there is a gap between li's so the borders dont touch. However, I decided to use an image for the border now so my options have opened up. Here is what I am working on: www.islandrobot.com/igot21 You can see the navigation there with the borders I am talking about. How can I make that nav look the way it does now (in firefox), but work in all browsers? I really appreciate the help guys and sorry for not being more clear about my problem earlier.
Take a look at this thread at CSSCreator. I think you should be able to adapt those results to your needs. cheers, gary
You can set border spacing?? I thought I read in the specs that for display: table the setup is permanently boder-collapse: collapse. And with tables you need "separate" to set border spacing, yes?? Otherwise if that code above works, holy s*** wish I knew it before! I lost a lot of hair over that.