Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: css tab slides

  1. #1
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Question css tab slides

    Hi guys,

    This one really has me confused. It's probably something simple that I've missed by I sure can't find it...

    I've created a fiddle to show you what I'm talking about http://jsfiddle.net/j9Ftx/

    You see originally this had 4 sections, these scrolled through fine with all of the links working correctly. The client has since added 1 more section, now for some reason when I add a further radio link, the whole control of the slide show goes to pot. You see what I mean http://jsfiddle.net/j9Ftx/

    All I've added is an extra link and content area. Does anyone know what I'm doing wrong? If you erase the below from the jsfiddle you'll see that it works correctly, but with the label for- tab 5, it gives up. I'm at a loss... Any help greatly appreciated!

    <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
    <label for="tab-5" class="tab-label-5">POS</label>
    <div class="content-5">
    <h2>Fullfilment</h2>
    <p>Whatever your project involves Expressive Print are experienced in delivering it for you. From daily pick and pack requirements to contract packing and bulk despatches we have the ideal space to work in - clean, modern and secure premises with packing teams who are all fully CRB checked, robust stock control systems, comprehensive insurance cover and expertise.
    This ensures the right things are packed in the right order and sent the right people – simple but critical. Selecting a fulfilment partner who has strong systems with full accountability and customer service resource is vital to ensure your product’s success.</p>
    </div>

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Take a look at these sections of your code:

    Code:
    .tabs input#tab-2{
    	top: 40px;
    }
    .tabs input#tab-3{
    	top: 80px;
    }
    .tabs input#tab-4{
    	top: 120px;
    }
    
    
    
    
    
    .tabs label:first-of-type {
        z-index: 4;
    }
    .tab-label-2 {
        z-index: 3;
    }
    .tab-label-3 {
        z-index: 2;
    }
    .tab-label-4 {
        z-index: 1;
    }
    
    
    
    
    .tabs input.tab-selector-1:checked ~ .content .content-1,
    .tabs input.tab-selector-2:checked ~ .content .content-2,
    .tabs input.tab-selector-3:checked ~ .content .content-3,
    .tabs input.tab-selector-4:checked ~ .content .content-4 {
        -webkit-transform: translateY(0px);
    	-moz-transform: translateY(0px);
    	-o-transform: translateY(0px);
    	-ms-transform: translateY(0px);
    	transform: translateY(0px);
        z-index: 100;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: all ease-out 0.3s 0.3s;
        -moz-transition: all ease-out 0.3s 0.3s;
        -o-transition: all ease-out 0.3s 0.3s;
        -ms-transition: all ease-out 0.3s 0.3s;
        transition: all ease-out 0.3s 0.3s;
    }
    You don't have any CSS for your fifth tab. Change it to this:

    Code:
    .tabs input#tab-2{
    	top: 40px;
    }
    .tabs input#tab-3{
    	top: 80px;
    }
    .tabs input#tab-4{
    	top: 120px;
    }
    .tabs input#tab-5{ /* ADDED THIS */
    	top: 120px;
    }
    
    .tabs label:first-of-type {
        z-index: 4;
    }
    
    .tab-label-2 {
        z-index: 3;
    }
    
    .tab-label-3 {
        z-index: 2;
    }
    .tab-label-4 {
        z-index: 1;
    }
    .tab-label-5 { /* ADDED THIS */
        z-index: 0;
    }
    
    .tabs input.tab-selector-1:checked ~ .content .content-1,
    .tabs input.tab-selector-2:checked ~ .content .content-2,
    .tabs input.tab-selector-3:checked ~ .content .content-3,
    .tabs input.tab-selector-4:checked ~ .content .content-4,
    .tabs input.tab-selector-5:checked ~ .content .content-5 { /* ADDED THIS LINE */
        -webkit-transform: translateY(0px);
    	-moz-transform: translateY(0px);
    	-o-transform: translateY(0px);
    	-ms-transform: translateY(0px);
    	transform: translateY(0px);
        z-index: 100;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: all ease-out 0.3s 0.3s;
        -moz-transition: all ease-out 0.3s 0.3s;
        -o-transition: all ease-out 0.3s 0.3s;
        -ms-transition: all ease-out 0.3s 0.3s;
        transition: all ease-out 0.3s 0.3s;
    }


  •  

    Tags for this Thread

    Posting Permissions

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