Foros del Web » Creando para Internet » CSS »

Un problema con divs que no tengo con tablas :/

Estas en el tema de Un problema con divs que no tengo con tablas :/ en el foro de CSS en Foros del Web. Disculpen si el título no es el más adecuado, pero un título más acorde sería menos llamativo Este es el caso, tenia un diseño hecho ...
  #1 (permalink)  
Antiguo 22/09/2008, 12:21
 
Fecha de Ingreso: junio-2008
Mensajes: 71
Antigüedad: 9 años, 5 meses
Puntos: 0
Un problema con divs que no tengo con tablas :/

Disculpen si el título no es el más adecuado, pero un título más acorde sería menos llamativo

Este es el caso, tenia un diseño hecho con tablas y la verdad estaba bien, no me quejo (podría decirse que era una zona "de poca importancia", no se trataba de contenido, sino de un bloque de estadísticas y a mi forma de ver el dilema de divs y tablas no importaba).

Hace poco decidí pasarlo a divs para ver que tal me iba y la verdad el resultado fue mejor, salvo por un problema recurrente que siempre he tenido cuando cambio tablas por divs.

1.- Se trata de tres bloques, uno al lado de otro. Su contenido será "predecible" en cuanto a ancho y alto, ya que solo cambian unos números y palabras. (ventaja)

2.- El color e imagen de fondo no importa en lo más mínimo (ventaja).

3.- El primer bloque siempre será de un ancho fijo. (ventaja)

4.- El segundo bloque estará "pegado" del primero. (ventaja)

5.- Los otros dos "el contenido siempre tendrá el mismo ancho" sin embargo quiero que el ancho de los bloques no sea fijo, sino que se adapte al ancho de la ventana.

Es decir, el bloque 2 y 3 quiero que "no estén pegados" sino que tengan una separación acorde al ancho de la ventana.

Con tablas es pan comido, porque las celdas a menos que se les especifique un ancho siempre tenderán a equilibrar sus anchos. Pero con divs no :/

En dos palabras, quiero que la separación entre el bloque dos y el bloque tres sea "elástica" de modo que varíe entre 0 y X de acuerdo al ancho de la ventana.

Si pongo todos los bloque con float left, entonces el 2 y el 3 siempre quedarán pegados.

Si pongo el bloque 1 y 2 con float left, y el bloque 3 con float right, entonces el 3 quedará pegado de la izquierda, y caigo en lo mismo, que quisiera que hubiese un "margen elástico" para este bloque y que no quede así pegado.


Ojalá hayan entendido y ojalá haya una salvación con css porque a veces pienso que no todo es oro y no queda más que morir con tablas. :/

Gracias adelantadas.
  #2 (permalink)  
Antiguo 22/09/2008, 12:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Un problema con divs que no tengo con tablas :/

Cita:
quiero que el ancho de los bloques no sea fijo, sino que se adapte al ancho de la ventana.
Cita:
el bloque 2 y 3 quiero que "no estén pegados" sino que tengan una separación acorde al ancho de la ventana.
Cita:
quiero que la separación entre el bloque dos y el bloque tres sea "elástica" de modo que varíe entre 0 y X de acuerdo al ancho de la ventana.
Bueno, no parece fácil de entender. No me queda claro si lo que quieres que se adapte al ancho es el ancho de los bloques 2 y 3, como dices en el primer párrafo, o la separación entre ellos, que por otro lado tendrán ancho fijo
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 22/09/2008, 13:45
 
Fecha de Ingreso: junio-2008
Mensajes: 71
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Un problema con divs que no tengo con tablas :/

Ok, no hay problema, siempre que haya dudas me dicen y trataré de aclarar las cosas.

Creo que resultó confusa la diferencia entre el "ancho del contenido" y el "ancho del bloque". Más bien creo que no usé las palabras adecuadas.

Con ello quería hacer la diferencia de que: por un lado está el "largo del contenido" que afortunadamente varía muy poco, lo más largo siempre es el título que es fijo, y además siempre tendrá el mismo número de lineas, así que el largo de contenido es casi fijo.

Y por otro lado está el "ancho del div" (que en estos casos, sin haber tocado aun algo en el css es del mismo largo del contenido).

------------------------------------

Ahora viene un resumen del problema, y las formas en que he buscado resolverlo.

A.- El problema está entre los bloques 2 y 3.

El ancho de los div 2 y 3, es el mismo que el largo de su contenido, por lo tanto "quedan pegados" y lo que busco es que (por estética) esos dos bloques no me queden "pegados", sino que queden separados de acuerdo al ancho total disponible.

Así como ocurre en las tablas, que las celdas se reparten el ancho total disponible.

B.- Para resolver esto es que he intentado un par de cosas.

1.- Hacer que el ancho del div, no sea igual que el largo del contenido, sino que sea mayor.

Pero si lo fijo, queda fijo. La idea es que sea "elástico". Para que sirva en casi cualquier tamaño de ventana

Como lo que importa es la separación entre 2 y 3, con que funcione para el bloque 2 sirve.

2.- No tocar los anchos, y en su lugar jugar con las separaciones. Me ha ocurrido igual, si fijo la separación con margin o padding, entonces esta separación es fija y no es elástica.

3.- También está el caso en que al bloque 2 y 3 los separé con float (2 float left y 3 float right).

El bloque 2 me queda pegado del bloque 1 (así es como debe ir por lo que es una ventaja)

El bloque 3 me queda pegado del margen derecho, y entonces caigo en lo mismo, que querría separarlo "elásticamente" y para que quede más centrado a la izquierda.


Aquí dejo una imagen que creo puede ayudar.


Última edición por SebasSebas; 22/09/2008 a las 14:02
  #4 (permalink)  
Antiguo 22/09/2008, 14:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Un problema con divs que no tengo con tablas :/

Hola SebasSebas
Creo haber entendido que buscas un diseño 'líquido', vamos, que se adapte a la ventana del navegador.
Mira este enlace, creo que te será fácil adaptar alguna a tus deseos, pues la anchura y márgenes están en porcentajes, además de ser el código, tanto html como css, bastante 'limpio', sin más propiedades definidas que las imprescindibles.
Espero te sea de ayuda, ya dirás.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 22/09/2008, 14:57
 
Fecha de Ingreso: junio-2008
Mensajes: 71
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Un problema con divs que no tengo con tablas :/

Gracias por la página, está muy buena.

Pero me parece que ninguno sería solución (o quizás no lo he visto porque soy torpe ), más bien los más parecidos resultan ser iguales al caso de la "solución/problema 2".

Es decir, se tiene una (o dos) columna(s) fija(s) y una columna líquida. Pero las columnas fijas están en los extremos.

Es justo lo que hacia en el caso 2, que lograba separar ambos bloques, y tenia la "liquides" del segundo bloque, pero el tercero me queda pegado del margen.

Lo bueno, es que mi caso es como esos, es algo bastante limpio, sin fondos, imágenes, etc. Ni hay siquiera color de fondo.
  #6 (permalink)  
Antiguo 22/09/2008, 16:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Un problema con divs que no tengo con tablas :/

Sigo sin estar seguro de entenderlo bien, pero a ver si la cosa puede ir por aquí:

http://www.araudi.net/forosdelweb/flotante.html

Pongo colores y eso para que se vea bien el efecto.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 22/09/2008, 17:17
 
Fecha de Ingreso: junio-2008
Mensajes: 71
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Un problema con divs que no tengo con tablas :/

Muchas gracias, viéndolo así por encima pienso que si eso no es, entonces no me ayuda ni Mandrake.

Funciona tal cual como quiero, la única peca que puede tener es que no funciona con el amigo IE6 pero creo ya más no se puede esperar más.

Les agradezco a ambos
  #8 (permalink)  
Antiguo 22/09/2008, 17:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Un problema con divs que no tengo con tablas :/

¿Cómo? Con IE6 funciona perfectamente, sólo que hay como siempre un punto de reducción que colapsa y salta para abajo, pero mucho hay que reducir para eso, ¿no?

Si luego conviertes el código a tu caso real y te da problemas con IE6, muéstralo a ver si se encuentra solución.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 22/09/2008, 18:43
 
Fecha de Ingreso: junio-2008
Mensajes: 71
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Un problema con divs que no tengo con tablas :/

Tienes razón (lo acabo de probar con la página esa que saca capturas), lo que es doblemente bueno.

Últimamente me han "estado fallando" varios diseños en IE6 y "antes estaban buenos". Suelo usar un IE6 portable y por lo visto debo tener algún problema en el registro o que se yo que cosa.

je je, gracias a ese comentario se me quita otro dolor de cabeza de encima.

Lo de que colapse hacia abajo no hay problema con eso, ocurre como dices cuando se reduce mucho y para eso se puede usar un contenedor "wrapper".

Edito: En el IE6 que lo probé, se veía como una web cualquiera cuando le desactivas el css. En las capturas por lo menos se ve como lo veía en el resto de los navegadores (aunque no me conste la fluides en capturas, por lo menos no se ve como lo estaba viendo), y si además me dices que si funciona y le uno esa situación que narré arriba; todo apunta que la culpa está en el portable que uso.

Última edición por SebasSebas; 22/09/2008 a las 18:50
  #10 (permalink)  
Antiguo 23/09/2008, 02:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Un problema con divs que no tengo con tablas :/

Sí, debe ser el portable. Me alegro de que todo haya ido bien.

Hasta la vista.
__________________
Visita mi nueva web idplus.org
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 20:47.