Tutorial: Modelo de Cajas
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: Introducción al CSS para leer este otro.
Una forma muy extendida de maquetar es utilizar el modelo de cajas y hacerlas flotar. El modelo de cajar permite tratar elementos como rectángulos que se van acomodando a su entorno. Para ello debemos darles la propiedad display:block aunque algunos elementos ya la tienen por defecto, por ejemplo <div>. Vamos a utilizar dos propiedades nuevas: border y background para poder visualizar las cajas.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Aqui estamos armando cinco cajas con tamaños y colores de fondos distintos, quedarán una debajo de la otra.
La W3C propone entonces un modelo de cajas para definir tamaños, márgenes y comportamientos:
Vamos a probar entonces el comportamiento de Flotar. Esto es darle a las cajas una especie de "fuerza de gravedad" para que se acomoden segun entren en la página. Por ejemplo, para que las cajas se acomoden en la punta superior izquierda pondremos float:left y para que lo hagan en la esquina superior derecha usaremos float:right.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black; float:left; }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Haz la prueba de cambiar el float:left; por float:right;
Para determinar el orden en el que caerán los elementos es importante el orden en el que estan puestos en el html. Vamos a ver un ejemplo donde se utiliza con mas claridad, también utilizaremos márgenes (margin) que es la distancia que debe dejar el elemento con los demás y rellenos (padding) que es la distancia entre el borde y el contenido:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div#cabecera { margin:5px; text-align:center; padding:10px; height:20px; width:375px; border:1px solid gray; float:left }^n div#columna_uno {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n div#columna_dos {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Cabecera de la pagina</div>^n <div id="columna_uno"> Primera columna del sitio Primera columna del sitio Primera columna del sitio</div>^n <div id="columna_dos"> Segunda columna del sitio Segunda columna del sitio Segunda columna del sitio </div>^n </body>^n</html>
Expliquemos un poco los tamaños. En la cabecera hemos dejado 5px de margen, 5px de relleno, 1px de borde (todo esto de cada lado) y un ancho de 375px.
La cuenta da: 5+1+10+375+10+1+5 = 407px.
En las cajas de abajo, en la primera tenemos: 5px de margen, 1px de borde, 5px de relleno (esto de cada lado) y 140px de ancho: 5+1+5+140+5+1+5 = 162px
La segunda caja de abajo es lo mismo pero con 223px de ancho, entonces: 5+1+5+223+5+1+5 = 245px
y 152px + 245px = 407px. Que es lo mismo que mide la caja de la cabecera, asi es como quedan alineadas nuestras columnas
Espacio de pruebas
Trackback URI: http://www.siteup.com.ar/index.php/trackback/11
Fuentes XML de comentario: RSS | Atom
Dejar un comentario