Foros del Web » Creando para Internet » CSS »

Problema Css y Jquery

Estas en el tema de Problema Css y Jquery en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 16/07/2010, 00:02
 
Fecha de Ingreso: abril-2009
Ubicación: Sunchales
Mensajes: 67
Antigüedad: 8 años, 7 meses
Puntos: 0
Problema Css y Jquery

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.

Última edición por nicomariani; 16/07/2010 a las 00:08
  #2 (permalink)  
Antiguo 16/07/2010, 07:59
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Problema Css y Jquery

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.
  #3 (permalink)  
Antiguo 16/07/2010, 10:27
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: Problema Css y Jquery

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.
__________________
www.sandant.com - Blog de Programacion y mucho mas

WWW.SPEDEVIGNER.COM SE DEJARA DE USAR EN UN MES
  #4 (permalink)  
Antiguo 16/07/2010, 11:02
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Problema Css y Jquery

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:
Ver original
  1. div.sc_menu {
  2.     /* Set it so we could calculate the offsetLeft */
  3.     position:inherit;
  4.     height: 323px;
  5.     width: 730px;
  6.     overflow: auto;
  7.     top: 0px;
  8.     left: 30px;
  9. }

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

Última edición por TheDark03; 16/07/2010 a las 11:53

Etiquetas: jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:51.