css menu bar problem

[ta2shop]

hy guys, i have a css isue... cant make the <li> tags to fit the whole menubox div tag!
or the <a> tags, i basicly have a div (menubox) inside of it is a ul tag (menu) the wrapper is 100% width, as the menubox but a cant get the inside elments to fit that 100% width!
any help please.
the css
[syntax=css]
#menubox{
width:100%;
margin:0 auto;
padding:0;
}
#menu{
margin:0;
padding:0;
width:100%;
height:42px;
line-height:42px;
}
#menu li{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
display:block;
float:left;
height:40px;
line-height:40px;
width:200px;
background-color:#CCC;
border:solid #000 1px;
}
#menu li:hover{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
display:block;
float:left;
height:40px;
line-height:40px;
width:200px;
background-color:#999;
border:solid #000 1px;
}
#menu li a{
margin:0;
padding:0;
font-family:"Arial Rounded MT Bold";
font-size:18px;
color:#FF0;
text-align:center;
text-decoration:none;
width:200px;
height:40px;
line-height:40px;
}
#menu li a:hover{
margin:0;
padding:0;
font-family:"Arial Rounded MT Bold";
font-size:18px;
color:#ff0;
text-align:center;
text-decoration:none;
width:200px;
height:40px;
line-height:40px;
}
[/syntax]
and the html
[syntax=xhtml]
<ul id="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ACCOUN</a></li>
<li><a href="#">REGISTER</a></li>
<li><a href="#">SPECIALS</a></li>
<li><a href="#">CONTAC US</a></li>
</ul>
[/syntax]

[jacek]

If you want the buttons to fill the entire menu you cant just give them a fixed width of 200px as you have here.

You would have to set the width in percent also.

[ta2shop]

i did but now it is bigger than the menu div
[syntax=css]
#menubox{
width:100%;
margin:0 auto;
padding:0;
}
#menu{
margin:0;
padding:0;
width:100%;
height:42px;
line-height:42px;
}
#menu li{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
display:block;
float:left;
height:40px;
line-height:40px;
width:20%;
background-color:#CCC;
border:solid #000 1px;
}
#menu li:hover{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
display:block;
float:left;
height:40px;
line-height:40px;
width:20%;
background-color:#999;
border:solid #000 1px;
}
#menu li a{
margin:0;
padding:0;
font-family:"Arial Rounded MT Bold";
font-size:18px;
color:#FF0;
text-align:center;
text-decoration:none;
width:20%;
height:40px;
line-height:40px;
}
#menu li a:hover{
margin:0;
padding:0;
font-family:"Arial Rounded MT Bold";
font-size:18px;
color:#ff0;
text-align:center;
text-decoration:none;
width:20%;
height:40px;
line-height:40px;
}
[/syntax]

[jacek]

so make them smaller ?

I don't know really I usually use fixed size things.

[ta2shop]

fixed, i actuli had to make the <li> tags 19.9% with to ramain in the menu div

[jacek]

Ah that will probably be because of the border ! Border is additional to the width

As long as you got it working

[ta2shop]

yeh, but it is nothing fix yet i am in the proces of styling it now, i am triing to make a shopping cart

[ta2shop]

fixed the main menu bar, but now got a tiny problem with the top secundary menu bar!
what i basicly need to do is div with transparent text, i did that but now the txet i place in it is alsow transparent, i tryed to placeit in a div or a <p> tag but it is stil the same.
here is the code:
[syntax=xhtml]
<div id="topmenu">
<div id="transbox">
<div id="text">this is white color</div>
</div>
</div>
[/syntax]
and the css
[syntax=css]
#transbox{
font-family:"Arial Rounded MT Bold";
font-size:14px;
color:#fff;
margin:0;
padding:0;
filter:alpha(opacity=60);
opacity:0.6;
}
#text{
font-family:"Arial Rounded MT Bold";
font-size:14px;
color:#fff;
margin:0;
padding:0;
}
#topmenu{
font-family:"Arial Rounded MT Bold";
font-size:14px;
font-weight:bolder;
color:#fff;
border-bottom:solid #333 1px;
background-color:#CCC;
width:100%;
height:20px;
line-height:20px;
}
[/syntax]

[jacek]

transparency is also applied to child elements of the one you set it on, to remove it you ill have to have two containing elements, one for the content and one for the transparent bits.

[ta2shop]

i dont follow
my firs div is the "topmenu" in it i have the 2 divs "transbox" and "text" in it.
so i set the opacity to the transbox div, and now i have to set it in the text div alsow??

[jacek]

No, if you set transparency in a element, that same transparency is also applied to all of the elements within it.