Problema Css y Jquery

[nicomariani]

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.

[all-ill]

Podrías usar porcentajes en lugar de píxeles para especificar el tamaño de #img_29 o usar overflow:auto u overflow:hidden en el elemento que sea padre del slider.

[exxqizofrenicoo]

mira el problema es que el css tiene una medida especifica desde el borde superior izquierdo del navegador es decir que cuando vos agrandes o achiques la pantalla siempre se va a quedar a esa distancia del borde superior izquierdo.

por lo que dice algunos comentarios en el css, en el jquery estarias calculando la medida que necesitas cambiar al hacer resize el navegador. y este problema no deberia suceder. con offsetLeft() pero nose porque no veo el jquery.

lo que podrias hacer quizas es crear un div padre del div_conteiner pero que este div no sea absoluto y que tenga el ancho y alto 316x730, y luego en el div (div_conteiner) el top y left no se tomaria desde el borde superior izquierdo del navegador se tomaria desde el borde superior izquierdo del div padre recien creado por lo cual cuando la ventana haga resize el div recien creado se movera segun la estructura principal al no ser absoluto y el div (div_conteiner) siempre se movera con respecto al div padre recien creado y no te daria estos problemas
acordate de modificar el top y left del div_conteiner porque ahora se va a tomar desde el div padre y no del navegador.

Espero que con esto te guies un poco y si seguis con problemas te ayudo un poco mas.

[TheDark03]

hola... como ya te han comentado x q sucede y te han dado una posible solucion solo agrego q podrias modificar la parte:

Código CSS:

div.sc_menu {
    /* Set it so we could calculate the offsetLeft */
    position:inherit;
    height: 323px;
    width: 730px;
    overflow: auto;
    top: 0px;
    left: 30px;
}
 

cuando defines INHERIT esta propiedad toma el mismo valor computado que la propiedad del padre del elemento en este caso conteiner q es absolute

prueba con position:relative;

Saludos