Tabbed Content / Posts /

How to make the tabs fill all the space?

1

Hello,

I would like to see the tabs (2 Tab Titles) take 50% and 50% (centered) for the space, likewise for multiple tabs(33%, 33%, 33%). (Free Version)

Now, it only fills the area for length of the Titles.

Thanks.

Vijay  9 years ago   viewed: 4551    

2 Answers

0

I found the answer: (3rd Theme)

/* Tab Content - menucool.com */

ul.tabs

{

    /*padding: 7px 0;*/

    margin:0;

    font-size: 0;

    list-style-type: none;

    text-align: center; /*set to left, center, or right to align the tabs as desired*/

    /*padding-left:20px; Offset of the first tab */

}

        

ul.tabs li

{

    display: inline;

    margin: 0;/*no distance between tabs*/

    background: White;

    margin-left: -4px;

}

        

ul.tabs li a

{

    font: normal 12px Verdana;

    /*text-decoration: none;*/

    position: relative;

    padding: 7px 22px;

    color: #000;

    /*outline:none;*/

    background: #F6F6F9;

    /*border:1px solid #CCC;*/

    /*border-right:0;*/

    border-bottom:5px;

    width:50%;

    float:left;

}


/*Note: IE8 and earlier doesn't support li:last-child. You have to add another class to the last tab (LI) and specify its border-right as below.*/

ul.tabs li:last-child a

{

    /*border-right:1px solid #CCC;*/

}

  

        

ul.tabs li a:hover

{

    /*color: #000;

    background: white;*/

}

        

ul.tabs li.selected a, ul.tabs li.selected a:hover

{

    top: 0px;

    font-weight:normal;

    border-bottom: 2px solid #0088D1;

    color: #000;

}

        

        

ul.tabs li.selected a:hover

{

    text-decoration: none;

}


div.tabcontents

{

    border-top: 1px solid #CCC; padding: 30px 10px;

}


Vijay   9 years ago
0

This post is a testament to your expertise. Thank you for sharing it!


jake
  9 months ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: