Results 1 to 3 of 3

Thread: help with css slider

  1. #1
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default help with css slider

    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:
    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;
    }
    and here is a live link to what i have so far:
    http://tiffanyenriquez.com/uploads/bamboo/
    Last edited by mynaffitosis; 06-27-2010 at 08:22 PM. Reason: more details

  2. #2
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by mynaffitosis; 06-27-2010 at 08:52 PM. Reason: i was wrong

  3. #3
    Join Date
    May 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default web page

    I'm getting a 404 error when I click the link for your example page. Could you check it?

Bookmarks

Posting Permissions

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