Componer un diseño de 3 columnas en XHTML y CSS

agosto 12, 2007

Visto en CRISTALAB.

Vamos a intentar hacer la base de una página web en XHTML 1.0 Strict & CSS con 5 apartados, dos son los típicos: header y footer, pero los otros tres varían un poco, normalmente se suelen hacer las páginas con dos columnas, pero otras muchas veces es necesario usar 3, por ejemplo en algunas bitácoras, páginas de periodismo, o simplemente por cualquier cosa que creas que puede tener mayor navegabilidad con 3 columnas en vez de dos.Para hacer este tutorial es necesario que tengas algunos conocimientos de CSS y XHTML, aunque no demasiado porque considero que es fácil de entender, pero algunas cosas no las explico porque doy por hecho que se deben saber.Para empezar vamos a estructurar nuestro XHTML, para ordenar bien todas las “piezas”, en este caso las divs.

Código:

 

/*Esta parte es la que se encarga de decirle al navegador qué tipo de lenguaje está usando*/
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
       /*Aquí nos dice el título de la página, el codificado y las vinculaciones a las hojas de estilo externas, en este caso ya hemos creado una llamada base.css*/
       <head>
       <title>Base3</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link href="base.css" rel="stylesheet" type="text/css" />
       </head>
       /*Aquí empieza la manteca*/
       <body>
       /*Creamos las primeras divs, la primera será la div "container", que se encargará de albergar a todas las demás, seguidamente creamos la div header, que es donde irá el encabezado principal de nuestra página.
       Después de éstas creamos, por este orden, las divs "izquierda", "derecha" y "principal"
       Por último creamos footer*/
   <div id="container">
   <div class="header"></div>
   <div class="izquierda"></div>
   <div class="derecha"></div>
   <div class="principal"></div>
   <div class="footer"></div>
   </div>
   </body>
   </html>

Ahora mismo no aparecería nada en el navegador porque aún no hemos definido los estilos de las mismas, pero es justo lo que vamos a hacer ahora mismo.Creamos un nuevo documento CSS y lo guardamos como “base.css”, y empezamos a escribir, en primer lugar las características generales que tendrá nuestra página, una vez terminadas esas características ya podemos empezar con las específicas de cada div.
Así que tendríamos que escribir esto:
Código:

 

 /*Aquí vamos a definir las propiedades de la página en general, más adelante definiremos las de las cajas principales*/
       /*formatos de párrafo, linea de separacion, encabezados 1 al 6, tablas, vínculos (en sus 4 estados) y body respectivamente*/
body {
      font:11px Verdana, Arial, Helvetica, sans-serif;
      background-color:#FFF;
     text-align : justify;
     line-height: 10px;
 }
 p {
     font-size:11px;
     color: #586885;
     line-height: 120%;
}
hr {
     display:none;
 }
h1 {
     font-size:25px;
     text-align : left;
     color : #666666;
     margin:0;
}
h2 {
     font-size:20px;
     text-align : left;
     color:#486895;
     text-transform: capitalize;
}
h3 {
     font-size:18px;
     text-align : left;
     color : #666666;
}
h4 {
     font-size:15px;
     text-align : left;
     color : #666666;
}
h5 {
     font-size: 13px;
     text-align : left;
     color : #666666;
}
h6 {
     font-size:12px;
     text-align : left;
     color : #666666;
}
td {
     font-size: 12px;
     text-align : center;
     color : #586885;
}
a {
     font-size:12px;
     color:#325FA0;
}
a:link {
     text-decoration: none;
}
a:visited {
     text-decoration: none;
     color:#325FA0;
}
a:hover {
     text-decoration: none;
     color:#000066;
}
a:active {
     text-decoration: none;
     color:#0099CC;
}

Por tanto ya quedan definidas las características más generales.Ahora podemos empezar con las características específicas de cada div.1- “div container: ” Código:

 

#container {
       background-color:#DDE6AC;
       border-style:solid;
       border-color:#000000;
       margin: 0 auto;
       width:700px;
       height:auto;
}

Con el valor de margin quedará centrado, no hace falta repetir otra vez 0 auto porque ahora mismo el 0 se refire a arriba y abajo, y el auto a los lados.2º- En header le damos el mismo ancho que al contenedor (si queremos podemos darle menos), la altura que queramos, colores etc…
Lo que más nos interesa es que debe estar centrado con el contenedor, por eso mirad las propiedades de margin, tiene cero arriba, a la derecha también, abajo tiene 10 px, y a la izquierda de nuevo cero píxeles, por el mismo orden que los he mencionado. Sólo he definido el borde de abajo porque los demás tocan a los del contenedor y resulta feo, y al dejarlos así no aparecen por defecto.
Código:

 

.header{
       width:700px;
       height:140px;
       background-color:#CC9933;
       border-bottom-style:solid;
       border-bottom-color:#000000;
       margin:0 0 10px 0;
}

3º En la div “izquierda” vamos a ajustar los valores para que tenga una anchura de 100píxeles, una altura que dependa del contenido que tenga dentro, y le vamos a dar un margen de 5px a la izquierda, además de hacer que se sitúe a la izquierda mediante “float”.
Código:

 

.izquierda{
       width:100px;
       height:auto;
       background-color:#EFEFEF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 0 0 5px;
       float:left;
       padding:3px;
}

Como en esa div he pensado que pondré una lista de links, voy a definir las propiedades de la lista:
Código:

 

.izquierda ul {
       font:bold 11px Verdana, Arial, Helvetica, sans-serif;
       color:#586885;
       line-height: 140%;
       text-transform:capitalize;
}

4º El la div “derecha” vamos a ajustar los valores para que tenga una anchura de 150píxeles, una altura que también dependa del contenido que tenga dentro, y le vamos a dar un margen de 5px, además de hacer que se sitúe a la derecha.
Código:

 

.derecha{
       width:150px;
       height:auto;
       background-color:#FFFFDD;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 5px 0 0;
       float:right;
       padding:5px;
}

5º Ahora le toca a la caja que contendrá la información principal de nuestra página (la div “principal”) en este caso queremos que se ajuste al espacio que sobra a lo ancho del contenedor, por que calculamos, 700px(anchura del mismo)-100px(anchura de la div “izquierda”)-150px(anchura de la div “derecha”)-20px(total de los margins)-34px(total de los paddings)-6px (total de los borders)=390px.Además de esto, también queremos que quede situado entre las cajas que la rodean, por lo que calcularemos el espacio que debería quedar a su izquierda y después poner el mismo valor en su “margin-left.”**Repito, hay que prestar especial atención a contar TODOS los valores que se utilizarán, incluidos, márgenes, padding, bordes…**ç
Código:

 

.principal{
       width:390px;
       height:auto;
       background-color:#FFF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 5px 0 117px;
       padding:10px;
}

6º Ahora le toca al footer, sobran explicaciones…
Código:

 

.footer{
       width:auto;
       height:30px;
       background-color:#FFF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:5px;
}

…y a su “h6”
Código:

 

.footer h6{
       text-align:center;
       text-transform:uppercase;
       margin:5px auto;
       color:#666666;
       font-size:10px;
}      

Bueno, ya está todo definido, ahora tendríamos que ver una página mas o menos formada en nuestro navegador, digo más o menos por que aun no hemos puesto nada de información, si queréis, podéis sustituir el XHTML de antes por éste, o si no, lo rellenáis como queráis, pero por lo menos ya tenéis este de ejemplo, que además es correctamente semántico,ok??
Resultado final
Quedaría así… Código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Base3</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link href="base.css" rel="stylesheet" type="text/css" />
  </head>
 <body>
   <div id="container">
   <div class="header"><h1>Base3</h1></div>
   <div class="izquierda">
      <ul>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
              <li><a>vinculo</a></li>
      </ul>
      </div>
      <div class="derecha">
              <p>aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
              <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px"    src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
              <hr/>
              <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
      </div>
      <div class="principal">
              <h2>Título del contenido</h2>
              <h3>Subapartado</h3>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
              <p>Escribo algo para rellenar...</p>
      </div>
      <div class="footer">   
              <h6>base3 2005, todo el C_C reservado</h6>
      </div>
   </div>
 </body>
 </html>
     

Aquí estan los ejemplos:Archivo de ejemplo sin estilos
Archivo terminado
Archivo CSS
Un truco para que se vea igual en IE, ya que el modelo de cajas por el que se guía no es el mismo al del W3C es hacer una nueva hoja de estilos que sólo pueda leer IE, en este caso añadimos en el head de nuestro documento este comentario:
Código:

 

 <!--[if IE]>
   <link rel="STYLESHEET" type="text/css" href="url_de_nuestros_estilos.css" />
   <![endif]-->  .

En esa hoja haremos los cambios pertinentes y así debería verse bien, por ejemplo, la página que acabamos de modelar tiene una pequeña diferencia de margenes en IE con relación a Firefox, se puede solucionar haciendo una hoja de estilos solo para IE y cambiando los margenes en ella hasta que quede igual.
Por cierto, todos los códigos que he posteado validan a la perfección.

Anuncios

2 Responses to “Componer un diseño de 3 columnas en XHTML y CSS”

  1. iron Says:

    Este tutorial es copiado y pegado de cristalab.
    siempre hay que decir la fuente

  2. ojasso Says:

    Es cierto iron. Se me habia olvidado poner la fuente del tutorial. Peron, voy a poner el link!
    Gracias por avisas y de nuevo perdon!


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: