Log in

View Full Version : help with css slider



mynaffitosis
06-27-2010, 08:18 PM
hello!

i'm having trouble trying to edit this css slider code to do what i want to do. i'm using a css slider code and i'm trying to make the content of the slider stretch through the whole window. the problem i'm running across is having a width for the panels that will stretch across the whole browser-- if i change the width to 100% the slider won't work anymore.

basically, i want the div class .panels to have a width of 100%. these panels should scale to the size of the browser window, the the background image of that panel would scale as well. would this be possible in a slider?

help?

thanks!!

this is my css:


html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}

#slider {
min-width: 1024px;
min-height: 100%;
height: 100%;
margin: 0 auto;
}

/*slider content*/
.scroll {
min-height: 100%;
overflow: auto;
position: relative; /* fix for IE to respect overflow */
clear: left;
}

.scrollContainer div.panel {
padding: 0px;
width: 1100px;
height: 100%;
padding-top: 50px;
padding-left: 40px;
min-width: 1024px; /* change to 560px if not using JS to remove rh.scroll */
border: 1px solid #093;
}


.scrollButtons {
position: fixed;
top: 0px;
cursor: pointer;
}

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}

.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
z-index: -1;
}

#slider .navigation {
position: absolute;
top: 0px;
z-index: 10;
list-style-type: none;
display: inline;
}

#slider .navigation li {
display: inline;
}



and here is a live link to what i have so far:
http://tiffanyenriquez.com/uploads/bamboo/

mynaffitosis
06-27-2010, 08:49 PM
i just realized if i made the background one big div instead of separate divs this would probably work out better... but then it wouldn't scale... ah i don't know.

rsollman
07-06-2010, 02:16 PM
I'm getting a 404 error when I click the link for your example page. Could you check it?