Layout 2 columnas con CSS, ayuda please!

cmezauni · #1 (**permalink**) 15/03/2005, 13:43

En el enlace:

http://www.coes.org.pe/coes/est1999_...uipamiento.htm

He dividido el layout en 2 columnas, la cual son 2 divs llamados L y R (left & right, izquierda y derecha) Muestro el CSS

div#L {position:absolute; left:0; width:178px; background-color:#DDDDDD; height:100%; padding-bottom:0px;}
div#R {margin-left:178px; min-width:350px;}

El asunto es que la columna de la izquierda debería tener el fondo gris en toda la página, como el contenido es largo (muchas tablas de data tabular), no reconoce el height:100%.

Existe una página análoga, pero en vez de CSS usa tablas para el layout (lo cual es errado):

http://www.coes.org.pe/coes/est1999_...dasenergia.htm

Sin embargo aqui si toda la columna de la izquierda tiene fondo gris.

Por favor indicarme como puedo lograr el mismo efecto con CSS para el primer link?

Saludos cordiales.

CHRISTIAN MEZA VILLAFUERTE

Remo:Erdosain · #2 (**permalink**) 15/03/2005, 14:07

Fijate si te sirve este thread: http://forosdelweb.com/showthread.php?t=277033

cmezauni · #3 (**permalink**) 15/03/2005, 14:14

Remo, en este thread hablan de una imagen como fondo, aqui no uso imagen, sino le asigno un color de fondo, en este caso el gris. Yo quiero que se extienda hasta el final de la página, aunque haya scroll-bar vertical.

programeitor · #4 (**permalink**) 15/03/2005, 14:30

Me parece que se puede con height:auto.

cmezauni · #5 (**permalink**) 15/03/2005, 14:33

No funciona con height:auto programeitor.

Me corta el fondo. Fijate en los 2 links, el primero es el que no funca, (está hecho en capas CSS) y el segundo es el antiguo (con tablas).

programeitor · #6 (**permalink**) 15/03/2005, 14:35

prueba top:0;bottom:0

cmezauni · #7 (**permalink**) 15/03/2005, 14:44

div#L {position:absolute; left:0; width:178px; background-color:#DDDDDD; height:100%; padding-bottom:0px;}
div#R {margin-left:178px; min-width:350px;}

Ya considera eso y nada, amigo programeitor.

programeitor · #8 (**permalink**) 15/03/2005, 15:04

¿que ya lo considera?.......¿donde? ,¿no sera el padding-bottom ,no?

El padding-bottom lo puedes quitar ,añadele top:0;bottom:0; ademas quitale el height, se me olvido decirtelo antes, que es lo que hace que se quede corto.

De todas formas ya estoy indeciso ,Ahora mismo voy a probar este problema.

programeitor · #9 (**permalink**) 15/03/2005, 15:22

Pues es verdad tio, no doy ni una, estaba yo muy convencido ,lo estoy probando y no lo consigo ni a la de tres ,como alguien no nos heche una mano lo vas a tener que solucionar insertandole una tabla al div, creo?

cmezauni · #10 (**permalink**) 15/03/2005, 15:39

Si pues, el asunto es que no funca, deberia funcionar como la tabla. No se porqué no se extiende hasta el final.

Remo:Erdosain · #11 (**permalink**) 15/03/2005, 16:36

Un DIV no es una tabla.
Un DIV crece hasta contener todo los elementos hijos (que contiene).
La única forma lo bastante compatible es usar una imagen de fondo como se explica en el thread que mencione antes.

programeitor · #12 (**permalink**) 15/03/2005, 16:51

Esta es una solucion:

<style> /* programeitor 2005 .dos paneles de la misma altura */
body,table,td{height:100%;margin:0;padding:0;borde r:0 solid black;border-collapse:collapse;vertical-align:top;}
</style>
<table>
<tr>
<td width=178px bgcolor=silver>
menus
</td>
<td width=350px bgcolor=gray>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p>
contenido<p></td>
</tr>
</table>

frijolerou · #13 (**permalink**) 15/03/2005, 20:55

Cmezauni:

Antes que nada:

<link rel=stylesheet type="text/css" href="../../../include/estadisticas.css">
<SCRIPT src="../../../include/estadisticas.js"></script>

Esas lineas debes ponerlas entre <head> y </head>, NO entre <html> y <body> como lo tienes ahora.

Encuanto al tema de las alturas... lo unico que se me ocurre por el momento es javascript. En el evento onload del documento, detectar la altura del div "R" y con CSS darle esa misma altura al div "L"

<script type="text/javascript">
function alturas(){
var divleft = document.getElementById('L');
var divright = document.getElementById('R');
divleft.style.height = divright.offsetHeight;
}
window.onload = alturas;
</script>

Es la unica solucion que se me ocurre por el momento.

kemie · #14 (**permalink**) 16/03/2005, 01:08

Puedes checar este ejemplo, que funciona sin necesidad de javascript:
http://disenorama.com/headerfooter_cols.htm

Vice · #15 (**permalink**) 16/03/2005, 05:58

He estado haciendo unas pruebas y lo he solucionado de una forma, que tal vez no sea la mejor, pero bueno, no usa javascript, sólo css:
Estilos:
div#T {position:absolute; left:0; top: 0; background-color:#DDDDDD;}
div#L {position:absolute; left:0; bottom:0; width:178px; background-color:#DDDDDD; height:100%;}
div#R {margin-left:178px; min-width:350px; background-color:white;}

Añado una nueva capa T que contiene a las otras dos.
<div id=T>
<div id=L>
</div>
<div id=R>
</div>
</div>
Espero que te sirva.
Un saludo.

cmezauni · #16 (**permalink**) 16/03/2005, 07:34

Hola Vice.

Tu solución me funcionó solamente para Opera 7.54.

Lamentablemente en Netscape 7.0, Mozilla Firefox 1.0.1 y en Internet Explorer 6 SP1 sigue el problema anterior.

Cabe destacar que uso los 4 navegadores como testeo.

frijolerou · #17 (**permalink**) 16/03/2005, 10:25

Kemie: el problema de utilizar height:100% en el selector html, es que ese 100% cubre sólo la altura del primer pantallazo (es decir, el area visible sin haber utilizado el scrollbar). Pero en el caso que de que el contenido del div sea muy extenso y necesitas moverte mediante el scrollbar, el div no aumenta su altura en relacion al contenido.

Para solucionar eso, para el div en vez de usar height:100% hay que usar min-height:100% (y algun equivalente para IE). De esa manera el div va a crecer en relacion a la cantidad de texto que tenga dentro. Claro que en el caso preciso del ejemplo que posteaste, eso involucraría otra serie de cambios, pero ese ya es otro cuento.

Sin embargo, en el caso del sitio posteado por quien abrió este foro, el uso de min-height:100% tampoco sería la solución. Ya que en este caso, para que el div "L" siempre llegue hasta el final de la pagina, no depende de su propio contenido, sino del contenido del div "R".

Es por eso que la unica solucion que encontré fue equiparar ambas alturas con javascript.

Remo:Erdosain · #18 (**permalink**) 16/03/2005, 18:14

frijolerou: height:100% es interpretado por Internet Explorer/Win como min-height:100%.

walo · #19 (**permalink**) 16/03/2005, 18:33

el height solo te toma el tamaño de la ventana, no te toma si la pagina es mas alta que la ventana.

frijolerou · #20 (**permalink**) 16/03/2005, 23:11

Remo: esa era la parte que me faltaba :D

cmezauni · #21 (**permalink**) 17/03/2005, 07:19

David Muñoz, una consulta, disculpame mi ignorancia por favor.

Que diferencia hay entre height:100% y min-height:100% ???

CHRISTIAN

frijolerou · #22 (**permalink**) 17/03/2005, 08:56

Veamos:

En los navegadores que respetan los estándares (como Firefox) height define un tamaño fijo para el elemento. Por ejemplo si defines el height para un div en 50px, y en este div metes un texto mucho más largo que eso, el div seguirá midiendo 50px de alto, y el texto seguirá su flujo sin afectar a su contenedor, y se verá como si parte del texto estuviera fuera del div.

En los navegadores que siguen los estándares, min-height define una altura minima para el elemento, pero será flexible si le metes un contenido mucho mayor a la altura minima definida. Por ejemplo, si defines el min-height de un div como 50px, si ingresas una sola linea de texto, el div seguirá midiendo 50px de alto, en cambio si ingresas un texto mucho más larog que sobrepase los 50px de altura, el div irá creciendo en relacion a la cantidad de texto.

¿Y que pasa en el caso e Internet Explorer?. Este browser no admite min-height, pero el atributo height cumple la misma función.

cmezauni · #23 (**permalink**) 17/03/2005, 10:41

La verdad, me has aclarado bastante mi duda. Gracias David.

Aprovecho tu buena fe, para preguntarte 2 cosas:

1) Sabes que <hr> tiene en sus propiedades "noshade", la cual elimina el efecto de sombras. Cual es su análogo en CSS?

2) Yo uso en muchas páginas un DIV o un TD de un TABLE con ONMOUSEOVER para mostrar un cuadro de texto. Me ayudo de funciones javascript. Como puedo hacer esto con puro CSS, sin javascript?

Gracias nuevamente.

frijolerou · #24 (**permalink**) 17/03/2005, 11:15

cmezauni: para los <hr> debes aplicar el estilo de esta manera:

hr{
color:red;
background-color:red;
border:0;
height:1px;
}

con eso te queda una simple linea horizontal, ahi le vas dando el grosor que requieras con "height" (se usa "color" y "background-color" para que sea compatible con IE y el resto d enavegadores)

Sobre la segunda pregunta... para usar solo CSS creo que debes trabajar con la pseudo-clase :hover (pero el problema es que IE permite esa pseudo-clase solo en los elementos <a> con un href...

No manejo mucho ese tema, asi que podrias revisra sobre las seudo-clases en:

http://ignside.net/man/css
http://www.w3schools.org/css

cmezauni · #25 (**permalink**) 17/03/2005, 11:56

Ok David, gracias. Cualquier duda que tenga te la haré saber.

Una ultima cosa, un buen libro sobre CSS 2 y los estándares web? Aqui en mi querido país, Perú, no he encontrado nada, hay HTML pero son libros viejos que siguen enseñando font face bgcolor y tables.

programeitor · #26 (**permalink**) 18/03/2005, 14:35

.

Hola amigos.

He hecho algunas averiguaciones respecto del layuot de dos columnas., He pensado que metiendo el div chico dentro del grande podria solucionar el tema.

<style>
#chico {
position:absolute;
left:-178px;top:0;width:178px;height:100%;
background:silver;}
#grande {position:absolute;
left:178px;top:0;width:350px;height:;
background:gray;}
</style>

Resulta ,que si a la capa grande le doy height:100% va perfecto en IE ,pero no en NS...., y si no le asigno ningun height:; hace todo lo contrario, va bien en NS y en IE no funciona. ,¿que os parece?

<div id=grande>
<div id=chico>
a<p>a<p>a<p>a<p>a<p>
</div>
a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
</div>

Bueno, espero vuestars respuestas. Saludos.

.