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:
and here is a live link to what i have so far:Code: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; }
http://tiffanyenriquez.com/uploads/bamboo/



Reply With Quote

Bookmarks