Box Model

  • Tutorial: Estilizando las cajas

    Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: El Modelo de Cajas para leer este otro.
    En la entrada anterior lo último que se explicó fue a utilizar el modelo de cajas para crear una página a dos columnas. Era algo como esto:

    <!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#barra {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n         div#contenido {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n      </style>^n   </head>^n   <body>^n      <div id="cabecera">Bienvenidos a mi sitio web</div>^n      <div id="barra">^n         <ul>^n            <li><a href="#">Inicio</a></li>^n            <li><a href="#">Blog</a></li>^n            <li><a href="#">Fotos</a></li>^n            <li><a href="#">Contacto</a></li>^n         </ul>^n      </div>^n      <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espíritu de <strong>colaboración</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n   </body>^n</html>

    Cambiando solo el estilo podemos conseguir cosas muy bonitas, vamos con unos ejemplos simples. Algunas de las instrucciones nuevas que vamos a usar son: background:url(ruta_de_la_imagen); para poner imágenes de fondo,

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n   <head>^n      <title>Mi primer sitio web</title>^n      <style>^n         body { background:url(images/tree.gif) no-repeat #c0dbbc; font-size:12px; font-family:Verdana,Arial }^n         div#cabecera { margin:5px; font-size:16px; color:#41500d; font-weight:bold; text-align:right; padding:10px; height:20px; width:375px; float:left }^n         div#barra {width:150px;  height:150px; margin:5px; background:url(/images/leaves.gif) no-repeat; float:right;}^n         div#barra a {color:#8c4317; font-weight:bold;}^n         div#barra ul {padding-left:30px;}^n         div#barra li {list-style:none; background:url(/images/item.gif) no-repeat; padding-left:22px;}^n         div#contenido {margin:25px 0 0 20px; padding:5px; width:240px; float:left;}^n      </style>^n   </head>^n   <body>^n      <div id="cabecera">Bienvenidos a mi sitio web</div>^n      <div id="barra">^n         <ul>^n            <li><a href="#">Inicio</a></li>^n            <li><a href="#">Blog</a></li>^n            <li><a href="#">Fotos</a></li>^n            <li><a href="#">Contacto</a></li>^n         </ul>^n      </div>^n      <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espiritu de <strong>colaboracion</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n   </body>^n</html>

    Una muy poderosa herramienta para comprender y realizar CSS es Firebug para el navegador Firefox. Utilizando la opción Inspeccionar puede verse desde el navegador el código HTML y CSS y como se comportan entre si. No tengas miedo de explorarlo a fondo.

    Espacio de pruebas

  • 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:
    Modelo de Cajas
    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