Long Con Posted August 24, 2010 Share Posted August 24, 2010 Hi, I'm pretty new at CSS, and I want to make a horizontal menu for a website.I was told that float:left on my unordered list would take it from vertical lameness to awesome horizontality - and it did - but I would like to center the menu on the page, and it is left-aligned.How can I make a horizontal menu that is centered? Link to comment Share on other sites More sharing options...
chibineku Posted August 25, 2010 Share Posted August 25, 2010 Add float left and display: block to the list items (li) not the list itself, and then margin: 0 auto to the list and see if that works. Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2010 Share Posted August 25, 2010 Floated elements get outside of the page flow, to an extent. They won't be affected by text-align. You can't center elements if they're floated.If you would like to center menu elements you can use display:inline instead of floating them. The only problem is that you won't be able to style them as blocks. (margins, width, height ...) Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2010 Share Posted August 25, 2010 That depends if the ul is a fixed width or fluid. If the list is fixed, as in total width of li combined, then margin:0 auto will work.else a combination of using container div and position relative sould work.menu_outer {clear:both;float:left;overflow:hidden;width:100%;}ul#menu {float:left;left:50%;list-style-type:none;margin:0 auto;padding:0;position:relative;}ul#menu li {float:left;position:relative;right:50%;}I know this works for menu without submenus, not sure with though. Link to comment Share on other sites More sharing options...
Long Con Posted August 25, 2010 Author Share Posted August 25, 2010 Thank you, dsonesuk, that solution worked. And thanks everyone for your responses!Another question: How can I put a small space in between the block menu items in the horizontal menu? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2010 Share Posted August 25, 2010 usually ul#menu li {margin-left: 2px; margin-right:2px;} Link to comment Share on other sites More sharing options...
Long Con Posted August 25, 2010 Author Share Posted August 25, 2010 Oh, of course! Thanks again! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.