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
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with sliding div panels

    Hi,

    I have a page with div panels that should slide horizontally when triggered by a click. When clicking on the number the panel on the right should slide left which it does but the next panel doesn't appear.

    http://www.leegraphics.com/v4/test_body.php

    I'm thinking a css issue but not 100% sure. Using this script:
    http://www.tombran.co.uk/projects/carouslide/index.html

    Would someone be able to tell me how to get the next div to appear? Here's the CSS:

    /* required styles for carouSlide */
    .slider-wrapper {
    position:relative;
    overflow:hidden;
    width:275px;
    height:600px;
    }
    .slider-holder {
    overflow:hidden;
    width:275px;
    display:block;
    height:600px;
    padding:0;
    margin:0;
    }
    .slider-holder li {
    margin:0;
    display:block;
    width:275px;
    height:600px;
    list-style:none;
    color:#000;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    padding: 15px;
    }
    .slider-holder ul ul {
    height:600px;
    padding-left:0px;
    float: right;
    }
    .slider-holder li li {
    padding:0;
    margin:0;
    display:list-item;
    width:auto;
    height:auto;
    list-style:disc;
    }
    .s-active {
    position:relative;
    top:0;
    left:0;
    }
    #a1 {
    float: right;
    }

    #a2 {
    float: right;
    }
    #a3 {
    float: right;
    }
    #a4 {
    float: right;
    }
    #a5 {
    float: right;
    }
    .slider-nav .active {
    font-weight:bold;
    }

    .s1 {
    position:relative;
    width:900px;
    height:600px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    }
    .s1 .slider-wrapper {
    width:275px;
    height:600px;
    float: right;
    position: relative;
    }
    .s1 .slider-holder {
    width:275px;
    display:block;
    height:600px;
    float: right;
    }
    .s1 .slider-holder li.slide {
    width:240px;
    height:600px;
    padding-right:10px;
    }
    .s1 .slider-nav {
    position:absolute;
    right:275px;
    top:0px;
    width:625px;
    padding:0;
    margin:0;
    height: 500px;
    z-index: 5;
    }
    .s1 .slider-nav li {
    list-style:none;
    height:130px;
    float: left;
    }

    .s1 .slider-nav li a {
    display:block;
    width:155px;
    float: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.75em;
    color: #066491;
    text-align: center;
    vertical-align: middle;
    height: 130px;
    margin-top: 10px;
    line-height: 130px;
    }



    Thanks in advance for your help!

    Al

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Try to set the float property of the #a1-5 elements to the value of "left" instead of "right", and drop the float property you gave to the .slider-holder element

    Code:
    #a1,#a2,#a3,#a4,#a5 {
     float: left; /* not right */
     }
    .s1 .slider-holder {
     width:275px;
     display:block;
     height:600px;
     /* float: right; <-- drop this */
     }
    I am still learning English


  •  

    Posting Permissions

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