columnas con altura dependiente

[cristian_cena]

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.

[bex]

Podés meter #izquierda dentro de #contenido y darle un heigth del 100%. Así si #contenido crece también lo hará #izquierda.
Saludos!

[kseso?]

"Columnas equilibradas" Busca por esos términos.
Tienes ejemplos en
www.araudi.net
http://matthewjamestaylor.com/
www-cssplay.co.uk

[cristian_cena]

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.

[cristian_cena]

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

[bex]

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!

[cristian_cena]

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

[alexk]

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

[cristian_cena]

Alexk:

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

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

Saludos!

[alexk]

sin funciona puedes ver el demo aki
chao y suerte!...

[kseso?]

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

[alexk]

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...

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%;}

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!...

[cristian_cena]

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!

[adriancitov7]

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

[kseso?]

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".

[cristian_cena]

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!

[Mikmoro]

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.

[alexk]

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!

[kseso?]

Iniciado por alexk

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...

Iniciado por kseso?

(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

[cristian_cena]

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!

[Mikmoro]

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

<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.

[cristian_cena]

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!

[kseso?]

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

[cristian_cena]

Iniciado por kseso?

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!

[alexk]

: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