Foros del Web » Creando para Internet » CSS »

Diapositivas sin tablas

Estas en el tema de Diapositivas sin tablas en el foro de CSS en Foros del Web. Hola amigos: En la página de mi perfil tengo una galería de miniaturas que tiene el aspecto de diapositivas. La verdad es que funciona bien, ...
  #1 (permalink)  
Antiguo 14/09/2004, 05:01
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Diapositivas sin tablas

Hola amigos:

En la página de mi perfil tengo una galería de miniaturas que tiene el aspecto de diapositivas.
La verdad es que funciona bien, pero en tantos mensajes he visto que no es necesario el uso de tablas para acomodar elementos de una página que estoy intentando hacerlo sin ellas.

Preparé 2 ejemplos para mostrar...

El primero funciona perfectamente en explorer pero se ve fatal en mozilla, y se trata de poner una capa con posicion relativa y definidos los estilos width, height y además: display: inline, y en el interior la imagen con posición absoluta dándole valores a pos y left (calculados con javascript)

El segundo intenté que funcionase mejor en Mozilla y puse la capa con position: static y la imagen dentro, pero a pesar de tener asignados los estilos width y height no los respeta cuando le pongo display: inline
Y si pongo display block, lo respeta, pero la siguiente imagen se muestra en la linea de abajo (al poner inline pretendía evitarlo)

La página del priemr ejemplo es: http://www.sucaricatura.com/pruebas/prueba1.php

Y la del segundo: http://www.sucaricatura.com/pruebas/prueba2.php

Tan solo son pruebas... si se pincha en donde pone página 1 y página 2 se pagina la galería y se muestra el código de cada capa en el textarea de la página.

Gracias y saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #2 (permalink)  
Antiguo 15/09/2004, 13:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otra vez:

Parece que en ciertas ocasiones es conveniente usar tablas...

El ejemplo con tablas está en esta otra página: http://www.sucaricatura.com/pruebas/prueba3.php
Dentro de la celda una capa con posición relativa, display block y las dimensiones externas ajustadas, y la imágen con posición absoluta (en este caso calculadas con javascript)... En el ejemplo también hay comentarios que se centran perfectamente debajo de la diapositiva.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 16/09/2004, 01:02
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Hola Caricatos

'cucha... la mejor forma de hacer lo que quieres es dejando las capas con un display block o no podrás asignarle dimensiones en otros navegadores que no sean etsplorer.

Dales a esas capas un float:left y a la última de cada fila le asignas un clear: left

.... o bien deja todas con el float: left y cada grupo de capas que deban simular una fila dentro de un div

Este calendario está hecho sin tabla a base de divs http://javascript.tunait.com/javascr...calendario.htm
  #4 (permalink)  
Antiguo 16/09/2004, 02:42
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
De acuerdo ¡Por fin!

Gracias tunait :

Me parece que al fin podré actualizar mi galería... En cuanto la pruebe te aviso en este mensaje...

Sabía que alguien ilustre iba a darme la respuesta.

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 17/09/2004, 05:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otra vez:

La página con el primer método (al principio de cada nueva fila poner clear:left) la subí: http://www.sucaricatura.com/pruebas/prueba4.php
Pero no me dá el resultado que esperaba ya que me cuesta centrar las miniaturas y dentro de cada fila tener las diapositivas centradas...

En esta última página puse un botón para poder probar las modificaciones que se me vayan ocurriendo, pero no doy con la solución.

Hice una pequeña prueba con el segundo sistema y me gusta más, aunque me parece que el centrado va a ser difícil de conseguir.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 19/09/2004, 18:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Sigo sin convencerme

Hola otra vez:

Las diapositivas se acomodan mucho mejor, pero no consigo que queden centradas en la página como quedan con tablas...

Con tablas se ve en este link: http://www.sucaricatura.com/pruebas/prueba3.php

Y sin tablas en este otro: http://www.sucaricatura.com/pruebas/prueba5.php

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 09:50.