Modifica la posición de tus elementos [Jan. 17, 2012, 11:21 p.m.]

Por ahora, todas las páginas que hemos armado han sido de una sola columna. En esta tarea vamos a aprender cómo crear layouts variados, tales como:

Para hacer esto, primero necesitamos conocer algunos conceptos nuevos:

El Modelo de Caja (Box Model)

Cuando vayamos a armar nuestra página, debemos pensar en cada elemento HTML como si fuera una caja. Las cajas pueden estar una arriba de otra o una dentro de otra. Individualmente, cada caja tiene los siguientes componentes:

La manera más sencilla de comprenderlo es viendo un ejemplo. Copia este código en un archivo HTML y ábrelo con tu navegador.

<html>
<head>
  <title>El Modelo de Cajas</title>
  <meta charset="utf-8" />
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background: #FFFFDE;
    }
    

    .div1 {
      margin-top: 5px;
      margin-right: 0;      
      margin-bottom: 5px;
      margin-left: 40px;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      border: 2px solid #0000FF;
      width: 960px;
      background: #DDF7F7;
    }
  

    .div2 {
      margin-top: 0;
      margin-right: 0;      
      margin-bottom: 10px;
      margin-left: 0;
      padding-top: 10px;
      padding-right: 30px;
      padding-bottom: 0;
      padding-left: 15px;
      width: 500px;
      border: 0;
      background: #E0FFC5;
    }

  </style>
</head>
<body>
  El elemento &lt;body&gt; es la caja "exterior" que contiene a todas las otras cajas. En este caso, le pusimos fondo color amarillo. 
  
  <div class="div1">
    Esta es la caja del primer &lt;div&gt;. Le pusimos fondo color celeste y un borde color azul.
  </div>

  <div class="div2">
    Esta es la caja del segundo elemento &lt;div&gt;. Le pusimos fondo color verde, sin borde.
  </div>

  Intenta modificar las propiedades margin, padding y width para que veas cómo funciona cada una.

</body>
</html>

Ahora, ve modificando las propiedades margin, padding y width para que veas cómo funciona cada una.

Tres maneras para desplegar elementos

Todos los elementos en HTML se despliegan en alguna de estas tres maneras:

En Bloque
El elemento ocupa todo el ancho de la página (display: block;). Algunos elementos que se despliegan como bloque por defecto son: <p>, <div>, <h1> … <h6>, <ul>, <ol>, y <li>.
En línea
El elemento ocupa solo el ancho necesario para su contenido (display: inline;). Algunos elementos que se despliegan en línea por defecto son: <a>, <img />, <span> y <em>.
No se despliega
El elemento no se muestra en la página (display: none;). Algunos elementos que no se despliegan por defecto son: <meta /> y <style>

Al igual que hicimos arriba, la manera más fácil de comprender el elemento "display" es viéndolo en un ejemplo. Copia este código en un archivo HTML y ábrelo con tu navegador:

<html>
<head>
  <title>Block vs Inline</title>
  <meta charset="utf-8" />
  <style type="text/css">
    p {
      display: block;
      background: #E5FFD9;
    }

    span {
      display: inline;
      background: #FFEFDA;
      border: 1px solid #FF6122;
    }

    .asinline {
      display: inline;
    }

    .invisible {
      display: none;
    }
  </style>
</head>

<body>

  <p>Por defecto, los elementos &lt;p&gt; se despliegan como bloque.</p>

  <p>Si agregamos varios &lt;p&gt;, aparecerán uno abajo del otro.</p>

  <span>Los elementos &lt;span&gt; se despliegan en línea.</span>

  <span>Si agregamos varios &lt;span&gt;, aparecerán uno alado del otro.</span>

  <p>Podemos insertar <span>elementos &lt;span&gt;</span> dentro de elementos &lt;p&gt;.</p>

  <p class="asinline">Mediante CSS, podemos hacer que los elementos &lt;p&gt;</p> 

  <p class="asinline">se desplieguen en línea.</p>

  <p class="invisible">O inclusive, que no se muestren en absoluto.</p>

  <p>Modifica los valores de "display" en el CSS para que veas cómo funciona esta propiedad.</p>

</body>

</html>

Ahora ve modificando los valores de la propiedad "display" para que veas qué efecto tiene cada una de las tres opciones.

Posición

9. Dale Estilo a tu Página Web

Modifica la posición de tus elementos [Jan. 17, 2012, 11:21 p.m.]