Hola amigos como estan? estoy teniendo el siguiente problema con IE, Firefox y Chrome, estoy usando un slide y a pantalla completa se ve correctamente, pero cuando cambio el tamaño de la ventana ahi viene el problema. Adjunto pantallas, Codigo HTML y Css.
Codigo HTML del Slider.
Código:
<div id="img_29" style="background-image: url('Imagenes/Cumples/Cumples_29.jpg')">
<div class="div_conteiner">
<div class="sc_menu">
<ul class="sc_menu">
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Menu"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Javascript"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="CSS"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Horizontal"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Menu"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Navigation"/><span></span></a></li>
<li><a href="#"><img src="Imagenes/Cumples/01.png" alt="Graceful"/><span></span></a></li>
</ul>
</div>
</div>
</div>
Codigo CSS img_29
Código:
#img_29
{
width:817px;
height:378px;
float:left;
}
Codigo CSS Slider
Código:
* {margin:0; padding:0; outline: 0;}
a {outline:none;}
ul {list-style:none}
div.div_conteiner {
/* Set it so we could calculate the offsetLeft */
height: 316px;
width: 730px;
position:absolute;
top: 343px;
left: 240px;
}
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position:inherit;
height: 323px;
width: 730px;
overflow: auto;
top: 0px;
left: 30px;
}
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* removing default styling */
margin: 0;
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
display: none;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
/* Here are styles for the back button, don't look at them */
#back {
display: block;
width: 500px;
text-align: center;
color: #FFFFFF;
font-size: 16px;
}
En conclusion lo que estaria necesitando es que el slider se quede siempre dentro del Div #img_29, independientemente del tamaño de la ventana.
Desde ya agradezco de antemano si alguien me puede ayudar.
Saludos.