This is a dumb question about div tags

programming web dev
1

ok I have a site i’m working on and i’m working with div tags. so the basis of my site is a full screen slideshow but i want my next and previous buttons (Navigation) over the image like in http://www.Serialcut.com but cant figure it out any help would be greatly appreciated… thanks

<body>

<!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Content Area-->
<div id="content-wrapper">
	<div id="content">
		<h3><a href="index.html" ><img src="images/JA.png"/></a></h3>
	</div>
</div>


        
<!--Slides-->
<div id="supersized"></div>



<!--Control Bar-->
<div id="controls-wrapper">
	<div id="controls">
	
		<!--Slide counter-->
		<div id="slidecounter">
			<span class="slidenumber"></span>/<span class="totalslides"></span>
		</div>
		
		<!--Slide captions displayed here-->
		<div id="slidecaption"></div>
		
		<div id="prevthumb"></div>
		<div id="nextthumb"></div>
		
		<!--Navigation-->
		<div id="navigation">
			<img id="prevslide" src="images/back_dull.png"/><img id="nextslide" src="images/forward_dull.png"/>
		</div>
		
		
	</div>
</div

here is the css:

*{
	    margin:0;
	    padding:0;
	}
	a{
	    color:#8FC2FF;
	    text-decoration: none;
	    outline: none;
	}
	img{
	    border:none;
	}
	body {
	    overflow:hidden;/*Needed to eliminate scrollbars*/
	    background:#000;
	}
	/*Area to place content normally*/
	#content-wrapper{ 
		width:100%; 
		height:100%; 
		position:absolute; 
		top:0; 
		overflow:auto; 
		z-index:4; 
		text-align:center; 
	}
	
	/*Controls Section*/
	#controls-wrapper{
	margin:0px auto;
	height:70px;
	width:100%;
	bottom:0;
	z-index: 5;
	position:absolute;
	}
	#controls{
	    overflow: hidden;
	    height: 100%;
	    text-align:left;
	    z-index: 5;
	    padding:0 114px; /* Increase padding to give thumbnails room */
	}
	#slidecounter{
	float:left;
	color:#888;
	font-weight:bold;
	text-shadow: #000 0px -1px 0px;
	margin:19px 10px 18px 20px;
	font-family: jh_font;
	font-size: 16px;
	}
	#slidecaption{
	overflow: hidden;
	float:right;
	color:#0F9;
	font-weight:bold;
	text-shadow: #000 0px 2px 0px;
	font-family: jh_font;
	font-size: 16px;
	margin-top: 23px;
	margin-right: 20px;
	margin-bottom: 23px;
	margin-left: 0;
	width: 300px;
	}
	
	
	/*Supersized Link*/
	.stamp{ float: right; margin: 15px 30px 0 0;}
	
	
	/*Supersize Plugin Styles*/
	#navigation{
	float: right;
	margin:10px 20px 0 0;
	z-index: 5;
	}
	#loading {
	    position: absolute;
	    top: 49.5%; 
	    left: 49.5%;
	    z-index: 10;
	    width: 24px; 
	    height: 24px;
	    text-indent: -999em;
	    background-image: url(images/progress.gif);
	}
	#supersized{
	    position:fixed;
	}
	#supersized img{ -ms-interpolation-mode: bicubic; }
	#supersized img, #supersized a{
	    height:100%;
	    width:100%;
	    position:absolute;
	    z-index: -1;
	}
	
	#supersized .prevslide, #supersized .prevslide img{
	    z-index: 1;
	}
	#supersized .activeslide, #supersized .activeslide img{
	    z-index: 2;
	}
	
	#nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }
	#nextthumb{ right:12px; }
	#prevthumb{ left:12px; }
		#nextthumb img, #prevthumb img{ width:150px; }
		#nextthumb:active, #prevthumb:active{ bottom:10px; }
		
		/*Add hover pointer*/
		#controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; }