...

View Full Version : Problem with sliding div panels



alphadeck
11-16-2011, 07:03 PM
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

Amphiluke
11-16-2011, 07:26 PM
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



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum