Como hacer que el contenido de nuestra web respete los bloques head,body y footer

Pues eso amig@s,

La forma facil y la mejor para que nuestra web esté correctamente dividida en bloques, es dividiendo el contenido en 3 zonas:

Head
Body
Footer

Y que estos, por mas que se cambie el tamaño de la pantalla siempre estén bien ubicados.

El truco es el siguiente:

1-Añadimos el contenedor a nuestra web:





2-Luego desde nuestra hoja de estilo, llamamos a los diseños y le aplicamos los cambios:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}

Y voila!, ya tenemos nuestro contenido dinamico y formateado con DIV y CSS.

Tambien si queremos dividir el contenido con un div en dos partes, es decir si queremos ubicar algo a la izquierda de nuestra web y algo a la derecha, solo debemos añadir los siguientes datos:

Div principal:




Y luego el estilo:

    .wrapperpibe{position:relative;}
    .rightpibe,.left{width:10%; position:absolute;}
    .rightpibe{right:0;}
    .leftpibe{left:0;}

Y voila! ya tenemos nuestro contenido dividido en dos partes y forzados a que cada uno vaya a su lugar.

Espero que les resulte util.

Salu2.
Share on Google Plus
    Blogger Comment

0 comentarios: