Con un Css práctico podemos rápidamente, modificar nuestro sitio de manera eficaz, ahorrándonos el tiempo que duraríamos editando tablas y darle mantenimiento a nuestro sitio para futuros cambios que se hagan en él.
Por ejemplo, cambiar un sidebar de lugar, o no mostrarlo en algunas partes.
XHTML
Código :
<div id="content"> <div id="main"> Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido...Soy el contenido... </div> <div id="sidebar"> Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar...Soy el sidebar... </div> </div>
Nada del otro mundo, dos divs dentro de uno que los contiene. Veamos el CSS:
CSS
Código :
#content{
margin: 0 auto;
width: 710px;
}
#sidebar{
display: none; /* para no mostrar el sidebar*/
}
body.rl #main, body.lr #main{
width: 490px;
}
body.rl #sidebar, body.lr #sidebar{
display: block; /* eliminar el display:none; */
width: 200px;
}
body.rl #main, body.lr #sidebar{
float: left;
}
body.lr #main, body.rl #sidebar{
float: right;
}
Vemos que tenemos dos clases, las que harán el trabajo de "mantener" nuestro sitio. Así, solo agregando las clases en nuestra etiqueta body, cambiará nuestro diseño y sin la clase especificada en body, nuestro sidebar no se mostrará.
Para colocar el sidebar a la izquierda:
Código :
<body class="lr">
a la derecha:
Código :
<body class="rl">
para no mostrarlo:
Código :
<body>
Si un día el cliente nos dice que quiere el sidebar de un lado u otro o ya no lo quiere, cambiando solo un parámetro todo nuestro diseño se verá afectado.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Skizobass el 20 de Agosto de 2007
Por Señor Oz el 20 de Agosto de 2007
Por Daniella el 21 de Agosto de 2007
Por carlos_zapata el 23 de Agosto de 2007
css
Código :
.left { float: left; padding: 0px 8px 0px 0px; } .right { float: right; padding: 0px 0px 0px 8px; }hml
Código :
<{etiketa} class="right"> {CONTENIDO} </{etiketa}>Asi de simple