Results 1 to 1 of 1

Thread: Auto adjust height for module tab based on biggest tab height with pure CSS

  1. #1
    Join Date
    Mar 2006
    Location
    Chennai
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Auto adjust height for module tab based on biggest tab height with pure CSS

    I need to create auto growable module tabs with pure css.
    I'm facing the issue with middle align of text and expanding bg for tabs.

    Note: 1. one-true layout doesn't help me to set middle align of text and bottom border of each tab
    2. Need to achieve without scripts
    3. With cross browser compatible (IE,FF,Safari)
    4. Anchor tag(tab)(display:block) should respones for fully clickable/mousever (each Tab start with<a> and ends with </a>) with flexible width and height.

    Sample code is follows: but I need the output like attached image(jpeg).

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    .mtab
    {
    overflow:hidden;
    position:relative;
    }
    .eh_mtabLine
    {
    background:transparent url(gray_dot.gif) repeat-x scroll left bottom;
    padding:0 10px;
    }
    .eh_mtab,.eh_mtab div,.eh_mtabCr,.eh_mtabCr div
    {
    background:url(sprtab.png) no-repeat;
    }
    .eh_mtab,.eh_mtab:visited,.eh_mtabCr
    {
    color:#333333;
    font-family:Verdana;
    font-size:x-small;
    font-weight:normal;
    text-decoration:none;
    float:left;
    margin-left:5px;
    vertical-align:middle;
    text-align:center;
    display:block;
    background-color:#ccc;
    }
    .eh_mtab
    {
    background-position:0 0;
    }
    a.eh_mtab:hover
    {
    background-position:0 -210px;
    }
    a.eh_mtab:hover div
    {
    background-position:100% -315px;
    }
    .eh_mtab div
    {
    background-position:100% -105px;
    margin:0 0 0 5px;
    padding:5px 5px 0 0;
    vertical-align:middle;
    }
    .eh_mtab div p,.eh_mtabCr div p
    {
    padding-bottom:5px;
    display:block;
    }
    .eh_mtabCr
    {
    background-position:0 -420px;
    cursor:default;
    
    }
    .eh_mtabCr div
    {
    background-position:100% -525px;
    margin:0 0 0 5px;
    padding:5px 5px 0 0;
    vertical-align:middle;
    }
    p
    {
    margin:0;
    }
    </style>
    </head>
    <body>
    <div>Lorum Ipsum dollar sit <a href="#">Amet Lorum Ipsum</a> dollar sit Amet</div>
    <p>Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet
    Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit AmetLorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet</p>
    
    <div style="width:98%">
    <div class="mtab">
    <div class="base">
    <div class="baseRow">
    <a href="#" class="eh_mtabCr"><div><p>Lorum ipsum dollar</p></div></a>
    <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar
    <br /> Lorum ipsum dollar
    </p>
    </div></a>
    <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar</p></div></a>
    <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar</p></div></a>
    </div>
    </div>
    </div>
    </body>
    </html>
    Expecting favor!
    Last edited by Snookerman; 08-11-2009 at 07:53 AM.

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
  •