Jump to content

Need help making DIV in menu extend 100%


Guest bigthink

Recommended Posts

Guest bigthink

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...