Maquetación con etiquetas div y css

1 Star2 Stars3 Stars4 Stars5 Stars (8 votos, promedio: 4,75 de 5)
Loading ... Loading ...

El objetivo es conseguir una maquetación como la de esta imagen:

Maquetación mediante CSS

Como vemos en la imagen la estructura de nuestra página se asemeja mucho a lo que pudiera ser una tabla, por lo que lo primero que se nos puede ocurrir para crear esta estructura es usar la etiqueta html <head>.
Si queremos seguir los últimos estándares web, sólo podremos usar la etiqueta <head> para mostrar contenido que tenga que ser tabulado. Por ejemplo, podremos usar una tabla para esto:

Elemento Cantidad
Pan 1
Filetes 2
leche 6

Pero nunca para hacer la maquetacón de nuestra página. Por lo tanto, el código html que vamos a usar es el siguiente:

<html>
    <head>
    <title>Ejemplo</title>
    </head>
    <body id="body">
        <div id="contenedor">
            <div id="destacado">
            DESTACADO 1
            </div>
            <div id="destacado" class="scroll">
            DESTACADO 2
            </div>
            <div id="destacado">
            DESTACADO 3
            </div>
            <div id="cajas">
                <div id="caja">Caja 1</div>
                <div id="caja">Caja 2</div>
                <div id="caja">Caja 3</div>
                <div id="caja">Caja 4</div>
                <div id="caja">Caja 5</div>
                <div id="caja">Caja 6</div>
                <div id="caja">Caja 7</div>
                <div id="caja">Caja 8</div>
                <div id="caja">Caja 9</div>
                <div id="caja">Caja 10</div>
            </div>
        </div>
    </body>
</html>

Lo primero que vamos a hacer será centrar el contenedor general. Esto es tan sencillo como usar los siguiente estilos en nuestro CSS:

#contenedor{
    background: red;
    margin:auto;  /* para centrar el contenedor */
    width: 600px; /* es necesario dar un tamaño, sino
                  /* ocuparía toda la ventana y no se
                  /* va a centrar*/
}

Para que esto funcione en Internet Explorer 5.5 además hay que añadir text-align, por lo que el CSS final queda de la siguiente manera:

#body{
    background: black;
    text-align:center; /*para que en IE 5.5 salga centrado*/
}
 
#contenedor{
    background: red;
    margin:auto;      /* para centrar el contenedor */
    width: 600px;     /* es necesario dar un tamaño*/
                      /* sino ocuparía toda la ventana
                      /* y no se va a centrar*/
    text-align:left;  /* para eliminar la herencia en IE 5.5
                      /* y que los textos dentro del contenedor
                      /* no salgan centrados.*/
}

Para los cuadros verdes, lo único que tenemos que hacer es darle un margen y indicarle que tendrán un alto mínimo. Por defecto ya ocuparán todo el ancho disponible:

#destacado{
    margin: 0px 15px 15px 15px;
    height: 100px; /* le damos un alto mínimo*/
    background: green;
}

Y por último para las cajas azules lo que hay que hacer es:
Darle un ancho y alto al contenedor de esas cajas (marcado como 1 y 2).
Asignarle un ancho y alto a la caja (3 y 4)
Indicar que las capas se coloquen una a la derecha de la otra ocupando todo el espacio disponible (5).

#cajas{
    width: 600px;               /* 1 - le damos un ancho */
    height:220px;               /* 2 - le damos un alto */
    margin-top:10px;
}
#caja{
    width: 100px;               /* 3 */
    height: 100px;              /* 4 */
    float: left;                /* 5 - para que salga en formato de tabla*/
    margin: 0px 2px 10px 15px;
    background: blue;
}

Podéis descargar ejemplo de maquetación mediante CSS y etiquetas DIV. para probar.

En Excelsit somos profesionales en el diseño web.

Etiquetas: , , , , , , ,

4 comentarios para “Maquetación con etiquetas div y css”

  1. Hola maestro, muy bueno (me aclaro varias cosas) pero te recalco un detallito… justo en el debes de agregarle un ID de nombre “body” para que tome las propiedades del BODY!, quedando asi:

    para que pueda tomar color NEGRO de FONDO!… Gracias y Suerte!

  2. no salieron las etiquetas BODY parece que la web no las toma =) el mensaje de vuelta

    ||_______________________________________________________________________________________________
    Hola maestro, muy bueno (me aclaro varias cosas) pero te recalco un detallito… justo en el -BODY- debes de agregarle un ID de nombre “body” para que tome las propiedades del BODY!, quedando asi:

    -body id=”body”- (remplazando los – por respectivamente)

    para que pueda tomar color NEGRO de FONDO!… Gracias y Suerte!
    _______________________________________________________________________________________________
    ||

  3. fernando dice:

    Tienes razón, faltaba esa parte. Muchas gracias Juan ya esta modificado.

  4. Leo dice:

    Muy buena explicacion