Foros del Web » Creando para Internet » CSS »

"overflow: hidden" me da problemas en Opera

Estas en el tema de "overflow: hidden" me da problemas en Opera en el foro de CSS en Foros del Web. Hola por acá, tengo un slideshow que tiene más o menos la siguiente estructura: Código: << anterior texto con imagen siguiente >> Todo dentro de ...
  #1 (permalink)  
Antiguo 28/02/2011, 13:25
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Pregunta "overflow: hidden" me da problemas en Opera

Hola por acá, tengo un slideshow que tiene más o menos la siguiente estructura:
Código:
<< anterior      texto con imagen    siguiente >>
Todo dentro de un id llamado slide:
Código HTML:
Ver original
  1. <div id="slide">
  2.     <a class="prev" href="#"><img class="slide-left" alt="featured title" src="http://localhost/sitio.com/images/slide-left.png"/></a>
  3.     <div class="items">
  4.         <!-- Texto con imagen -->
  5.     </div><!-- .items -->
  6.     <a class="next" href="#"><img class="slide-right" alt="featured title" src="http://localhost/sitio.com/images/slide-right.png"/></a>
  7. </div><!-- #slide -->
En el CSS tengo lo siguiente:
Código CSS:
Ver original
  1. #slide{
  2.     padding: 40px 30px 0;
  3.     color: #fff;
  4.     width: 900px;
  5.     overflow: hidden;
  6. }
  7. .slide-left{
  8.     float: left;
  9.     margin: 50px 92px 0 40px;
  10. }
  11. .slide-right{
  12.     float: right;
  13.     margin: 50px 40px 0 92px;
  14. }
He tenido que usar overflow: hidden en el id slide porque así es como único se me ven a la misma altura las imágenes que uso como flechitas para ir pasando los titulares por el slideshow, de lo contrario la derecha se ve unos pixels más abajo que la izquierda, pero en Opera se ve como si tuviese mucho más padding. Imagino que debo estar haciendo algo mal, y que el uso de overflow aquí tal vez sea innecesario, pero no tengo idea de que pueda ser.

Gracias mil de antemano
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #2 (permalink)  
Antiguo 28/02/2011, 14:14
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: "overflow: hidden" me da problemas en Opera

Puede ser mejor idea usar posiciones absolutas para las flechas y posición relativa para slide. De esa manera las flechas aparecerán donde les digas.
Código CSS:
Ver original
  1. #slide{
  2.     padding: 40px 30px 0;
  3.     color: #fff;
  4.     width: 900px;
  5.     position:relative;
  6.     }
  7.  
  8. .slide-left{
  9.     top:50px;
  10.     left:0;
  11.     position:absolute;
  12. }
  13. .slide-right{
  14.     top:50px;
  15.     right:0;
  16.     position:absolute;
  17. }
Usa la posiciones absolutas en los enlaces en lugar de en las imágenes y ajusta la posición según te convenga..
Código HTML:
Ver original
  1. <div id="slide">
  2.     <a class="prev slide-left" href="#"><img alt="imagen anterior" src="http://localhost/sitio.com/images/slide-left.png"/></a>
  3.     <div class="items">
  4.         <!-- Texto con imagen -->
  5.     </div><!-- .items -->
  6.     <a class="next slide-right" href="#"><img class="" alt="imagen siguiente" src="http://localhost/sitio.com/images/slide-right.png"/></a>
  7. </div><!-- #slide -->
  #3 (permalink)  
Antiguo 28/02/2011, 16:06
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Respuesta: "overflow: hidden" me da problemas en Opera

Lo de las posiciones me ha servido, ahora tengo lo siguiente:
Código CSS:
Ver original
  1. #slide{
  2.     padding: 40px 30px 0;
  3.     color: #fff;
  4.     width: 900px;
  5.     position: relative;
  6. }
  7. .slide-left{
  8.     float: left;
  9.     margin-top: 50px;
  10.     left: 0;
  11.     position: absolute;
  12. }
  13. .slide-right{
  14.     float: right;
  15.     margin-top: 50px;
  16.     right: 0;
  17.     position: absolute;
  18. }
Pero la caja .items se me pega a la izquierda y si le doy márgenes horizontales me pasa lo mismo de antes... ¿ahora que estoy haciendo mal? ¿por qué no puedo dar márgenes horizontales?

Gracias
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #4 (permalink)  
Antiguo 28/02/2011, 18:29
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: "overflow: hidden" me da problemas en Opera

1.No tengo el css de .items así que no puedo adivinar las propiedades que tiene.
Si lo quieres centrar añádele la propiedad "margin:0 auto". Se trata de darle el valor auto al margen derecho y al izquierdo. Puedes cambiar los valores superior e inferior a voluntad.
Por supuesto también podrías usar valores fijos o porcentuales para los márgenes laterales con otros resultados.

2. El css que incluyes no es el que te dí. Intenta modificar la posición usando top en lugar de margin-top. Usa el valor que necesites. Cuando utilizas posición absoluta se usan las propiedades top, left, right, y bottom para fijar la posición. Si te das cuenta, los divs con las flechas tampoco respetan el padding que fijaste en #slide, que puedes quitar si no te sirve. Si deseas usar un margen hasta el borde usa left y right en lugar de padding. Es lo más recomendable.
Otra diferencia es que las capas con posición absoluta se muestran siempre por encima de sus hermanas sin posición absoluta ocultándolas si quedan debajo.
  #5 (permalink)  
Antiguo 01/03/2011, 07:43
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Respuesta: "overflow: hidden" me da problemas en Opera

@sanxuan no lo hice usando tu código, pues lo probé y no me resultó, pero a partir de lo que me diste pude solucionar el asunto, lo resolví metiendo los controles dentro de una caja:
Código HTML:
Ver original
  1. <div id="slide">
  2.     <div id="slide-controls">
  3.         <a class="prev" href="#"><img class="slide-left" alt="featured title" src="http://localhost/sitio.com/images/slide-left.png"/></a>
  4.         <a class="next" href="#"><img class="slide-right" alt="featured title" src="http://localhost/sitio.com/images/slide-right.png"/></a>
  5.     </div>
  6.     <div class="items">
  7.     <!-- texto e imagenes -->
  8.     </div><!-- .items -->
  9. </div><!-- #slide -->
Código CSS:
Ver original
  1. #slide{
  2.     padding: 40px 30px 0;
  3.     color: #fff;
  4.     width: 900px;
  5.     position: relative;
  6. }
  7. #slide-controls{
  8.     top: 50px;
  9.     width: 900px;
  10.     float: left;
  11.     position: relative;
  12. }
  13. .prev{
  14.     float: left;
  15.     position: absolute;
  16. }
  17. .next{
  18.     float: right;
  19.     left: 840px;
  20.     position: absolute;
  21. }
  22. .items{
  23.     width: 536px;
  24.     float: left;
  25.     left: 180px;
  26.     position: relative;
  27. }
Gracias por tu ayuda, en realidad me ha servido para aclararme algunas cosas... Un saludo
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose

Etiquetas: opera
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 10:47.