15Jun 2012 3 Comments */?>

Columnas CSS para tu diseño

Categorías: Recursos - Tags:

Las columnas CSS son unas simples reglas que te van a permitir realizar diseños más facilmente. Yo personalmente las utilizo en todos mis trabajos e inclusive agrego creo y agrego shortcodes a WordPress para usarlas dentro del editor.

A continuación les dejo el código CSS necesario para usarlo.

.un_quinto{ overflow: hidden; margin-left: 4%; width:16.5%; float:left; position:relative; display:inline;}
.un_cuarto { overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative; display:inline;}
.un_tercio { overflow: hidden; margin-left: 4%; width:30%; float:left; position:relative; display:inline;}
.dos_quintos { overflow: hidden; margin-left: 4%; width:38.5%; float:left; position:relative; display:inline;}
.medio { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; display:inline;}
.tres_quintos{ overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative; display:inline;}
.dos_tercios { overflow: hidden; margin-left: 4%; width:66%; float:left; position:relative; display:inline;}
.tres_cuartos{ overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative; display:inline;}
.cuatro_quintos { overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative; display:inline;}

/* regla para la primera columna*/
div .primera{
margin-left: 0;
clear: left;
}

Como pueden ver es cuestión es muy sencillo y tan solo tienen que juntar las columnas para formar un entero; además de agregar la regla .primera al primer div.

Veamos unos ejemplos:

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

código:

<div class="primera un_tercio">Bla bla bla</div>
<div class="dos_tercios">Bla Bla bla bla</div>

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

código:

<div class="primera medio">Bla bla bla</div>
<div class="medio">Bla Bla bla bla</div>

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

código:

<div class="primera un_cuarto">Bla bla bla</div>
<div class="tres_cuartos">Bla Bla bla bla</div>

Se animan a crear los shortcodes ustedes ? Saludos!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • sergiomas

    En IE7 no funciona

    • masquewordpress

      Que es lo que no te funciona concretamente? Tienes un link para ver? Saludos

  • Santaigo

    si principiante el codigo CSS a donde se agrega?