www.webdeveloper.com
Results 1 to 1 of 1

Thread: 3 navigation tabs within another tab...?

  1. #1
    Join Date
    Nov 2008
    Posts
    12

    3 navigation tabs within another tab...?

    Hi everybody,
    I've been searching the web for some hints of how to build something as described below. If anyone has came across something similar I'd appreciate a hint.

    Today I have a tabbed navigation like this: Please see attachment "tabs.gif"
    I want to create something like attachment "tabs2.gif".
    The new "overlaying tab" needs to adjust its width when the (dynamic) names of the bottom tabs change.

    Today's html:
    HTML Code:
    <div id="primary_tabs_bg">
    <ul id="primary_tabs">
      <li>
        <span class="text"><a href="#">First tab...</a></span>
      </li>
      <li class="active">
        <span class="text"><a href="#">Tab 2</a></span>
      </li>
      <li class="plugin">
        <span class="text"><a href="#">Plugin</a></span>
      </li>
      <li>
        <span class="text"><a href="#">Tab 3</a></span>
      </li>
      <li>
        <span class="text"><a href="#">Tab4</a></span>                  
      </li>		   
    </ul>
    </div>
    Today's CSS:

    Code:
    #primary_tabs_bg {
    background:url("../images/common/bg_primary_tabs.gif") repeat-x; 
    height:45px; 
    margin:6px 0px 3px 0px;
    padding:0px 0px 0px 223px;}
    
    ul#primary_tabs {
    margin:0px; 
    padding:17px 0px 0px 0px;
    list-style:none;}
    
    ul#primary_tabs li {
    float:left; 
    width:auto; 
    margin:0px 0px 0px 20px;
    font-weight:bold;}
    
    ul#primary_tabs .text {
    display:block;
    padding:6px 12px 5px 16px;
    margin:0px 5px 0px 0px; 
    font-size:110%; 
    font-weight:bold;}
    
    ul#primary_tabs li {
    background:url("../images/common/tab_off_right.gif") no-repeat right top;}
    
    ul#primary_tabs li .text {
    background:url("../images/common/tab_off_left.gif") no-repeat left top;}
    
    ul#primary_tabs li.active {
    background:url("../images/common/tab_on_right.gif") no-repeat right top;}
    
    ul#primary_tabs li.active .text {
    background:url("../images/common/tab_on_left.gif") no-repeat left top;}
    
    ul#primary_tabs li.plugin {
    background:url("../images/common/tab_plug_off_right.gif") no-repeat right 8px; margin-left:0px; padding-top:8px;}
    
    ul#primary_tabs li.plugin .text {
    background:url("../images/common/tab_plug_off_left.gif") no-repeat left top; padding:2px 6px 5px 11px; font-size:95%;}
    
    ul#primary_tabs li.plugin_active {
    background:url("../images/common/tab_plug_on_right.gif") no-repeat right 8px; margin-left:0px; padding-top:8px;}
    
    ul#primary_tabs li.plugin_active .text {
    background:url("../images/common/tab_plug_on_left.gif") no-repeat left top; padding:2px 6px 5px 11px; font-size:95%;}
    
    ul#primary_tabs li a {color:#333; text-decoration:none;}
    
    ul#primary_tabs li.active a,
    ul#primary_tabs li.plugin_active a {color:#a13d00; text-decoration:none;}
    
    ul#primary_tabs li a:hover {color:#a13d00; text-decoration:underline;}
    
    ul#primary_tabs li.active a:hover,
    ul#primary_tabs li.plugin_active a:hover {text-decoration:none;}
    Has anyone came across a need for this or seen something like it?
    Any comments appreciated!

    Thanks!
    /Claes
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles