Post Actualizado en julio 25, 2013


Tutorial de como usar DIVs

Mediante este artículo explicarémo como usar DIVs y no tablas para nuestra pagina web. Un párrafo puede estar incluido en el centro del sitio web solamente usando DIVs sin necesidad de usar tablas. Las etiquetas DIVs remplazan a la ya conocida propiedad que crea las tablas. Para nuestro diseño web lo primero que se debe […]

Mediante este artículo explicarémo como usar DIVs y no tablas para nuestra pagina web. Un párrafo puede estar incluido en el centro del sitio web solamente usando DIVs sin necesidad de usar tablas. Las etiquetas DIVs remplazan a la ya conocida propiedad que crea las tablas.

Para nuestro diseño web lo primero que se debe realizar es crear las etiquetas div. En el próximo ejemplo que os mostraré veremos que crearemos una etiqueta div  donde dividiremos el sitio conteniendo el logo de la empresa, una barra lateral y el pie de página.

 

# Header {
position: fixed;
width: 100%;
altura: 15%;
top: 0;
derecha: 0;
fondo: auto;
a la izquierda: 0;
}

Como se ve no es necesario especificar el tipo de div que se va a usar en la página web, este es detectado automáticamente por los navegadores.

 

Ahora desarrollamos la barra lateral en nuestro diseño web:

 

# Sidebar {
position: fixed;
Ancho: 11em;
height: auto;
superior: 15%;
derecha: auto;
abajo: 100px;
a la izquierda: 0;
}

 

Y por último a nuestro diseño no le debe faltar el pie de página:

 

# Main {
position: fixed;
width: auto;
height: auto;
superior: 15%;
derecha: 0;
abajo: 100px;
izquierda: 10em;
}

# Footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
derecha: 0;
inferior: 0;
a la izquierda: 0;
}