¿no aparecen los botones de slider?

tonywhite · #1 (**permalink**) 31/03/2010, 22:36

hola, tengo un problema con los botones de un slider,botones prev y next no aprecen encima de las imagenes, sino que no se muestran y si en el css estilo en #buttons le quito el overflow, se muestran , pero abajo de las imagenes, pero si le pongo overflow auto, no se muestran
aqui esta la imagen

http://i43.tinypic.com/6740b4.jpg

Código HTML:

<body>
		<div id="wrapper">							
			<div id="pagewrapper">
				<div id="header">
					<div class="logo">
						<a href="#" title="Home">
						<img src="images/logo2.jpg" alt="home"/></a>
					</div><!-- end og logo -->
					<div id="searchspace">
						<div id="search">
							<form id="searchform" method="post" action="">
					
							<p><input   id="searchinput" type="text" name="s" value="" class="textinput"/></p>
							<p><input   id="searchgo"  type="submit" value="" class="stylesubmit" /></p>
							</form>
						</div><!-- end of search -->
					</div> <!-- end of searchspace -->
				</div><!-- end of header -->
				
				<div id="topmenu" class="">
					<div  id="navigation">
						<div id="main">
					
							<ul id="sample-menu-1" class="sf-menu ">
									<li class="current">
										<a href="#a"><span>home</span></a>
										
									</li>

									<li  >
										<a href="#"><span>about</span></a>
									</li>
									<li >
										<a href="#"><span>portfolio</span></a>
										<ul class="listados">
											<li >
												<a href="#">portfolio1</a>

												
											</li>
											<li>
												<a href="#">portfolio2</a>
												
											</li>
											
											
										</ul>
									</li>
									<li >
										<a href="#"><span>blog</span></a>
										 <ul >
											<li>
												<a href="#">Photograp</a>
												
											</li>
											<li>
												<a href="#">Design</a>

												
											
											</li>	
											
											<li>
												<a href="#">Example</a>

												<ul>
													<li><a href="#">This is </a></li>
													<li><a href="#">Only</a></li>
													<li><a href="#">Demonstration</a></li>
													
												</ul>
											
											</li>	
										 
										</ul>
										
									</li>	
									
									<li>
										<a href="#"><span>contact</span></a>
									</li>	
						    </ul>
						</div><!-- main -->
					</div><!-- navigation -->
				</div><!-- end of topmenu	 -->					
						
					  
							
				<div id="Slider"><!--slider starts-->
					<div id="Gallery">
						<ul class="ImagesSlider">
							<li><a><img class="" title="image" src="images/slider2.jpg" alt="image" width="959px" height="338px" /></a></li>
							<li><a><img class="" title="image" src="images/slider2.jpg" alt="image" width="959px" height="338px" /></a></li>
							<li><a><img class="" title="image" src="images/slider3.jpg" alt="image" width="959px" height="338px" /></a></li>
							<li><a><img class="" title="image" src="images/slider2.jpg" alt="image" width="959px" height="338px" /></a></li>
							<li><a><img class="" title="image" src="images/slider3.jpg" alt="image" width="959px" height="338px" /></a></li>
						</ul>
					</div>
				
				<div id="buttons">
                    <a href="#" ><img src="images/btnprev.png" width="25px" height="28px" alt="bottom" title="prev" id="btnprev" /></a>
					<a href="#" ><img src="images/btnnext.png" width="25px" height="28px"  alt="bottom" title="prev" id="btnnext"/></a>
				</div>

										
						
				</div><!-- end of slider -->
			
			<div id="middle" >
						<div id="lines">
						<img src="images/degline.jpg" width="934px" height="1px" alt="line" class="line"/>	
							<h3>Here you can add some text tah shows what you are doing...</h3>
						<img src="images/degline.jpg" width="934px" height="1px" alt="line" class="line"/>					
					</div>
				</div> <!-- end of middle -->
			</div><!-- pagewrapper -->	

		</div><!-- wrapper -->
</body>
</html>

y aqui esta el codigo css

Código HTML:

/*general*/


body
{
background:url(images/backgroundnav2.png) repeat-x;
}



 #wrapper #pagewrapper{
 margin:0 auto;
 padding:0;
 width:960px;
 }
 
 #header{
width:960px;
height:150px;
}
 /*---------
 begin logo
 ----------*/
 
 #header .logo{
 width:421px; 
 height:150px;
 margin-left:-50px;
 margin-top:0;
 float:left
 }
 #header #searchspace{
 clear:right;
 float:right;
 margin:78px 0   25px;
 }
 
/*--------------
     begin search
----------------*/
	 
 #search {
 background:url(images/searchbox2.jpg) no-repeat  0 0 transparent;
 overflow:hidden;
 cursor:text;
 height:33px;
 width:271px;
 }

#searchinput{
background:none repeat scroll 0 0 transparent;
border:0 none;
float:left;
font-size:14px;
height:20px;
width:200px;
padding:6px 0 0 7px;
margin:0;
}


#searchgo{
background:none repeat scroll 0 0 transparent;
border:0 none;
cursor:pointer;
display:none;
float:left;
height:30px;
width:65px;
margin:5px 0 0;
padding:0;
}
/*-----------------------
 end of  of logo and search
------------------------*/ 
 
 /*----------------------
start navigation
-----------------------*/
 
#topmenu{
margin:0;
padding:0;
background:url(images/navbarbackground.jpg);
background-repeat:repeat-x;
height:80px;
width:100%;
z-index:99;
position:relative;
}

 
#main{
margin:1px 100px 0 0;
padding:0;
float:right;
position:relative;
}

#Gallery{
clear:both;
margin:0;
padding:0;
width:960px;
height:340px;
}
 

 
#Slider{
width:960px;
height:340px;
overflow:hidden;}



#buttons{
position:absolute;

width:960px;
z-index:999;
}



#btnnext{
position:absolute;
top:150px;
right:10px;
}

#btnprev{
position:absolute;
}


#middle{
padding:0;
margin:0;
width:960px;}