Foros del Web » Creando para Internet » CSS »

columnas con altura dependiente

Estas en el tema de columnas con altura dependiente en el foro de CSS en Foros del Web. Hola comunidad! Expongo el problema: tengo dos columnas div flotadas a la izquierda(float:left;): #izquierda y #contenido #izquierda: en esta incluyo los menús (modulos de joomla!) ...
  #1 (permalink)  
Antiguo 28/07/2009, 21:07
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
columnas con altura dependiente

Hola comunidad!

Expongo el problema:

tengo dos columnas div flotadas a la izquierda(float:left;): #izquierda y #contenido

#izquierda:
en esta incluyo los menús (modulos de joomla!)

#contenido:
aquí incluyo el contenido

Resulta que como el usuario puede cargar contenido (artículos con Joomla!) entonces #contenido va tomando un heigth mayor a #izquierda por lo que en el diseño se ve (por debajo de #izquierda) el background-color del body.

Existe alguna manera de que el heigth de #izquierda se adapte o dependa del heigth de #contenido? o algun otro modo de hacerlo? y con ello lograr un diseño más estético por decirlo de alguna manera.

Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 28/07/2009, 23:28
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 5 meses
Puntos: 34
Respuesta: columnas con altura dependiente

Podés meter #izquierda dentro de #contenido y darle un heigth del 100%. Así si #contenido crece también lo hará #izquierda.
Saludos!
  #3 (permalink)  
Antiguo 29/07/2009, 06:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: columnas con altura dependiente

"Columnas equilibradas" Busca por esos términos.
Tienes ejemplos en
www.araudi.net
http://matthewjamestaylor.com/
www-cssplay.co.uk
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 29/07/2009, 08:51
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

kseso? estube mirando tanto los ejemplos suyos como los FAQs de Milkmoro y la verdad que los he encontrado útil para la creacion de CSS "tradicional" pero como estoy maquetando una plantilla para joomla! y éste segun tengo entendido no me permite anidar divs libremente, por lo que luego de probar no conseguía el resultado deseado.

bex, Gracias, pero de todos modos no lo pude implementar por lo dicho anteriormente y porque en el diseño tengo un width #contenido de 1024px y un width para las columnas de 800px (corrígeme si me equivoco).

1 - Pero, en fín, allé la solución: Hice que #contenido e #izquierda tengan un heigt de 1805px y así los articulos entran perfecto. en algunas columnas mas en otras menos articulos en fin.

2 - Otra solución fue poner un overflow: auto; y con esto conseguia tambien que no se me rompa el diseño aunque el scroll vertical me parecio innecesario y opte por 1.

Ya sé, dirán: ¡Pero no conseguiste que el alto de una columna dependa de otra! En verdad no, bien aquel que sepa como hacerlo para Joomla! que tire la primera piedra!

Saludos y gracias kseso? y bex por su buena disposicion y generosidad.
  #5 (permalink)  
Antiguo 29/07/2009, 08:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

bex: Joomla! no permite anidar #izquierda a #contenido ya que cree #izquierda para los modulos y #contenido para los artículos.

si alguien sabe anidar divs en joomla que lo postee por favor
  #6 (permalink)  
Antiguo 30/07/2009, 18:56
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 5 meses
Puntos: 34
Respuesta: columnas con altura dependiente

No sabía de la restricción de Joomla con los divs. Tal vez en los foros de Joomla en español te puedan dar una mano más específica. Saludos!
  #7 (permalink)  
Antiguo 29/08/2009, 19:34
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

investigando sobre la propiedad display encontre esta información, la que me permitió jugar un poco con las columnas: http://www.librosweb.es/css_avanzado...d_display.html
  #8 (permalink)  
Antiguo 30/08/2009, 08:35
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas con altura dependiente

si puedes tener los divs que desees en joomla... en tu template
overflow: hidden; te solucionaba igual y sin las barritas pero bueno
a tu columna mas corta pudiste agregarle un
padding-bottom:30000px;
padding enorme y luego restarle lo mismo en margin
margin-bottom:-30000px;

chao
  #9 (permalink)  
Antiguo 30/08/2009, 10:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

Alexk:

Gracias, pruebo el truco y despues te cuento como fue.

Espero que funcione en el #@!% explorer también.

Saludos!
  #10 (permalink)  
Antiguo 30/08/2009, 11:44
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas con altura dependiente

sin funciona puedes ver el demo aki
chao y suerte!...
  #11 (permalink)  
Antiguo 30/08/2009, 15:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: columnas con altura dependiente

Hola Cristian
Supongo que a lo que haces referencia en el #7 es al valor table | table-row-group | table-cell. ¿Cierto?
Si no es así, lo siguiente está demás.
El problema de utilizar esas propiedades es que la familia de ie (6 y 7) no lo entiende, con lo que el efecto buscado no se logra y aparecen otros efectos indeseables.
Es lo que comentamos en este tema, ¿recuerdas?

Alexk, también un saludo para ti.
Estuve jugando un poco con el código que pones en tu ejemplo del #10.
Y con tu permiso me permito el atrevimiento de compartir contigo y el resto de lectores de este hilo unas observaciones sin finalidad alguna.

Tanto a '.contenido' como a '.lateral' sería conveniente que añadieses un 'clear', con el mismo valor que su float para forzar que cualquier contenido que añadas después de cerrarlos y dentro de '.all' se posicionen después de ellos. Ahora lo hace en la columna más corta (en la vertical), como es lógico que lo haga por los 'float'.

Y a tener en cuenta, si '.all' va a alojar otras cajas, qué ocurre con ellas. Prueba a añadir otro div dentro de '.all' y después de '.lateral', con un color de background. Verás que no aparece ese fondo por ninguna parte.
Prueba y comenta, Alexk. Y si no tienes ganas/tiempo de jugar, adelantamos la solución.

Todo lo anterior, como te decía, es solo un divertimento con css.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 30/08/2009, 19:50
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas con altura dependiente

pues llevas razon no lo habia notado... mas que un "ejemplo" de un sitio implementado con css es un "recurso"... es decir... funciona y tiene un enorme "pero" y es el que comentas... gracias...

Cita:
Tanto a '.contenido' como a '.lateral' sería conveniente que añadieses un 'clear',
m... ".lateral" seria un clear:right;, ya que con left se pondria debajo de ".contenido"

pero bueno la solucion seria agregar al reset
Código:
*{margin:0;padding:0;position:relative;}
y a nuestro div que estara debajo en este caso mmm ".footer" lo dejamos asi
Código:
.footer{background:#000;clear:both;color:#FFF;height:120px;width:100%;}
Cita:
Alexk. Y si no tienes ganas/tiempo de jugar, adelantamos la solución.
jejeje tiempo podria ser, pero ganas nunca falta... pero bueno gracias por la aclaracion, chao y suerte!...
  #13 (permalink)  
Antiguo 30/08/2009, 22:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

Hola Comunidad!

cito a kseso?: "Supongo que a lo que haces referencia en el #7 es al valor table | table-row-group | table-cell. ¿Cierto?"
Tienes razon, mil disculpas por no aclarar.

cito nuevamente a Kseso?: "Tanto a '.contenido' como a '.lateral' sería conveniente que añadieses un 'clear', con el mismo valor que su float". Coincidido con alexk, lateral salta a la siguiente linea.
mm ... no me quedó claro para que forzar el código.

En cuanto a la solución de alexk se adaptaría perfectamente a mi plantilla de joomla. (Lo que implica que mataría dos pájaros de un tiro )

Lo pruebo y les cuento. Pido perdon porque voy a demorar un poco en hacer los cambios pero es tal cual dice alexk .. lo unico que hace falta es tiempo .. aguante FDW y la pasión de sus miembros!

Saludos!

Última edición por cristian_cena; 30/08/2009 a las 23:14
  #14 (permalink)  
Antiguo 31/08/2009, 01:24
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: columnas con altura dependiente

no entro mucho a este foro pero deberias visitar la web de araudi.net tiene muchos ejemplos

http://araudi.net/ejemplos/columnas_equilibradas.html

eh trabajado con joomla wordpress drupal modx y te digo que el codigo html o css que generes no afecta en nada a usar el modulo
  #15 (permalink)  
Antiguo 31/08/2009, 05:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: columnas con altura dependiente

Cita:
Tanto a '.contenido' como a '.lateral' sería conveniente que añadieses un 'clear', con el mismo valor que su float...
Creí que estaba claro, pero veo que puede resultar ambiguo:
Con el mismo valor para 'clear' que cada uno tiene en su 'float'. Así que el elemento flotado a la izquierda tendrá "clear: left" y el flotado a la derecha "clear: right". Lo que hace que el que llamas .footer (Alexk) no necesite el clear. Es redundante asignarle el "clear" a los tres.

Y efectivamente para que aparezca el background, hay que posicionarlos.

Un saludo, y hasta el próximo "juego".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 31/08/2009, 08:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

adriancitov7, si lees desde el comienzo te darás cuenta que tengo dos columnas dentro de un contenedor y que según tengo entendido, en joomla! no puedo anidar #lateral a #contenido pues en #lateral van los módulos (menús) y en # contenido las noticias.

En cuanto al ejemplo de araudi.net por más bien resuelto que esté no me serviría para mi caso en particular porque si te fijas la div #lateral me quedaría anidada a #contenido por lo que el ejemplo de alexk es lo más indicado además a mi gusto está mejor resuelto.

Si, en cambio, ves que me equivoco, postea la solución y yo lo haré con mi sitio y seguimos el juego.

Saludos!
  #17 (permalink)  
Antiguo 31/08/2009, 09:16
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: columnas con altura dependiente

Yo creo, cristian, que si te atreves a modificar el index.php de joomla, puedes anidar perfectamente un módulo dentro de otro: sólo hay que fijarse cómo los llama el index y los inserta.
De todos modos, para eso hay un foro específico moderado por Metacortex, que como domina el tema de joomla, seguramente te indicará mejor.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 31/08/2009, 09:35
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas con altura dependiente

entiendo kseso? ya se... pero obtienes el mismo resultado por lo cual no lo veo tan redundante un solo "float" y un solo "clear" y no 2 "float" y 2 "clear" en el post anterior solo le doy clear el ".footer" no a los 3...

PD: Te comprendo... y se que no es lo correcto pero aplico "si se ve bien dajalo asi" jeje no es lo correcto pero ami me vale... gracias por la aclaracion... kseso? todos los dias se aprende algo chao saludos a todos!
  #19 (permalink)  
Antiguo 31/08/2009, 09:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: columnas con altura dependiente

Cita:
Iniciado por alexk Ver Mensaje
entiendo kseso? ya se... pero obtienes el mismo resultado por lo cual no lo veo tan redundante un solo "float" y un solo "clear" y no 2 "float" y 2 "clear" en el post anterior solo le doy clear el ".footer" no a los 3...
Cita:
Iniciado por kseso? Ver Mensaje
(sic) Es redundante asignarle el "clear" a los tres. (sic)
Sabias palabras las de Mikmoro, pues ya hemos jugado bastante con esta pelotita.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #20 (permalink)  
Antiguo 31/08/2009, 13:06
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

mikmoro: Muchas gracias, su aporte siempre es una enseñanza y un honor para mi su presencia en este hilo.

cito: "...sólo hay que fijarse cómo los llama el index y los inserta." Aclaro que ignoro por completo php, tenía entendido que joomla requería divs vacíos por lo que al crear mis divs en index.php lo hice del siguiente modo:


<div id="principal">

<div id="header">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>

<div id="izquierda">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>

<div id="contenido">
<jdoc:include type="component" />
</div>


<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>

</div><!--fin de principal-->



Gracias por la recomendación, me pasaré de sub-foro e intentare dar con alguna sabia respuesta de Metacortex.

Saludos! ... y a su servicio!
  #21 (permalink)  
Antiguo 31/08/2009, 14:33
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: columnas con altura dependiente

No soy el más indicado para meterme en este terreno, pero nada te impide ponerlo así:

Cita:
<div id="izquierda">
<jdoc:include type="modules" name="left" style="xhtml" />

<div id="contenido">
<jdoc:include type="component" />
</div>
</div>
De forma que generaría #contenido dentro de #izquierda, sin más.
__________________
Visita mi nueva web idplus.org
  #22 (permalink)  
Antiguo 31/08/2009, 17:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

Mikmoro:

entiendo lo que me dices pero tengo entendido que joomla solo permite anidar etiquetas <jdoc:> a las etiquetas <div> ahora debes saber que mis conocimientos son muy básicos ya que no manejo php ni DHTML.

ya hice la consulta en el sub-foro que me aconsejaste:(http://www.forosdelweb.com/f119/colu...joomla-731733/)

alexk:

Aplique el truco y se comporta de maravillas,

edito: borro el link por el momento porque estoy con problemas que no tocan a este hilo. Gracias y disculpas alexk y kseso?

Saludos!

Última edición por cristian_cena; 31/08/2009 a las 23:14
  #23 (permalink)  
Antiguo 31/08/2009, 17:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: columnas con altura dependiente

Hola Cristian
Tienes un problema con las imágenes vía background. No se visualizan.
También en el html generado no se abre <body> y en la línea 244 se cargan otra vez estilos (habiendo cerrado ya el 'head').

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #24 (permalink)  
Antiguo 31/08/2009, 20:58
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: columnas con altura dependiente

Cita:
Iniciado por kseso? Ver Mensaje
Tienes un problema con las imágenes vía background. No se visualizan.
También en el html generado no se abre <body> y en la línea 244 se cargan otra vez estilos (habiendo cerrado ya el 'head').

Kseso?:
Eso pasó porque justo agregué el hash _overflow:auto; para internet explorer cosa que no resultó; ¿porque lo puse? por probar, porque ya me volvió loco el explorer. (Te pido disculpas Kseso? por realizar este cambio y no avisar ya que dejé aquí el vínculo y fué mi responsabilidad su pérdida de tiempo.)

Prueba ahora: En zafari, opera, mozilla y chrome funciona. Pero la mayoría usa explorer asi que tendre que hacer que funcione también para el

Saludos!

Última edición por cristian_cena; 01/09/2009 a las 15:51
  #25 (permalink)  
Antiguo 31/08/2009, 21:16
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: columnas con altura dependiente

:S ya me lie!... jeje veo varios pero ligeros descuadres en FF 3... nose que pasa pero si quieres corregir algo abre otro tema siendo espeficico... (consejo para que almenos yo puede antender jaja sino no pasa nada) chao

PD: me gusta poner : adios : nose por que
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 18:54.