Comunidad de diseño web y desarrollo en internet

Cambios rápidos de diseño con CSS

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate