Log in

View Full Version : How to apply a relative width to li's from ddcolortabs?



pbo
11-25-2008, 07:32 PM
First of all understand that i'm relatively new to css and especially div's. I have been trying to figure this out for the last 3 days and could not get it done :(.

I'm trying to integrate the ddcolortabs into my website and i would actually want to devide the tabs over the full width of a cell (td) from a table. In a table it would be something like <td width=20%> for 5 tabs, and so on (the amount of tabs differs from a query...).

I've tried the #ddcolortabs li { width:20% } but that doesn't work. If i specify the width to a number of px it does work,,, why?

If i put a border in #ddcolortabs ul {... then it shows the correct box over the full width that i expect.

Any help is appreciated.
Paul

Snookerman
11-25-2008, 07:57 PM
Could you please post a link to your site, or post/attach your code?

pbo
11-25-2008, 08:17 PM
#ddcolortabs {
width: 100%;
position: relative;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#ddcolortabs ul {
font: bold 11px Arial, Verdana, sans-serif;
text-align: center;
border: 1px outset #292999;
margin: 0;
padding: 0;
list-style:none;
}

#ddcolortabs li {
/*width: 20%;*/
display: block;
/*margin: 0 2px 0 0;*/
/*padding: 0;*/
text-transform: uppercase;
}

#ddcolortabs li a {
/*width: 80px;*/
float: right;
display: block;
color: white;
background: #646464 url(images/color_tabs_left.gif) no-repeat left top;
margin: 0 2px 1px 0;
padding: 0 0px 1px 0px;
text-decoration:none;
letter-spacing: 1px;
white-space:nowrap;
}

#ddcolortabs li a span {
float: none;
display: block;
background: transparent url(images/color_tabs_right.gif) no-repeat right top;
padding: 4px 14px 2px 14px;
}

php generates the following:

<div id="ddcolortabs">
<ul>
<li>
<a href="http://..." title="A">
<span>TabA</span>
</a>
</li>
<li>
<a href="http://..." title="B">
<span>TabB</span>
</a>
</li>
<li id="home">
<a href="http://.../index.php">
<span>home</span>
</a>
</li>
</ul>
</div>

In the sample given, how can i set the width of each li to 1/3 (33%)?