PDA

Click to See Complete Forum and Search --> : Help expanding CSS LI menu

riskmod
09-25-2007, 04:56 PM
I wanted to know how to expand this LI menu.

I need this menu to stretch out evenly 800 px wide....how can you do this???

Here's the script:


.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
background: #363636 center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: #000;
background: #fab927 center center repeat-x;
}



Here's the body html:

<div style="width: 800px;">
<ul class="solidblockmenu">
<li><a href="xxx" class="current">Home</a></li>
<li><a href="xxx">Product Images</a></li>
<li><a href="xxx">Contact Us</a></li>
</ul>
</div>
Kravvitz
09-25-2007, 05:44 PM
This is as close as you can get cross-browser without resorting to hacks since IE doesn't support display:table-cell.
.solidblockmenu li{
float: left;
width: 33.3%;
}
P.S. It would be helpful if you put your code between tags (http://www.phpbb.com/community/faq.php?mode=bbcode#f21) in the future.
riskmod
09-25-2007, 08:43 PM
ok thanks
riskmod
09-26-2007, 12:11 AM
ok I think this works much better as I added position: absolute and tried it at 752 px (tested with a 752px fake image).

Only thing is it's accurate in FF but in IE it looks like the li hover doest fully position (haven't tested it in Mac). Any ideas?:




<html>

<head>
<title>test</title>



<style type="text/css">

#navcontainer
{
margin: 0px 0 0 0px;
padding: 0;
height: 24px;
width: 752px;
background: #363636
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: absolute;
display: table-cell;
}

#navcontainer ul li
{
display: block;
float: left;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #fff;
width: 19.24em;
height: 24px;
padding: 6px 0 0 0;
margin: 0;
color: #fff;
text-decoration: none;
display: table-cell;
background: #363636 center center repeat-x;
font: bold 13px Arial;
position: relative;
}

#navcontainer ul li a:hover
{
color: #000;
background: #fab927;
}

#navcontainer a:active
{
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}

#navcontainer li a:hover, #navcontainer li .current{
color: #000;
background: #fab927 center center repeat-x;
}

</style>

<!--[if IE]>
<style type="text/css" media="screen">

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->


</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<li style="border-right: 1px solid white;"><a href="xxx" class="current">Home</a></li>
<li style="border-right: 1px solid white;"><a href="xxx" title="xxx">Product Images</a></li>
<li><a href="xxx" title="xxx">Contact Us</a></li>
</ul>
</div>

<img src="sdsd.gif" width="752" height="40" border="0" alt="xxx">


</body>

</html>
Kravvitz
09-29-2007, 11:32 PM
It doesn't work in IE because IE doesn't support display:table-cell, like I said in my first reply. Just give the <li>s a set width and give the <a>s display:block.