Foros del Web » Creando para Internet » CSS »

problema con el CSS del slider

Estas en el tema de problema con el CSS del slider en el foro de CSS en Foros del Web. borrado, problema arreglado mas abajo...
  #1 (permalink)  
Antiguo 17/10/2009, 12:08
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Exclamación problema con el CSS del slider

borrado, problema arreglado mas abajo
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 27/11/2009 a las 14:15
  #2 (permalink)  
Antiguo 17/10/2009, 12:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

¿Recuerdas cuál es el tamaño de una caja según el estándar?
Si ".slider1Image span" tiene un "padding:10px 13px;" y además le añades la clase ".right" que tiene la misma anchura de su ancestro (567px) el tamaño total son esos 26px (13+13) que te sobran.
Solución, compensarlos. Así que puedes hacer una de 2 cosas:
1ª: quitar el padding lateral de-->
.slider1Image span {padding: 10px 0;}

2ª: ajustar el tamaño de la clase .right -->
.right {width:541px !important;}

Posiblemente tengas algún efecto secundario, sobre todo en los navegadores que su modelo de caja no es el estándar.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/10/2009 a las 13:50 Razón: lapsus
  #3 (permalink)  
Antiguo 17/10/2009, 13:41
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Hola kseso?.
Ya arregle el problema de las span box.
Ahora el problema que tengo es que en el css le tengo los tamaños del diseño mio que es 567x232px pero el slider queda en un tamaño de 527x216 cual es el problema de que me pase eso
aqui pongo el CSS ya modifcado como dijiste y tambien el link del carrusel ya modificado.

http://www.kopfmackloss.com/carrusel/carrusel.html

Código HTML:
#slider1 {
    width: 567px; /* important to be same as image width */
    height: 232px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content {
    width: 567px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 0px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 541px !important;
	height: 50px;
}
ul { list-style-type: none;}
Un saludo espero me ayudes.

ATTe gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #4 (permalink)  
Antiguo 17/10/2009, 13:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

Opsss!!!
Corregido en el post anterior.
Lo que quise decir y dije mal fue:
Cita:
Solución, compensarlos. Así que puedes hacer una de las 2 cosas
Una y sólo una.
Si haces las dos, estás restándole no los 26 px (px arriba o px abajo) sino el doble: los del padding y los del width.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 17/10/2009, 14:40
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Hola kseso?.
Ahora hice solo el de .right
Código:
.right {
	width: 541px !important;
pero el problema ahora es que no queda en el tamaño que yo le tengo puesto 567px x 232px aqui te pongo una imagen para que veas en que tamaño queda.



queda en 527px × 216px

y aqui esta el codigo modificado con la segunda opcion que me diste.



Código HTML:
#slider1 {
    width: 567px; /* important to be same as image width */
    height: 232px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content {
	width: 567px;
	top: 0;
	margin-left: 0;
}
.slider1Image {
	float: left;
	position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 541px !important;
	height: 50px;
}
ul { list-style-type: none;}
Un saludo.

ATTe Gidharvey


PD: El problema es con firefox, como lo podria hacer para que se muestre el tamaño que yo le tengo puesto en firefox? por que en IE6 se ve bien, hay algun hack para esto?
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 27/11/2009 a las 14:19
  #6 (permalink)  
Antiguo 17/10/2009, 15:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

Cita:
Iniciado por GidHarvey Ver Mensaje
PD: El problema es con firefox, como lo podria hacer para que se muestre el tamaño que yo le tengo puesto en firefox? por que en IE6 se ve bien, hay algun hack para esto?
No, el problema de de código y estándares (o de qué navegador sí y cuál no), has obviado (o no has advertido la diferencia) de lo primero que te dije:
Cita:
¿Recuerdas cuál es el tamaño de una caja según el estándar?
...
Posiblemente tengas algún efecto secundario, sobre todo en los navegadores que su modelo de caja no es el estándar.
Modelo de caja estandar
Y no se a que tamaños te refieres, pero yo lo veo igual en ff e ie6. Ya que siguen las dos modificaciones:



La imagen superior es el código de la página, la parte inferior modificado.
Y si lo que necesitas es compensar alguna interpretación defectuosa de los ie, utiliza los comentarios condicionales para compensarlo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 17/10/2009, 16:35
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Muchas Gracias kseso?
Eso ya esta arreglado
http://www.kopfmackloss.com/carrusel/carrusel.html

pero creo que no me haz entendido, ahora el problema es el tamaño del slider es decir el slider o las imagens miden 567x232px en el diseño de la pagina de esa parte la caja completa mide 567x232px pero en firefox mide 527px x 226px
y en IE6 mide lo correcto que es 567px x 232px como puedo arreglar esto para que se vea bien en mozilla firefox aqui pongo unas imagenes para que me entiendas.

Asi se ve en mozilla firefox: 527px x 226px


y asi se ve en IE6: 567px x 232px que es lo correcto.


Dime si yo estoy mal o es eso lo que me explicaste saludos y cuidate.

de antemano muchas gracias kseso?

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 27/11/2009 a las 14:15
  #8 (permalink)  
Antiguo 17/10/2009, 19:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

creo que se arreglaría con:
Cita:
#slider1Content {
margin:0;
padding:0;
width:567px;
}
parece que hereda algún margen/padding lateral derecho y superior y el resto queda oculto porque "slidder1" tiene "overflow: hidden". Puedes verlo antes de aplicar el cambio de arriba si a "slidder1" le pones un fondo de forma temporal y para pruebas.

Es buena idea para saber que ocurre (o hasta donde llegar las cajas) darles un fondo mientras haces las pruebas o buscas "fallos".

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 17/10/2009, 19:41
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Ahora si esta todo solucionado, hice lo de poner un background primero y luego poner el codigo que me pusiste arriba, muchas gracias kseso? te pasaste cuidate que estes bien.
hay te va mi karma.

Un saludo.

http://www.kopfmackloss.com/carrusel/carrusel.html

ATTe Gidharvey

PD: no me deja darte karma denuevo xD
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #10 (permalink)  
Antiguo 17/10/2009, 19:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

Me alegra saber que lo arreglaste.
De todas formas, y para el futuro, es más que conveniente utilizar algún tipo de reset css
Con el más sencillo no se habría presentado el problema:
Código css:
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.   }

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 17/10/2009, 20:01
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Hola kseso?
Fui tonto yo no haber probado antes en la pagina del index por que ahora lo tengo puesto en el index http://www.kopfmackloss.com para que lo veas hay si tengo puesto, hay si tengo puesto el reset.

Saludos y muchas gracias nuevamente.


PD: Kseso? hola tengo un problema no me di cuenta, pero en mi pagina ahora donde puse el slider no se ve el efecto del lightbox, cual es el codigo para que me lo muestre donde hay algo abajo? saludos.

de antemano muchas gracias nuevamente
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 17/10/2009 a las 20:19
  #12 (permalink)  
Antiguo 18/10/2009, 07:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el CSS del slider

No entendí cuál es el problema, pero si es del js lo siento, es terreno enemigo y minado para mi.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 18/10/2009, 09:12
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Hola kseso?
Buenos dias, mira lo que paso es que como puse el slider y esta primero que las imagenes del lightbox resulta que no genera el efecto, me abre las imagenes en ventana y no en el efecto lightbox, el problema es donde esta el slider abajo el lightbox no hace el efecto sobre el...
es como cuando no se te ve un menu despegable por que abajo de ese menu hay un objeto flash... me explico. pero puedes habrir mi pagina y abrir una de esas imagenes que sale abajo donde dice random image. y te daras cuenta que no se abren en el lightbox :S
como lo podria arreglar...

mi pagina

si se necesita codigo, me dices y edito este mensaje saludos.

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #14 (permalink)  
Antiguo 18/10/2009, 12:46
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

editado, problema arreglado abajo
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 27/11/2009 a las 14:16
  #15 (permalink)  
Antiguo 19/10/2009, 11:53
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con el CSS del slider

Buenos Dias.
Bueno el problema ya esta resuelto, por si hay alguien que tiene el mismo problema la solucion esta
Por otro lado, quiero decir muchas gracias a kseso? que me ayudo mucho con esto, y disculpame por lo de ayer, ya no sabia que hacer, ok?
Un saludos y muchas gracias por todo nuevamente.

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 27/11/2009 a las 14:18
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 17:49.