www.webdeveloper.com
Page 2 of 4 FirstFirst 1234 LastLast
Results 16 to 30 of 46

Thread: Finally, Accessible DHTML Tabs

  1. #16
    Join Date
    Dec 2004
    Posts
    27

    Question Help!

    I don't what I'm doing wrong but the minute I try to add another tab, this stops working on Firefox. It's fine on I.E. though. Any ideas?

  2. #17
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  3. #18
    Join Date
    Dec 2004
    Posts
    27

    Thumbs up

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Accessible Tabs: A-Tabs 1.0</title>
    <style type="text/css" media="screen">
    <!--
    @import "TAB_styles.css";
    -->
    </style>
    <script type="text/javascript" src="TAB_Function_Lib.js"></script>
    </head>
    <body bgcolor="#000000" text="#FFFFFF" link="#FFCCFF" vlink="#FF6666" alink="#FF33FF"
    <pre style="font-size: 1em; font-family: 'courier new', courier, monospace;" id="TAB_DEBUG_BLOCK"></pre>
    <center><font color="#ffccff"><h1>Dort Mall</h1>
    <h2>Flint, Michigan</h2></font>

    <div class="tabWrapper" id="example">

    <ul class="tabbedNavOff" id="example_tabs">
    <li><a class="" id="tabsample1" href="#sampleA" onclick="return Example.switchTab(this.id,false)"><span><span>Page 1</span></span></a></li>
    <li><a class="" id="tabsample2" href="#sampleB" onclick="return Example.switchTab(this.id,false)"><span><span>Page 2</span></span></a></li>
    <li><a class="" id="tabsampleC" href="#whatever" onclick="return Example.switchTab(this.id,false)"><span><span>Page 3</span></span></a></li>
    <li><a class="" id="tabsampleD" href="#sampleD" onclick="return Example.switchTab(this.id,false)"><span><span>Page 4</span></span></a></li>
    <li><a class="" id="tabsampleE" href="#sampleE" onclick="return Example.switchTab(this.id,false)"><span><span>Page 5</span></span></a></li>
    <li><a class="" id="tabsampleF" href="#sampleF" onclick="return Example.switchTab(this.id,false)"><span><span>Page 6</span></span></a></li>

    </ul>
    <div class="tabSpacerOff" id="example_spacer">&nbsp;</div>

    <div class="tabBox" id="sampleA">

    <div class="tabBoxGutter">
    Page 1</div>
    <p class="tabBoxNav">
    <a href="#sampleB" class="tabBoxNavRight" onclick="return Example.switchTab('tabsample2', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end sampleA -->

    <div class="tabBox" id="sampleB">

    <div class="tabBoxGutter">
    Page 2</div>
    <p class="tabBoxNav">
    <a href="#sampleA" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample1', true);">&lt;&lt; Previous</a>
    <a href="#whatever" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleC', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>

    </div><!-- end sampleB -->

    <div class="tabBox" id="whatever">
    <div class="tabBoxGutter">
    Page 3</div>
    <p class="tabBoxNav">
    <a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample2', true);">&lt;&lt; Previous</a>
    <a href="#sampleD" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleD', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>

    </div><!-- end whatever -->

    <div class="tabBox" id="sampleD">

    <div class="tabBoxGutter">
    Page 4</div>
    <p class="tabBoxNav">
    <a href="#whatever" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleC', true);">&lt;&lt; Previous</a>
    <a href="#sampleE" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleE', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>
    </div><!-- end sampleD -->

    <div class="tabBox" id="sampleE">

    <div class="tabBoxGutter">
    Page 2</div>
    <p class="tabBoxNav">
    <a href="#sampleD" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleD', true);">&lt;&lt; Previous</a>
    <a href="#sampleF" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleF', true);">Next &gt;&gt;</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>

    </div><!-- end sampleE -->

    <div class="tabBox" id="sampleF">
    <div class="tabBoxGutter">
    Page 3</div>
    <p class="tabBoxNav">
    <a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleE', true);">&lt;&lt; Previous</a>
    <span class="tabSpacer">&nbsp;</span>
    </p>

    </div><!-- end sampleF -->

    <p class="tabOptionsOff" id="example_options"></p>
    <script type="text/javascript">
    //<![CDATA[

    Without this part it does not work period, with it it's okay on IE but not firefox
    // Declare a new instance of the TAB class
    var Example = new TAB(tabsampleD);
    var Example = new TAB(tabsampleE);
    var Example = new TAB(tabsampleF);

    // Set IDs needed to create tab structure.
    Example.name = "example";
    Example.tabSpacerID = "example_spacer";
    Example.tabOptionsID = "example_options";
    Example.tabRootID = "example_tabs";

    // IDs of the tabs themselves
    Example.tabIDs[0] = "tabsample1";
    Example.tabIDs[1] = "tabsample2";
    Example.tabIDs[2] = "tabsampleC";
    Example.tabIDs[3] = "tabsampleD";
    Example.tabIDs[4] = "tabsampleE";
    Example.tabIDs[5] = "tabsampleF";

    // IDs of the tab boxes
    Example.boxIDs[0] = "sampleA";
    Example.boxIDs[1] = "sampleB";
    Example.boxIDs[2] = "whatever";
    Example.boxIDs[3] = "sampleD";
    Example.boxIDs[4] = "sampleE";
    Example.boxIDs[5] = "sampleF";

    // Initialize the tabs
    Example.initialize();

    //Example.initializeWithIDs("example","example_tabs","example_spacer","example_options");
    // ]]>
    </script>
    </div><!-- end example -->
    </body>
    </html>

  4. #19
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    This code below is working for me:
    Code:
    <div class="tabWrapper" id="example">
      
      <ul class="tabbedNavOff" id="example_tabs">
        <li><a id="tabsample1" href="#sampleA" onclick="return Example.switchTab(this.id,false)"><span><span>Page 1</span></span></a></li>
        <li><a id="tabsample2" href="#sampleB" onclick="return Example.switchTab(this.id,false)"><span><span>Page 2</span></span></a></li>
        <li><a id="tabsampleC" href="#whatever" onclick="return Example.switchTab(this.id,false)"><span><span>Page 3</span></span></a></li>
        <li><a id="tabsampleD" href="#sampleD" onclick="return Example.switchTab(this.id,false)"><span><span>Page 4</span></span></a></li>
        <li><a id="tabsampleE" href="#sampleE" onclick="return Example.switchTab(this.id,false)"><span><span>Page 5</span></span></a></li>
        <li><a id="tabsampleF" href="#sampleF" onclick="return Example.switchTab(this.id,false)"><span><span>Page 6</span></span></a></li>
      </ul>
      <div class="tabSpacerOff" id="example_spacer">&nbsp;</div>
      
      <div class="tabBox" id="sampleA">
        <div class="tabBoxGutter">Page 1</div>
        <p class="tabBoxNav">
          <a href="#sampleB" class="tabBoxNavRight" onclick="return Example.switchTab('tabsample2', true);">Next &gt;&gt;</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end sampleA -->
      
      <div class="tabBox" id="sampleB">
        <div class="tabBoxGutter">Page 2</div>
        <p class="tabBoxNav">
          <a href="#sampleA" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample1', true);">&lt;&lt; Previous</a>
          <a href="#whatever" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleC', true);">Next &gt;&gt;</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end sampleB -->
      
      <div class="tabBox" id="whatever">
        <div class="tabBoxGutter">Page 3</div>
        <p class="tabBoxNav">
          <a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample2', true);">&lt;&lt; Previous</a>
          <a href="#sampleD" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleD', true);">Next &gt;&gt;</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end whatever -->
      
      <div class="tabBox" id="sampleD">
        <div class="tabBoxGutter">Page 4</div>
        <p class="tabBoxNav">
          <a href="#whatever" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleC', true);">&lt;&lt; Previous</a>
          <a href="#sampleE" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleE', true);">Next &gt;&gt;</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end sampleD -->
      
      <div class="tabBox" id="sampleE">
        <div class="tabBoxGutter">Page 2</div>
        <p class="tabBoxNav">
          <a href="#sampleD" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleD', true);">&lt;&lt; Previous</a>
          <a href="#sampleF" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleF', true);">Next &gt;&gt;</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end sampleE -->
      
      <div class="tabBox" id="sampleF">
        <div class="tabBoxGutter">Page 3</div>
        <p class="tabBoxNav">
          <a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleE', true);">&lt;&lt; Previous</a>
          <span class="tabSpacer">&nbsp;</span>
        </p>
      </div><!-- end sampleF -->
      
      <p class="tabOptionsOff" id="example_options"></p>
    </div><!-- end example -->
    
    <script type="text/javascript">
    //<![CDATA[
    
    // Declare a new instance of the TAB class
    var Example = new TAB();
    
    // Set IDs needed to create tab structure.
    Example.name = "example";
    Example.tabSpacerID = "example_spacer";
    Example.tabOptionsID = "example_options";
    Example.tabRootID = "example_tabs";
    
    // IDs of the tabs themselves
    Example.tabIDs[0] = "tabsample1";
    Example.tabIDs[1] = "tabsample2";
    Example.tabIDs[2] = "tabsampleC";
    Example.tabIDs[3] = "tabsampleD";
    Example.tabIDs[4] = "tabsampleE";
    Example.tabIDs[5] = "tabsampleF";
    
    // IDs of the tab boxes
    Example.boxIDs[0] = "sampleA";
    Example.boxIDs[1] = "sampleB";
    Example.boxIDs[2] = "whatever";
    Example.boxIDs[3] = "sampleD";
    Example.boxIDs[4] = "sampleE";
    Example.boxIDs[5] = "sampleF";
    
    // Initialize the tabs
    Example.initialize();
    // ]]>
    </script>
    I think the only part that was tripping you up was the boldface code. The TAB function doesn't take any arguments.

  5. #20
    Join Date
    Dec 2004
    Posts
    27
    Odd, I tried it without that with no success yesterday, but it works now... must've been a typo in something but thanks anyways! One more question though... how would i go about making the pink outline here go all the way around... there's a gray section at the middle top from tab #2 to tab #5...

    ..here we go again it's doesn't work on the server ... the url is http://www.luciferianstars.com/misc/...l/dortmall.htm.

    thank you!

  6. #21
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Something's goofy with the line breaks. You'll need to do some source code formatting. My Text editor uses Unix line breaks, and pasting that code into your text editor might not work if it uses Windows line breaks. Which text editor are you using? I highly recommend HTML Kit.

    The reason it's not working on the server is because all the HTML source code is on one line. There are inline javascript comments, like "// my comment", and when that happens, any javascript on that line is commented out. That's why it's not working.

  7. #22
    Join Date
    Dec 2004
    Posts
    27

    Thumbs up

    Interesting, the file in the editor isn't like that. I'm using 1st page 2006...but i use to use the 2000 version without problem so maybe I'll try that, if not I'll check out the html kit one.

    strange
    Last edited by luciangel; 06-13-2007 at 05:04 PM.

  8. #23
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35

    2 different widths

    These tabs are so wonderful. Thank you for sharing this code. I have a question. I want to have one set of tabs on a page set to one width (and didn't have a problem doing that) and another set of tabs on another page with a different width (and didn't have any problem doing that). My problem is that I would like to have the css for both sets of tabs on one css file, but I can't seem to figure out how to do this. I tried adding a 2 to the end of all the divs, etc. but that just seems to be making a mess. Any ideas?

    Thank you!

  9. #24
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Can you post the HTML and CSS you're using? It's usually just a simple matter of using different CSS selectors. Let's say I've got two tab boxes on one page. The DIV tags with the class="tabWrapper" in them both have Ids. One Id is "nav" and the other Id is "options". I could use the following CSS to set the widths for each tab box:

    Code:
    #nav .tabbedNavOn li {
      width: 100px;
    }
    
    #options .tabbedNavOn li {
      width: 200px;
    }
    Now the tab box whose Id is "nav" will have tabs 100 pixels wide, and the tab box whose Id is "options" will have tabs that are 200 pixels wide.

    If this doesn't help out, please post your HTML and CSS.

  10. #25
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    Thanks so much for responding. I tried that, but I am still not having any luck. Here is my html & css for the smaller tabbed box, and the larger tabbed box:
    <code>
    <div class="tabWrapper" id="example">

    <ul class="tabbedNavOff" id="example_tabs">
    ....etc.
    </ul></code>
    <code>
    /*
    * This File: TAB_styles.css
    * Contains all CSS declarations to visually format Accessible Tabs. Contains
    * CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
    * imported via the @import method.
    *
    * Version - Accessible Tabs: 1.0
    * By Greg Burghardt
    * greg_burghardt@yahoo.com
    */

    /* The UL element containing the tabs when JavaScript is enabled. */
    .tabbedNavOn {

    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    /*************** Common styles for both .tabOff and .tabOn *****************/
    .tabbedNavOn a {
    display: block;
    }

    .tabbedNavOn a:link,
    .tabbedNavOn a:visited,
    .tabbedNavOn a:active,
    .tabbedNavOn a:hover,
    .tabbedNavOn a:focus {
    text-decoration: none;
    }

    .tabbedNavOn a span {
    display: block;
    }

    .tabbedNavOn a span span {
    padding: .33em .75em;
    }
    /*************** End common styles for .tabOff and .tabOn ******************/

    /* This class is a tab when it is not active. */
    .tabOff {
    cursor: pointer;
    cursor: hand;
    display: block;
    }

    /* Non active Tab text color when in the visited and non visited states. */
    .tabOff:link,
    .tabOff:visited {
    color: #ccccccc;
    }

    /* Non active tab background color & graphic when in the visited or non
    * visited states. */
    .tabOff:link span,
    .tabOff:visited span {
    background: #eeeeee url no-repeat scroll 0 0;
    }

    /* Non active tab's right background graphic when the tab is in a visited or
    * non visited state. */
    .tabOff:link span span,
    .tabOff:visited span span {
    background: ##eeeeee transparent url no-repeat scroll 100% 0;
    }

    /* Non active tab's text color in the active, focus, an hover states. */
    .tabOff:active,
    .tabOff:focus,
    .tabOff:hover {
    color: #660000;


    }

    /* Non active tab's background color and left background graphic when in the
    * active, focus and hover states. */
    .tabOff:active span,
    .tabOff:focus span,
    .tabOff:hover span {
    background: #000000 url no-repeat scroll 0 -500px;
    }

    /* Non active tab's background graphic when in the active, focus and hover
    * states. */
    .tabOff:active span span,
    .tabOff:focus span span,
    .tabOff:hover span span {
    background: transparent urlno-repeat scroll 100% -500px;
    }

    /* This class is a tab that is switched "on" */
    .tabOn {
    cursor: default;
    display: block;
    }

    /* Active tab text color when in the visited and non visited states. */
    .tabOn:link,
    .tabOn:visited,
    .tabOn:active,
    .tabOn:hover {
    color:#660000;
    font-weight:bolder;
    background-color:#eeeeee;
    }

    /* Active tab background color & graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span,
    .tabOn:visited span,
    .tabOn:active span,
    .tabOn:hover span {
    background: #eeeeee url no-repeat scroll 0 -1000px;

    }

    /* Active tab's right background graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span span,
    .tabOn:visited span span,
    .tabOn:active span span,
    .tabOn:hover span span {
    background: transparent url no-repeat scroll 100% -1000px;
    }

    /* The active tab when it has the system focus. */
    .tabOn:focus {
    color: #660000;
    background color: #eeeeee;
    }

    /* The active tab's BG color & graphic when it has the system focus. */
    .tabOn:focus span {
    background: #660000(images/Tab_Left.gif) no-repeat scroll 0 -500px;
    }

    /* The active Tab's right BG graphic when it has the system focus. */
    .tabOn:focus span span {
    background: transparent url(images/Tab_Right.gif) no-repeat scroll 100% -500px;
    }

    .tabbedNavOn li {
    float: left;
    margin-right: 1px;
    }

    /* Tab boxes when JavaScript is disabled. */
    .tabBox {
    font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
    font-size: 1.25em;
    }

    .tabBox .tabBoxNav {
    display: none;
    }

    /* Hide the tab boxes when they are turned off. */
    .tabBoxOff {
    display: none;
    }

    /* The tab box is switched "on" */
    .tabBoxOn {
    height: 210px;
    background-color: #eeeeee;
    margin-top: -1px;
    zoom: 1;
    }

    /* Padding and borders around the tab content. */
    .tabBoxOn .tabBoxGutter {
    border: 1px solid #eeeeee;
    padding: 0 12px;
    }

    /* The tab's bottom text links for Next and Previous */
    .tabBoxOn .tabBoxNav {
    background-color: #eeeeee;
    display: block;
    margin: 0;
    padding: .33em 5px 0 5px;
    }

    /* The tab's bottom text links when the link is visited and non visited. */
    .tabBoxOn .tabBoxNav a:link,
    .tabBoxOn .tabBoxNav a:visited {
    color: #000000;
    text-decoration: none;
    }

    /* The tab's bottom text links when the link is active, hovered on, or has
    * the system focus. */
    .tabBoxOn .tabBoxNav a:active,
    .tabBoxOn .tabBoxNav a:hover,
    .tabBoxOn .tabBoxNav a:focus {
    color: #660000;
    text-decoration: underline;
    }

    /* Gap below the tab's bottom links, and the bottom of the tab box. */
    .tabBoxOn .tabBoxNav .tabSpacer {
    height: .33em;
    }

    .tabBoxOn .tabBoxNavLeft {
    float: left;
    padding-right: 5px;
    }

    .tabBoxOn .tabBoxNavRight {
    float: right;
    padding-left: 5px;
    }

    /* When JavaScript is disabled, hide the link to jump back to the tabs. */
    .tabOptionsOff {
    display: none;
    }

    /* The link to jump back to the tabs when JavaScript is enabled. */
    .tabOptionsOn {
    margin: 0;
    }

    .tabOptionsOn a {
    margin: -1.5em 0 0 0;
    position: absolute;
    text-align: center;
    width: 100%;
    }

    .tabOptionsOn a:link,
    .tabOptionsOn a:visited {
    color: #fff;
    z-index: -1;
    }

    .tabOptionsOn a:active,
    .tabOptionsOn a:focus,
    .tabOptionsOn a:hover {
    color: #eeeeee;
    z-index: 1;
    }

    /* Spacer DIV under the tabs when JavaScript is disabled. */
    .tabSpacerOff {
    display: none;
    }

    /* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
    * fixes an IE-Win bug that sizes the height too high in certain cases. */
    .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 450px; /* Width required by Safari and IE5-Mac */

    }


    /* The DIV tag that encapsulates one entire tab structure. */
    .tabWrapper {
    position: relative;
    width:450px;

    margin-left:-20px;
    z-index: 1;
    }
    </code>










    And this is the css I am linking to for my larger box. It is exactly the same, except I have adjusted the width. I would just really like to combine them both onto one css file.

    <code>

    /* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
    * fixes an IE-Win bug that sizes the height too high in certain cases. */
    .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 900px; /* Width required by Safari and IE5-Mac */
    }

    /* The DIV tag that encapsulates one entire tab structure. */
    .tabWrapper {
    position: relative;
    width: 900px;
    z-index: 1;
    }</code>

    <code>
    <div class="tabWrapper" id="example">

    <ul class="tabbedNavOff" id="example_tabs">
    ....etc/</li>
    </ul></code>

    Thanks!

  11. #26
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Each tabWrapper must have a unique Id. All Ids in your HTML document must be unique. You can't have two HTML tags with the same Id.

    Give each tabWrapper it's own Id. There are several other Ids in tags inside each tabWrapper that also must be unique. The tabWrapper is used as a prefix to the other Ids inside each tabWrapper.

    It'd be easiest if you posted the full HTML and CSS. Every bit, from the opening HTML tag to the closing HTML tag, and also every bit of CSS. To make it easier to read, can you put your HTML in BB Code tags:

    {html}
    Your HTML code
    {/html}

    {code}
    Your CSS code
    {/code}

    To get the BB Code tags above to work when writing your post, replace "}" with "]" and replace "{" with "[" when writing the BB Code tags.

  12. #27
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    I am so sorry--I keep trying to post it all but I get a message that it's too long:

    Here is the shorter width:
    http://www.twu.edu/library/
    http://www.twu.edu/library/css/tab_styles3.css

    Here is the larger width:
    http://www.twu.edu/library/ua/ua_about.htm
    http://www.twu.edu/library/css/tab_styles.css

    Thanks again!

  13. #28
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    On http://www.twu.edu/library/:
    Change this from
    Code:
    <div class="tabWrapper" id="example">
    To:
    Code:
    <div class="tabWrapper" id="libraryTabs">
    Now any place in that tab box you see id="example_ needs to be changed to id="libraryTabs_. The Ids of the other things in the tab box is dependant on the Id of the main tabWrapper.

    Then add this to tab_styles.css:
    Code:
    #libraryTabs .tabbedNavOn li {
      width: 100px; /* Or whatever width you want */
    }
    On http://www.twu.edu/library/ua/ua_about.htm:

    Change this from:
    Code:
    <div class="tabWrapper" id="example">
    To:
    Code:
    <div class="tabWrapper" id="aboutTabs">
    Then any place in this tab box you see id="example_ needs to be changed to id="aboutTabs_. Then add this to tab_styles.css:
    Code:
    #aboutTabs .tabbedNavOn li {
      width: 200px; /* Or whatever width you want */
    }

  14. #29
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    Thank you so much for all of the help. It is greatly appreciated. When I make that change, it is making each <li></li> at the top 400px in width so they are now on top of each other, instead of side by side. I made all the html changes, and I made the change in my css. I think I am missing something.....

    {css}
    /*---end sub guide info}------- */
    /*this is for the tab box on the home page */
    /*
    * This File: TAB_styles.css
    * Contains all CSS declarations to visually format Accessible Tabs. Contains
    * CSS 1.0 and 2.0 styles and is hidden from 4.0 and older browsers by being
    * imported via the @import method.
    *
    * Version - Accessible Tabs: 1.0
    * By Greg Burghardt
    * greg_burghardt@yahoo.com
    */


    /* The UL element containing the tabs when JavaScript is enabled. */

    #libraryTabs .tabbedNavOn li {
    width: 400px;
    float: left;
    margin-right: 1px;
    }



    .tabbedNavOn {

    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    /*************** Common styles for both .tabOff and .tabOn *****************/
    .tabbedNavOn a {
    display: block;
    }

    .tabbedNavOn a:link,
    .tabbedNavOn a:visited,
    .tabbedNavOn a:active,
    .tabbedNavOn a:hover,
    .tabbedNavOn a:focus {
    text-decoration: none;
    }

    .tabbedNavOn a span {
    display: block;
    }

    .tabbedNavOn a span span {
    padding: .33em .75em;
    }
    /*************** End common styles for .tabOff and .tabOn ******************/

    /* This class is a tab when it is not active. */
    .tabOff {
    cursor: pointer;
    cursor: hand;
    display: block;
    }

    /* Non active Tab text color when in the visited and non visited states. */
    .tabOff:link,
    .tabOff:visited {
    color: #ccccccc;
    }

    /* Non active tab background color & graphic when in the visited or non
    * visited states. */
    .tabOff:link span,
    .tabOff:visited span {
    background: #eeeeee url no-repeat scroll 0 0;
    }

    /* Non active tab's right background graphic when the tab is in a visited or
    * non visited state. */
    .tabOff:link span span,
    .tabOff:visited span span {
    background: ##eeeeee transparent url no-repeat scroll 100% 0;
    }

    /* Non active tab's text color in the active, focus, an hover states. */
    .tabOff:active,
    .tabOff:focus,
    .tabOff:hover {
    color: #660000;


    }

    /* Non active tab's background color and left background graphic when in the
    * active, focus and hover states. */
    .tabOff:active span,
    .tabOff:focus span,
    .tabOff:hover span {
    background: #000000 url no-repeat scroll 0 -500px;
    }

    /* Non active tab's background graphic when in the active, focus and hover
    * states. */
    .tabOff:active span span,
    .tabOff:focus span span,
    .tabOff:hover span span {
    background: transparent urlno-repeat scroll 100% -500px;
    }

    /* This class is a tab that is switched "on" */
    .tabOn {
    cursor: default;
    display: block;
    }

    /* Active tab text color when in the visited and non visited states. */
    .tabOn:link,
    .tabOn:visited,
    .tabOn:active,
    .tabOn:hover {
    color:#660000;
    font-weight:bolder;
    background-color:#eeeeee;
    }

    /* Active tab background color & graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span,
    .tabOn:visited span,
    .tabOn:active span,
    .tabOn:hover span {
    background: #eeeeee url no-repeat scroll 0 -1000px;

    }

    /* Active tab's right background graphic when in the visited, non visited,
    * active, and hover states. */
    .tabOn:link span span,
    .tabOn:visited span span,
    .tabOn:active span span,
    .tabOn:hover span span {
    background: transparent url no-repeat scroll 100% -1000px;
    }

    /* The active tab when it has the system focus. */
    .tabOn:focus {
    color: #660000;
    background color: #eeeeee;
    }

    /* The active tab's BG color & graphic when it has the system focus. */
    .tabOn:focus span {
    background: #660000(images/Tab_Left.gif) no-repeat scroll 0 -500px;
    }

    /* The active Tab's right BG graphic when it has the system focus. */
    .tabOn:focus span span {
    background: transparent url(images/Tab_Right.gif) no-repeat scroll 100% -500px;
    }


    /* Tab boxes when JavaScript is disabled. */
    .tabBox {
    font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
    font-size: 1.25em;
    }

    .tabBox .tabBoxNav {
    display: none;
    }

    /* Hide the tab boxes when they are turned off. */
    .tabBoxOff {
    display: none;
    }

    /* The tab box is switched "on" */
    .tabBoxOn {
    height: 210px;
    background-color: #eeeeee;
    margin-top: -1px;
    zoom: 1;
    }

    /* Padding and borders around the tab content. */
    .tabBoxOn .tabBoxGutter {
    border: 1px solid #eeeeee;
    padding: 0 12px;
    }

    /* The tab's bottom text links for Next and Previous */
    .tabBoxOn .tabBoxNav {
    background-color: #eeeeee;
    display: block;
    margin: 0;
    padding: .33em 5px 0 5px;
    }

    /* The tab's bottom text links when the link is visited and non visited. */
    .tabBoxOn .tabBoxNav a:link,
    .tabBoxOn .tabBoxNav a:visited {
    color: #000000;
    text-decoration: none;
    }

    /* The tab's bottom text links when the link is active, hovered on, or has
    * the system focus. */
    .tabBoxOn .tabBoxNav a:active,
    .tabBoxOn .tabBoxNav a:hover,
    .tabBoxOn .tabBoxNav a:focus {
    color: #660000;
    text-decoration: underline;
    }

    /* Gap below the tab's bottom links, and the bottom of the tab box. */
    .tabBoxOn .tabBoxNav .tabSpacer {
    height: .33em;
    }

    .tabBoxOn .tabBoxNavLeft {
    float: left;
    padding-right: 5px;
    }

    .tabBoxOn .tabBoxNavRight {
    float: right;
    padding-left: 5px;
    }

    /* When JavaScript is disabled, hide the link to jump back to the tabs. */
    .tabOptionsOff {
    display: none;
    }

    /* The link to jump back to the tabs when JavaScript is enabled. */
    .tabOptionsOn {
    margin: 0;
    }

    .tabOptionsOn a {
    margin: -1.5em 0 0 0;
    position: absolute;
    text-align: center;
    width: 100%;
    }

    .tabOptionsOn a:link,
    .tabOptionsOn a:visited {
    color: #fff;
    z-index: -1;
    }

    .tabOptionsOn a:active,
    .tabOptionsOn a:focus,
    .tabOptionsOn a:hover {
    color: #eeeeee;
    z-index: 1;
    }

    /* Spacer DIV under the tabs when JavaScript is disabled. */
    .tabSpacerOff {
    display: none;
    }

    /* Spacer DIV under the tabs when JavaScript is enabled. The 1px font size
    * fixes an IE-Win bug that sizes the height too high in certain cases. */
    .tabSpacerOn {
    background-color: #eeeeee;
    clear: both;
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    width: 400px; /* Width required by Safari and IE5-Mac */

    }


    /* The DIV tag that encapsulates one entire tab structure. */
    .tabWrapper {
    position: relative;
    width:400px;
    margin-left:10px;
    z-index: 1;
    }

    /*end tab box on home page*/


    {/css}

  15. #30
    Join Date
    Jul 2007
    Location
    Texas
    Posts
    35
    It might be easier if I show it you like this:
    http://myweb.twu.edu/~bklug/library/...le/tab_tab.htm
    http://myweb.twu.edu/~bklug/library/...e/home_tab.htm

    the tab names are the width of the boxes, and the home_tab box is the width of the tab_tab box. Here is the css:

    http://myweb.twu.edu/~bklug/library/css/all2_tab.css contains the css for both
    css for the home tab box starts on line 405
    css for the tab_tab box starts on line 684

    Thanks again for any help you can provide. I am really stumped.

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