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

Anuncios




5 programas para el estudio

10 01 2008

Aqui les dejo 5 de los mejores programas para estudiar y sacarle jugo al maximo… y los ganadores son:

PhpMailerEste es una libreria de PHP que permite realizar tareas varias al momento de enviar un email. Una de las cosas por lo que se destaca, es la posibilidad de attachar (adjuntar) un archivo. Ademas es muuuuuuy facil de configurar y hay ayudas por toda la web. Download

Five3DEste es unprogramita escrito con AS3 (Action Script 3) el cual te permite crear escenarios en 3d de una manera bastante sencilla, es uno de los mejores programas flash que he encontrado, es para sentarse y tocaaar y tocaaar…

GoogieSpellEs un corrector ortográfico online, uno baja el paquete y lo instala en la web que necesita, y este poderoso programa se conecta con el diccionario de google y automaticamente te corrige los herrores que cometiste… escrito en Ajax.Download

AmChartsEste programa ya lo mensione antes pero vale la pena colocarlo dentro de estos 5 programas para estudiar (y sacarle jugo). Es un paquete que te pocibilita crear graficos excelentes en flash de la manera mas que sencilla, dando un aspecto muuuy profesional a cualquier informe que generes.

OpenCubeEl mas reciente descubrimiento (propio*), es un programa online ( a diferencia de los anteriores este no se implementa a tu web) que te genera automaticamente menues con CSS y Javascripts muy buenos, tiene mil opciones y se pueden hacer muchas cosas, vale la pena ponerse a utilizarlo, además tiene toda la onda de un programa de escritorio pero sin serlo.

Cabe destacar que esto no es lo unico que posteare sobre cada uno, lo mas provable es que realise informes mas detallados de cada uno, si no es que me copo con otras cosas jaja..

Que lo disfruten!!! y despues me cuentan eh?

PD: Cuando digo propio, estoy incluyendo a Francisco… sino se va a enojar…