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;}