Layout fijo a elástico en sólo 4 caracteres

5/oct/2006 18

Un layout fijo puede ser más fácil de construir para algunos, ya que todos los elementos están ordenadamente dispuestos, cada uno con su ancho fijo. Reseteando el margin y padding al principio de todos los tags, torna más fácil lograr una hegemonía entre browsers:

* {
     margin: 0;
     padding: 0;
}

Mostraré una técnica bastante simple de diagramar un sitio utilizando CSS, de manera que hacerlo fijo o elástico (líquido le suelen llamar algunos) sea cosa de cambiar 4 caracteres en tu hoja de estilos. De un principio:

Comenzaremos a diagramar un sitio de 3 columnas, 2 laterales (menú izquierdo y publicidad derecha) y al medio el contenido; header y footer también van, claro. La manera de hacerlo es siempre comenzar de arriba hacia abajo (header, columnas, contenido, footer) y tener en el HTML primero ambas columnas, antes que el contenido mismo. Así, ambas columnas tendrán un ancho fijo (no queremos que nuestro menú quede flotando si la resolución del computador es mayor, tampoco la publicidad que son usualmente imágenes de ancho fijo, o GoogleAds) y el contenido será el que crezca en el caso de una mayor o menor resolución, al igual que el header y el footer. Para esto hay que tener preparado una imagen de fondo que crezca si es necesario (background-repeat: repeat-x; si este fuera el caso). Todo esto va enmarcado por un DIV contenedor, el que tendrá un width definido en pixeles para el layout fijo (y centrado con margin: 0 auto;), y basta con eliminar este ancho para el sitio verse elástico, o líquido. Recuerda, sólo 4 caracteres para cambiar esta característica.

Creo que quedó bien explicada la intención, aquí va el HTML primero (resumido):

<div id="contenedor">
     <div id="header">Titulo del Sitio</div>
     <div id="menu">Menu Izquierdo</div>
     <div id="publicidad">Publicidad</div>
     <div id="contenido">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquet……….</p>
     </div>
     <div id="footer">Copyleft</div>
</div>

y el CSS que lo mostrará de ancho fijo:

div#contenedor {
     width: 750px;
     margin: 0 auto;
     border: 1px solid #333;
}
div#header, div#footer {
      height: 100px;
      clear: both;
      background-color: #333;
      color: #F90;
      font-size: 14px;
      font-weight: bolder;
}
div#footer {
      height: 30px;
}
div#menu, div#publicidad {
      width: 160px;
      border: 1px solid #F90;
}
div#menu {
      float: left;
}
div#publicidad {
      float: right;
}
div#contenido {
      margin: 0 170px;
}

Ver ejemplo de Layout Fijo

Ahora, la idea es no tocar el HTML. Si el cliente se le ocurrió que el sitio debiera adaptarse a la resolución del monitor del usuario, no debieras tener tiempo siquiera para preocuparte. Basta con comentar el width: 750px; y verás de inmediato la transformación:

div#contenedor {
     /* width: 750px; */
     margin: 0 auto;
     border: 1px solid #333;
}

Ver ejemplo de Layout Elástico (view source para ver el HTML y el CSS completo)

El secreto está en saber cómo diagramar bien un sitio, cómo comenzar a ver la estructura del mismo para que posibles cambios posteriores sean lo menos doloroso, y que quiten el menos tiempo posible. Adelantarse a lo impredecible.

Espero haya quedado claro.

Comentarios

  1. Taty [#]

    Excelente artículo!! Especial para aquellos que, como yo, recién empiezan a amigarse con el CSS y el concepto de estándares web (estándares… standars??)… Felicitaciones. Muy bueno el diseño de tu web.

  2. Juglar :: CSS Layouts :: August :: 2005 [#]

    […] Tutoriales: Tutorial de posicionamiento y layout en CSS || Cristalab Geekipollas » Solución a las Columnas en CSS Liquid layouts using CSS – the joy, the pain, the tears Progressive Layout | Web Design | PRO.HTML.IT A List Apart: Articles: In Search of the Holy Grail CollyLogic: Redesign Notes 1: Width-based layout Drop Column Layout | Muffin Research Labs Componer un diseño de 3 columnas en XHTML y CSS + Cristalab Learn CSS Positioning in Ten Steps CSSLab » Layout Fijo: resucitando los frames CSSLab » Layout fijo a elástico en sólo 4 caracteres Create a simple liquid layout – .net magazine « Anterior: Alojamiento gratuito de imágenes Siguiente: Centrar » […]

  3. luis [#]

    Gracias por la explicación me ha sido muy util. Ya sería perfecto si lograra que el pie se auto estirara verticalmente al 100% (se situara en la base de la página más bien) cuando tiene poco contenido.

    un saludo

  4. CSSLab Admin [#]

    Pero Luis, ya tengo un articulo para lo que buscas: ¡Aaaaaabajo!. Saludos

  5. Luis Alberto [#]

    Excelente, lo bueno si breve 100 veces bueno. Ya tengo diseñado en php un sitio de encuestas, y lo único que me faltaba era formtear la salida y con este ejemplo ha sido coser y cantar. Por fin ya entiendo que es eso de plantillas liquidas. A primera vista parece perfecto. Gracias.

  6. Arcadio [#]

    excelente…. saludos..

  7. Alex [#]

    es un buen ejemplo para ver la diferencias de los layout

  8. armas [#]

    Bueno el artículo y lo agradezco, pero tengo una duda.
    En Firefox la página queda perfectamente centrada, no asi en Internet explorer,donde se carga a la izquierda.
    ¿como se resuelve esto?
    Gracias

    Armas

    Noviembre 26 del 2007

  9. CSSLab Admin [#]

    armas, creo q la barra de scroll en IE esta siempre presente, aunq no exista contenido para scrollear. por esto sientes la pagina cargada hacia la izquierda. salu2.

  10. armas [#]

    Gracias por su respuesta,pero no entiendo porque la presencia o la presencia oculta de la barra de scroll, obligue al contenido cargarse a la izquierda en IE,no sucede esto sin embargo en Firefox.

    Le saluda atte

    Armas

    Noviembre 27 del 2007

  11. =^o^= [#]

    Por qué no intentas esto
    body {
    text-align: center;}

    ^^

  12. armas [#]

    !muy acertado!

    Gracias

  13. Blog eXencial [#]

    […] No me quedaba el footer hasta abajo en la pagina de las chivas… tuve que ir a esta pág.: http://www.csslab.cl/2006/10/05/layout-fijo-a-elastico-en-solo-4-caracteres/ […]

  14. RhapsodyOfFire [#]

    Todo mal !!!

    Lo que explicaste es “como cambiar un layout fijo a liquido, y no a elastico como dices”.

    Liquido y elastico no son la misma cosa.

    Fijo es una, liquido es otra, elastico es otra e hibrido otra totalmente diferentes.

    El elastico es utilizar medidas porcentuales como “em”.

  15. fernando [#]

    gracias por tu aporte amigo, aunque yo soy un disañador profesional, encontrar personas como tu, es de admirarse, y aunque sepamos muchos, corremos el riesgo de equivocarnos, pero es la única forma de ampliar nuestra visión.
    Yo no te voy a decir que “TODO MAL”, sigue superandote y te FELICITO….

    Gracias…

  16. Joe_ [#]

    Muy buen árticulo y bien explicado.

    Lo de “Todo mal !!!” (del amigo RhapsodyOfFire) es muy facil ir de profesional criticando sin aportar nada.

    Continua escribiendo interesantes tutoriales como este.

    Gracias por el aporte.

  17. Angel Luis Ponce [#]

    Excelente articulo, es de los pocos codigos que realmente funcionan como indican, ya se que es de hace unos años y en ese tiempo me hubiera caido de maravilla esto, fue cuando recien iniciaba en el desarrollo web. Gracias por compartir tus conocimientos.

  18. josé D. [#]

    aún no lo probé, pero gracias pues fue muy dificil encontrar respuesta a esta pregunta que no sabía siquiera como formularla, ahora me entero de fijo elastico, etc,

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab