CSS quick layouts

Como soy diseñador Web de pasillo me encargaron hacer los masters de todas las páginas… voy a compartir con uds el proceso de como hacer un layout en CSS de dos columnas, header, footer y menu.

El diseño va así:

image 

Tenemos que definir los elementos de la página para lo cual me aventé esta hoja de estilo:

html, body
{
}
#layoutroot
{
}
#header
{
}
#top-menu
{
}
#main-content
{
}
#sidebar
{
}
#footer
{
}

El contenido general de la página estará definido por el body y html, para lo cual le ponemos los sig atributos:

    margin:0;
    padding:0;
    background:#a7a09a;
    color:#000;
    background-image:url('../App_Themes/images/strip-background.gif');
    margin-top:0;
    font-family:"Trebuchet MS", "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
    color:#333333;
    font-size:14px;

Básicamente le quitamos márgenes, padding  y le asignamos colores y tipos de letra que se usaran en el resto de los estilos.

Ahora todo el contenido deberá ir dentro del #layoutroot que es contenedor de mis elementos para lo cual le asignaremos los siguientes atributos:

border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: gray;
width: 900px;
margin: 0 auto;
background-color: white;

Se le añade un borde, color y tamaño para definir el contenedor. Margin 0 auto nos centra el contenedor dentro de la ventana… como pueden ver es un fixed style layout.

Al #header solo le ponemos su tamaño y alto y queda así:

width: 900px;
height:99px;

Aquí viene la parte tricky… queremos poner dos columnas dentro de la parte del contenido… lo logramos mediante un float, vean lo que hacemos primero con #main-content.

float:left;
width: 700px;;
height:600px;
background-image:url('../App_Themes/images/gradient-content.gif');
padding:8px;

Y para #sidebar hacemos lo mismo, solo que el float será del otro lado. Ojo con los tamaños que por el padding, se nos mueven… aquí lo hice a prueba y error ejeje.

float:right;
width: 168px;
height:600px;
background-image:url('../App_Themes/images/gradient-content.gif');
padding:8px;

Aquí hay un issue con el #footer, ya que se nos sube. Esto se debe a que como encuentra que hay floats dentro del layout, quiere ponerse junto al siguiente que se encuentra… esto es comportamiento esperado ya q todos los divs son inline. Para esto lo arreglamos con un clear.

clear:both;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px 0px 0px 0px;
height: 24px;
background-color: #E6E6E6;
font-size: xx-small;
padding:4px;

Y esto es el resultante, obviamente le puse algunos estilos extra e imágenes pero el layout que hicimos es el mismo, ojalá les sirva:

image

Cheers! Beer


Comentarios

Deja una respuesta