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

Cambios rápidos de diseño con CSS

Por: Wanaya + 17.08.2007

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.

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.