Slideshow troubles

HTML & CSS
1

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

#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

In situations like this, a live link is really needed.

3

http://superfunproductions.com/
You can see the slideshow is covering a bit of the yellow up top.

4

The reason your top pargin on the container didn’t work is because you forgot to ad “px”.

.container {
width: 1100px;
padding-top: 25px;
margin: 30[COLOR="#FF0000"]px[/COLOR] auto;
position: relative;
}
5

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

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:


#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

Ok I see what you are saying. Thanks for the help!