LinkBack URL
About LinkBacks
Reply With QuoteGive the list a width, and margin:0 auto;
You might also want to try:
You will have to set the width manually though, depending on how much space your ul takes up.Code:ul{ width:500px; overflow:auto; margin:0 auto; }
I'm creating a navigation using a list, and the list needs to have float:left; in there to make the links next to each other, but I also want the list to be centered in the div. I tried adding text-align:center; to the div, but it didn't work. Any ideas? Here's my code:
Code:#nav { text-align:center; } #nav ul { margin:0; padding:0; list-style-type:none; color:#cbcbcb; background-color:#333; } #nav li { float:left; padding:5px 20px; background-color:#333; }
Give the list a width, and margin:0 auto;
You might also want to try:
You will have to set the width manually though, depending on how much space your ul takes up.Code:ul{ width:500px; overflow:auto; margin:0 auto; }
okay thanks I'll try that :)
Throw a red border on the ul too, so you can see how wide it needs to be :)
Hmm... the text-align:center; and auto margins still don't seem to be doing anything :/ am I just being dumb? I've set the width too. Here's my HTML as well:
HTML Code:<div id="wrapper"> <div id="header"><img src="images/mainpoint.jpg" alt="MainPoint Fire Protection" /> </div> <div class="banner"></div> <div id="nav"> <ul> <li>HOME </li> <li>ABOUT US</li> <li>SERVICES</li> <li>INFORMATION</li> <li>MEET THE TEAM</li> <li>CONTACT US</li> <br style="clear:both;" /> </ul>
Seems to work fine for me?
This seems to work but will need tidying.
HTML Code:<html> <head> <style> #nav ul { margin:0; padding:0; list-style-type:none; color:#cbcbcb; background-color:#333; border:1px solid #f00; width:767px; overflow:hidden; margin:0 auto; } #nav li { float:left; padding:5px 20px; background-color:#333; text-transform:uppercase; } </style> </head> <body> <div id="wrapper"> <div id="header"><img src="http://www.estetica-design-forum.com/images/mainpoint.jpg" alt="MainPoint Fire Protection" /></div> <div class="banner"></div> <div id="nav"> <ul> <li>Home</li> <li>About Us</li> <li>Services</li> <li>Information</li> <li>Meet the Team</li> <li>Contact Us</li> </ul> </div> </div> </body> </html>
I must have missed something then, because yours works and mine doesn't lol. Thanks Harry <3
sionnach played a pivotal role
edited!
Posting Permissions
Check the forum often for the latest design announcements. Everything from graphic design and web design, to films and music. Estetica is a great place for people to get together and help each other out.
Bookmarks