Results 1 to 3 of 3

Thread: How to apply a relative width to li's from ddcolortabs?

  1. #1
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to apply a relative width to li's from ddcolortabs?

    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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Could you please post a link to your site, or post/attach your code?

  3. #3
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    #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%)?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •