CSS: Un ejemplo muy chulo y util

A continuación pongo una hoja de estilos que combinada con una página html básica como la que muestro a continuación nos permite crear una página facilmente mantenible.

<body class="sm">
<div id="header"></div>
<div id="body">
<div id="main"></div>
<div id="sidebar"></div>
</div>
</body>

Unicamente con 2 estilos (sm o ms) SidebarMain o MainSidebar se puede mantener un sistema de páginas. Cuando utilizas <body class="ms"> (main sidebar) el main se pone a la izquierda y el sidebar a la derecha, si utilizas <body class="sm"> (sidebar main) el sidebar se muestra a la izquierda y el main a la derecha. Si no indicamos ninguna clase para body unicamente tendremos una sección main que ocupa toda la zona. Los bordes los he puesto para ver mejor los div.

div#body

{
margin:auto;
width:710px;
}
div#header
{
margin:0px auto 10px auto;
width:710px;
border:dotted 1px #ccc;
}
div#sidebar
{
display:none;
border:solid 1px #CCC;
}
body.ms div#main, body.sm div#main
{
width:490px;
}
body.ms div#sidebar, body.sm div#sidebar
{
display:block;
width:200px;
border:solid 1px #CCC;
}
body.ms div#main, body.sm div#sidebar
{
float:left;
border:solid 1px #CCC;
}
body.sm div#main, body.ms div#sidebar
{
float:right;
border:solid 1px #CCC;

}

Anuncios

2 comentarios

  1. Estoy empezando con todo esto y hasta ahora el tema “diseño” no lo tenia muy en cuenta, este pequeño ejemplo sirve de muchiiiiiiisima ayuda para los que solo tenemos nociones del html basico.
    Gracias!!

  2. joder tio, eso no va, en donde te aprendieron css chacho?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: