SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross browser compatible CSS Tabbed interface needed

    Like the title says, I need a Cross browser compatible CSS Tabbed interface, anyone know if such a thing exists?

    Failing that, there are a ton of JS scripts available, anyone got one they'd recommend?

    Cheers, Rich
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  2. #2
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [OFF TOPIC]

    wow, I thought I'd google it one more time make sure I hadn't missed anything and this thread is number one for the phrase "Cross browser compatible CSS Tabbed interface" which means they crawled and indexed it in less than 25 minutes, pretty impressive.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry i don't really have any special recommendations as I usually build them from scratch and then add some jquery if they need to be dynamic.

    e.g.Simplest example.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Tabs</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        list-style:none
    }
    ul.section {
        width:50px;
        margin:0 0 0;
        padding:0 0 0px;
        float:left;
        clear:both;
        position:relative;
    }
    ul.section li {
        width:50px;
        height:25px;
        padding:0;
        float:left;
        clear:left;
    }
    ul.section a {
        float:left;
        clear:left;
        width:40px;
        height:25px;
        line-height:25px;
        padding:0 0 0 8px;
        color:#019aff;
        font-size:13px;
        font-weight:bold;
        overflow:hidden;
        white-space:nowrap;
        margin:-1px 0 0 0;
        position:relative;
        border:1px solid #2d6ab4;
        border-left:none;
        border-bottom:none;
    }
    ul.section a:visited {
        color:#019aff;
    }
    ul.section a:hover, ul.section li.active a {
        background:url(images/y-on.gif) no-repeat 100&#37; 0;
        color:#9be81c;
        text-decoration:none;
        border-right:1px solid #fff;
        outline:0;
    }
    ul.section a.ontop:hover, ul.section li.active a.ontop {
        border-right:1px solid #fff;
    }
    /* tab panel content */
    .tabwrap {
        width:215px;
        border:1px solid #2d6ab4;
        float:left;
    }
    .tab_container {
        float: left;
        width: 150px;
        margin:0 0 0 9px;
        display:inline;
    }
    ul.tab-content {
        float:left;
        width:150px;
        margin:0;
        padding:5px 0 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        
        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
    });
    
    
    </script>
    </head>
    <body>
    <div class="tabwrap">
        <ul class="section tabs">
            <li><a class="ontop" href="#tab1">Tab1</a></li>
            <li><a href="#tab2">Tab2</a></li>
            <li><a href="#tab3">Tab3</a></li>
            <li><a href="#tab4">Tab4</a></li>
            <li><a href="#tab5">Tab5</a></li>
            <li><a href="#tab6">Tab6</a></li>
            <li><a href="#tab7">Tab7</a></li>
            <li><a href="#tab8">Tab8</a></li>
            <li><a href="#tab9">Tab9</a></li>
            <li><a href="#tab10">Tab10</a></li>
        </ul>
        <div class="tab_container clearfix">
            <div id="tab1" class="tab_content"> Test content here1 </div>
            <!-- end tab1 -->
            <div id="tab2" class="tab_content"> Test content here2 </div>
            <!-- end tab2 -->
            <div id="tab3" class="tab_content"> Test content here3 </div>
            <!-- end tab3 -->
            <div id="tab4" class="tab_content"> Test content here4 </div>
            <!-- end tab4 -->
            <div id="tab5" class="tab_content"> Test content here5 </div>
            <!-- end tab5 -->
            <div id="tab6" class="tab_content"> Test content here6 </div>
            <!-- end tab6 -->
            <div id="tab7" class="tab_content"> Test content here7 </div>
            <!-- end tab7 -->
            <div id="tab8" class="tab_content"> Test content here8 </div>
            <!-- end tab8 -->
            <div id="tab9" class="tab_content"> Test content here9 </div>
            <!-- end tab9 -->
            <div id="tab10" class="tab_content"> Test content here10 </div>
            <!-- end tab10 -->
        </div>
    </div>
    <!-- end tab-container -->
    </body>
    </html>
    However as you say there are a ton of them out there and it's a matter of finding one that suits your purpose.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brill, thanks guys. Eric I've bookmarked your page, thanks.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Athens, Greece
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi, this question is addressed to Paul:

    Like Rich, who started this thread, I need a CSS tabbed interface for my site at http://athenscollectibles.info and have been searching for over a week. I found many, but none worked with my site platform (Zen Cart) or with all browsers...

    ...until I tried Paul's example posted on 16 June. I have inserted it into a test product here http://athenscollectibles.info/index...&products_id=1 and it does exactly what I want: it has the first tab contents displayed on load, changes smoothly and quickly the contents when other tabs are clicked and, most important, it is simple and I feel confident that I can customise it with my (non-expert) knowledge of CSS and HTML.

    My only issue is that the tabs are one below the other rather than in a row. Ideally, I would prefer them to be in one row with the tab contents displaying below them like in this example from my other site http://www.athenscollectibles.com/supportedstores.html, which however does not work with Zen Cart.

    I am very persistent and patient and tried hard to modify Paul's example before applying for help here but I failed. As I said, I have some self-taught knowledge of CSS and HTML but this has proved to be beyond my abilities

    All I need is three tabs for "product description", "additional information" and "more pictures" with their contents displayed on clicking the tab.

    In an extra effort to probably find another solution, I visited your site and found a lot of valuable information which will help me in improving my site. Being there, I tried to use the pure CSS tab menus http://www.pmob.co.uk/temp/tabmenu_mine2.htm and http://www.pmob.co.uk/temp/tabexample4.htm as they are both simple and neat. After playing around with the first of them, I changed the HTML to read:

    Code:
    <h1>Example Simple Tab Menu</h1>
    
    <div id="outer"> 
    
      <div id="tab"><a class="current" href="#">Product description</a> <a href="#">Other information</a> 
        <a href="#">More pictures</a></div>
    
      <div id="content"> 
        <p>Contents of "Product Description" tab </p>
      </div>
    
    </div>
    What beats me is how do I define the contents for the second and third tab. The <div id="content"> does not have an identification to link it to the first tab and, when I click the second or third tab nothing changes and the first tab remains selected.

    These questions might seem stupid and it could all be that I'm missing something very simple and obvious.

    Any help to unblock my (63 year old) mind will be really appreciated. As this is an old thread, it may not get attention. I'm leaving on holidays for a few days tomorrow and will start a new thread on my return if no reply has been posted. I hope that I will get an answer for which I thank you in advance.

    With kind regards

    George from Athens, Greece

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try something like this:

    Code:
    ul.section {
        width:300px;
        margin:0;
        padding:0;
        clear:both;
        position:relative;
    }
    ul.section li {
        float:left;
        height:25px;
        padding:0;
        float:left;
            margin:0 15px 0 0
    }
    ul.section a {
        float:left;
        height:25px;
        line-height:25px;
        padding:0 8px;
        color:#019aff;
        font-size:13px;
        font-weight:bold;
        overflow:hidden;
        white-space:nowrap;
        margin:-1px 0 0 0;
        position:relative;
        border:1px solid #2d6ab4;    
    }
    ul.section a:visited {
        color:#019aff;
    }
    ul.section a:hover, ul.section li.active a {
        background:url(images/y-on.gif) no-repeat 100&#37; 0;
        color:#9be81c;
        text-decoration:none;
        outline:0;
            border-bottom:1px solid #fff;
    }
    ul.section a.ontop:hover, ul.section li.active a.ontop {
            border-bottom:1px solid #fff;
    }
    /* tab panel content */
    .tabwrap {
       width:400px;
       clear:both;
    }
    .tab_container {
        width:380px;
        padding:10px;
        border:1px solid #2d6ab4;
       clear:both;
    }
    .tab-content {
         width:100%;
         clear:both;
    }
    You should be able to tweak that to fit.

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Athens, Greece
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you Paul. I cannot describe how happy I am as this seems to do exactly what I wanted to do.

    Off to some monitor-free days near the sea now and then back to full customisation.

    Cheers and endless thanks again.

    George

  9. #9
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Athens, Greece
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi Paul,

    I have now worked on your tabbed interface, which you can see in action at http://athenscollectibles.info/index...&products_id=1 complete with small images before the text of each tab.

    The full CSS code as amended by me is:

    Code:
    /****************************************************************/
    /***  Original code published by Paul O'Brien (pmob.co.uk) at ***/
    /***  http://www.sitepoint.com/forums/showthread.php?t=683218 ***/
    /****************************************************************/
    /***  Slightly modified by George Peroulakis for use at       ***/
    /***  http://athenscollectibles.info                          ***/
    /****************************************************************/
    
    ul {
        margin:0;
        padding:0;
        list-style:none
    }
    ul.section {
        width:500px;
        margin:0;
        padding:0;
        clear:both;
        position:relative;
    }
    ul.section li {
        float:left;
        height:25px;
        padding:0;
        float:left;
        margin:0 5px 0 0
    }
    ul.section a {
        float:left;
        height:25px;
        line-height:25px;
        padding:0 8px;
        color:#019aff;
        font-size:13px;
        font-weight:bold;
        overflow:hidden;
        white-space:nowrap;
        margin:-1px 0 0 0;
        position:relative;
        border:1px solid #2d6ab4;    
    }
    ul.section a:visited {
        color:#019aff;
    }
    ul.section a:hover, ul.section li.active a {
        background:url(images/y-on.gif) no-repeat 100% 0;
        color:#0f6;
        text-decoration:none;
        outline:0;
        border-bottom:1px solid #fff;
    }
    ul.section a.ontop:hover, ul.section li.active a.ontop {
            border-bottom:1px solid #fff;
    }
    /* tab panel content */
    .tabwrap {
       width:400px;
       clear:both;
    }
    .tab_container {
        width:500px;
        padding:10px;
        border:1px solid #2d6ab4;
       clear:both;
    }
    .tab-content {
         width:100%;
    
         clear:both;
    }
    .tab_content {font-size:11px;}
    Line 46 of the above code makes reference to a background image, which I looked for in your site but couldn't find. It's obviously irrelevant to the functionality of the tabbed interface but I guess that it's a nice addition.

    Is it possible to attach this image to a reply to this post or give me its URL please? Alternatively, you might provide some information on its contents and dimensions just to let me experiment with it or create something similar.

    Thank you again for all your assistance. Your site as well as this forum have vast information on CSS. I only wish that the day had more hours!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you managed to get it working

    I'm afraid I don't have the image as the code was something I knocked up for another question on the forum and the original OP was using images for the highlighted tab.

    I believe it was just a tab with round corners on the top which you could make if you match the size to your tabs etc.

    However it may be enough just add some border radius for good browsers instead and let IE have square corners (IE9 will be supporting border radius and hopefully look better than beta ie9 does ).

    e.g.

    Code:
    ul.section a {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

  11. #11
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Athens, Greece
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once more Paul. I already implemented the round corners thanks to your additional code and it now looks a lot better.

    Have a nice evening and here's my award!


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
  •