CSS: height:100%

25 06 2008

Mil veces queremos hacer que nuestros div´s se escalen al 100%… algunos colocan tablas dentro de los divs…(absurdo)… otros se resignan y vuelven a las tablas… pero hoy vamos a sacar el manto de misterio a este problema…

Lo primero es el DOCTYPE… al contener doctype, estamos especificando que tipo de documento estamos utilizando… y por lo tanto… le estamos indicando al navegador como tratar todos nuestros elementos html…

Si no especificamos este parametro y solo colocamos el tag <html> solo… 50% de nuestro problema ya esta resuelto…

Esto funciona colocando un div de la siguiente manera:

<html>
<head>
<title>prueba</title>
</head>
<body>
<div style="height:100%;">
hola mundo! al 100% de alto!
</div>
</body>
</html>

Ahora… si tubieramos a nuestro div dentro de otro div… y este ultimo no tubiera el atributo height:100%;... nunca funcionaria... entonces... tanto el div contenedor ... (div padre) como el div contenido (div hijo) deben tener especificados!.

ejemplo: INCORRECTO


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba</title>
</head>
<body>
<div id="contenedor">
<div id="hijo" style="height:100%;">
hola mundo! al 100% de alto!
</div>
</div>
</body>
</html>

ejemplo: CORRECTO!


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba</title>
</head>
<body>
<div id="contenedor" style="height:100%;">
<div id="hijo" style="height:100%;">
hola mundo! al 100% de alto!
</div>
</div>
</body>
</html>

Espero que les sea tan util como ami… pruebenlo y luego me dicen!…





Comparativa de Lightbox

2 06 2008

Ya muchos conocen el famoso efecto ligthbox… pero cual de todas las librerias es la mejor, o la que mejor se adapta a nuestras necesidades?… bien… aquí esta la respuesta… una web muy bien cuidada que nos indica mediante un cuadro de doble entrada tooooodo lo que necesitamos saber sobre estas librerias… nombre… pesos y tamaños, capacidades, links… etc… realmente una nueva joya de la web.
Que les sea util!…

el Recurso aqui