SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slideshow troubles

    My slideshow is covering up part of the top menu and I need to move it down on the page some, but it seems like it stays where it is no matter what I do. Not sure why its doing this, I must be missing something.

    Here is the css code for the slideshow

    Code:
    #slideshow{
    	height:400px;
    	margin:-150px auto 0;
    	position:relative;
    	width:800px;	
    }
    
    #slideshow ul{
    	height:400px;
    	left:55px;
    	list-style:none outside none;
    	overflow:hidden;
    	position:absolute;
    	top:10px;
    	width:850px;
    }
    
    #slideshow li{
    	position:absolute;
    	display:none;
    	z-index:10;
    }
    
    #slideshow li:first-child{
    	display:block;
    	z-index:1000;
    }
    
    #slideshow .slideActive{
    	z-index:1000;
    }
    
    #slideshow canvas{
    	display:none;
    	position:absolute;
    	z-index:100;
    }
    
    #slideshow .arrow{
    	width:24px;
    	position: absolute; 
    	background:url('../images/arrows.html') no-repeat;
    	top:50%;
    	margin-top:-30px;
    	cursor:pointer;
    	z-index:5000;
    }
    
    #slideshow .previous{ background-position:left top;left:0;}
    #slideshow .previous:hover{ background-position:left bottom;}
    
    #slideshow .next{ background-position:right top;right:0;}
    #slideshow .next:hover{ background-position:right bottom;}
    
    #footer{
    	height:100px;
    	margin:10px auto 0;
            position:relative;
    	width:900px;	
    	display: inline-block;
    }
    
    .function preloader() {
    	if (document.getElementById) {
    		document.getElementById("preload-02").style.background = "url(../images/a2.png) no-repeat -9999px -9999px";
    		document.getElementById("preload-03").style.background = "url(../images/g2.png) no-repeat -9999px -9999px";
            	document.getElementById("preload-01").style.background = "url(../images/s2.png) no-repeat -9999px -9999px";
    		document.getElementById("preload-02").style.background = "url(../images/c2.png) no-repeat -9999px -9999px";
    	}
    }
    
    .function addLoadEvent(func) {
    	var oldonload = window.onload;
    	if (typeof window.onload != 'function') {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			if (oldonload) {
    				oldonload();
    			}
    			func();
    		}
    	}
    }
    addLoadEvent(preloader)
    
    #container{
    	width:800px;
    	height:500px;
    	padding:10px;
    	margin:0 auto;
    }
    
    
    /*
    	Slideshow
    */
    
    #slides {
    	width:800px;
    	margin: 0 auto;
    	position: relative;
    }
    
    /*
    	Slides container
    	Important:
    	Set the width of your slides container
    	Set to display none, prevents content flash
    */
    
    .slides_container {
    	width:800px;
    	overflow:hidden;
    	position:relative;
    	display:none;
    }
    
    /*
    	Each slide
    	Important:
    	Set the width of your slides
    	If height not specified height will be set by the slide content
    	Set to display block
    */
    
    .slides_container a {
    	width:800px;
    	height:500px;
    	display:block;
    }
    
    .slides_container a img {
    	display:block;
    }
    
    /*
    	Next/prev buttons
    */
    
    #slides .next,#slides .prev {
    	position:absolute;
    	top:250px;
    	left:-24px;
    	width:24px;
    	height:43px;
    	display:block;
    	z-index:200;
    }
    
    #slides .next {
    	left:800px;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    In situations like this, a live link is really needed.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://superfunproductions.com/
    You can see the slideshow is covering a bit of the yellow up top.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The reason your top pargin on the container didn't work is because you forgot to ad "px".

    Code:
    .container {
    width: 1100px;
    padding-top: 25px;
    margin: 30px auto;
    position: relative;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh derp, its always something small like that. Thanks! The menu buttons seem to be moving along with the slideshow like they are connected somehow/

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The top of the slides touch the bottom of the unordered list (plus the margins that you just added).

    You can move the slides only down by adding some margin beneath the list, instead:
    Code:
    #header > ul {
        margin-bottom: 80px;    /* pick a value */
    }
    or maybe by adding padding-bottom:80px to .container instead of the margins and padding-top.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I see what you are saying. Thanks for the help!


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
  •