¿Quieres registrarte?
Estás en: Cristalab > Tips > Cambios rápidos de diseño con CSS

Cambios rápidos de diseño con CSS

Por: Wanaya
17 de Agosto del 2007
1137 de clabLevel
Otros artículos de Wanaya
8,283 visitas
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.

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas css

Comentarios | Enviar un comentario
Eficaz...
Por: Skizobass_blog
guaoo, anakha vendiga al CSS, anakha es mi troll, y a quien le rendimos culto los paganos, buajajajaja, no no no, dejando de bromas, es un muy buen tip, es genial, graciaaas, supongo que habra otras cosas mas que se puedan corregir asi de rapido con CSS, ¿cierto?
Por: Señor Oz_blog
Excelente, bastante flexible pero muy poderoso !! tan solo intercambiando los caracteres "l, r" eso si que se llama ser practico ! ! Gracias, es un excelente tip, y si, seguro que hay cientos de cosas más!! Está para apantallar a los compañeros jeje!! supliquen por sus apestosas vidas!! Lastima que No funcione con el maligno version 6 (para variar) y como dicen en mi pueblo "Muerto el perro... ¡se acaba la rabia!" :ruso:
Por: bicho_O
Muy interesante y creativo...eso es ahorrar tiempo
Por: Daniella_blog
MMmm no tiene q ser tan comlpicado, y desde luego, hay muchas maneras. Mejor:
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
Por: carlos_zapata_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.