Guest bigthink Posted December 13, 2005 Share Posted December 13, 2005 Here is my issue:I have a menu div using the UL and LI elements in my CSS. However, I want to set the padding on the left and right side of the links to AUTO so that if I have three links then it fills the entire DIV and likewise with five or six links.You can see the page here:www.bigthinkagency.com/realityHere is my HTML: <div class="top-menu1"> <ul class="menu1"> <li class="menu1"> <a href="#">Survivor</a></li> <li class="menu1"> <a href="#">Amercian Idol</a></li> <li class="menu1"> <a href="#">Bachelor</a></li> <li class="menu1"> <a href="#">Chat Home</a></li> </ul> </div> Here is my CSS: div.top-menu1{ line-height: 23px; width: 100%;}ul.menu1{ list-style-type: none; margin: 0; padding: 0; width: 100%;}ul.menu1 li{ float: left; text-align: center; border-right: 1px solid #0030CB; padding: auto; width: auto; }ul.menu1 li a:link{ color: #FFFFFF; font-size: 8pt; text-decoration: none; padding-top: 5px; padding-right:auto; padding-left:auto; padding-bottom: 6px; width: 100%;}ul.menu1 li a:visited{ color: #FFFFFF; font-size: 8pt; text-decoration: none; padding-top: 5px; padding-right:auto; padding-left:auto; padding-bottom: 6px; width: 100%;}ul.menu1 li a:hover{ text-decoration: none; font-size: 8pt; background: #90FF00; padding-top: 5px; padding-right:auto; padding-left:auto; padding-bottom: 6px; color: #006CFF; width: 100%;} I know I'm missing something really basic here or I'm just trying too hard. Heck if you have any easier way to do this then by all means tell me! I just want to make this work. :)Your help is greatly appreciated!Stacy Link to comment Share on other sites More sharing options...
S@m Posted December 13, 2005 Share Posted December 13, 2005 Well, I'm not sure I totally follow you, but here is a list that I made quick. Maybe it will help?HTML: <!-- basic list --><div id="listContainer"> <div class="basicList"> <ul> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> <li><a href="#">Item Five</a></li> <li><a href="#">Item Six</a></li> </ul> </div></div><!-- end basic list --> CSS: /* basic list */#listContainer { text-align: center; margin: 0 auto; margin-top: 20px; padding: 0; width: 775px; background-color: dad; }.basicList { font-family: arial, helvetica, sans-serif; font-size: 12px; }.basicList ul { list-style-type: none; background-color: #9c9; } .basicList ul li { display: inline; padding: 5px; margin: 0 auto; } .basicList ul li a { color: #000; text-decoration: none; } .basicList ul li a:hover { color: #ffcc00; text-decoration: underline; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now