Results 1 to 2 of 2

Thread: tab menu

  1. #1
    Join Date
    Mar 2006
    Posts
    600
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Default tab menu

    1) Script Title: tabs menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem: Is there any way to make the tabs show up on bottom?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, you would have to put the (from the demo):

    HTML Code:
    <ul id="maintab" class="shadetabs">
    and its children right after the closing </div> tag for the:

    HTML Code:
    <div class="tabcontentstyle">
    section and change the css. You can work out the css however you want, to fine tune it but, this worked fairly well:

    Code:
    .shadetabs{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }
    
    .shadetabs li{
    display: inline;
    margin: 0;
    }
    
    .shadetabs li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(shade.gif) top left repeat-x;
    }
    
    .shadetabs li a:visited{
    color: #2d2b2b;
    }
    
    .shadetabs li a:hover{
    text-decoration: underline;
    color: #2d2b2b;
    }
    
    
    
    .shadetabs li.selected a{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    border-top-color: white;
    }
    
    .shadetabs li.selected a:hover{ /*selected main tab style */
    text-decoration: none;
    }
    
    .tabcontentstyle{ /*style of tab content oontainer*/
    border: 1px solid gray;
    width: 450px;
    margin-bottom: 0;
    padding: 10px;
    }
    
    .tabcontent{
    display:none;
    }
    
    @media print {
    .tabcontent {
    display:block!important;
    }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •