Entradas con la etiqueta ‘css’

Maquetación con etiquetas div y css

Miércoles, 11 de marzo de 2009

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: , , , , , , ,