Trucos CSS para no enloquecer

Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS.

Tranquilo! Todavía no tires el monitor contra la pared!! te aseguro que con un poco de investigación y algunos consejos podrás encontrar la solución a tu problema.

Aquí encontrarás los principales trucos CSS para hacer frente a los típicos problemas que se enfrentan los diseñadores web cuando maquetan con CSS. Podrán existir discrepancias entre los lectores, pero aclaro que estas son técnicas que a mi personalmente me han dado resultado, después de muchas pruebas e intentos aprendí esto...

Usa un contenedor global para todas las cajas (cuando las cosas se disparan)

De esta forma estas prefijando globalmente el orden de todas las demás cajas. En referencia a este contenedor ordena el resto de las cosas interiores. Es como si haces una cerca o valla para que nada es escape. Obviamente estamos hablando de sitios fijos no elásticos.

A veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pié afuera.

Ejemplo para un contenedor de 900px centrado:

#contenedor { 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
width: 900px; 
}

Que flote a la izquierda (cuando las cajas se superponen)

Esta es una muy buena forma de evitar incompatibilidades entre navegadores. El uso de hacks de CSS se debía en gran parte porque se trabajaba centrando las cajas. Si por ejemplo precisas poner tres cajas de 300px en un contenedor de 900px puedes hacer lo siguiente.

Ejemplo:

#caja { 
float: left; 
width: 300px; 
}

Calcular bien los paddings o rellenos (cuando las cajas se van abajo)

Casi todos los dolores de cabeza y maldiciones hechadas sobre el CSS se deben al mal uso o a la mala interpretación que se hace del padding. Pero es más simple de lo que parece.

¿Para que sirven los paddings o rellenos? Bueno, lo que hace es generar un relleno de determinada medida para dar por ejemplo como un margen a los elementos, pero lo hace sobre el ancho en píxeles que esté prefijado. Por ejemplo: si tenemos una caja de 300px y le aplicamos un padding de 10px en la izquierda, ahora tendremos una caja de 310px. Esto hará desbordar al resto de las cajas y las desplazarán para abajo. Ahí es cuando el diseñador principiante se vuelve loco. El tema es que si hay una diferencia de hasta un 1px se producirán estos desbordes, sino fíjate cuando le incluyes bordes a tu caja, se producirán difrencias.

Lo que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los rellenos. Ahora tendremos que hacer una caja de 290px con paddings de 10px a la izquierda.

Ejemplo:

#caja { 
float: left; 
width: 290px; 
padding-left: 10px; 
background-color: #FFE6DD; 
}

El pié de página con ancho fijo (cuando el pié de página enloquece)

Para entender mejor como funciona el uso de cajas en CSS se puede pensar en un grupo de objetos de diferentes formas que luchan por adaptarse y ocupar el espacio que se ha prefijado. Sucede muchas veces que los pié de página son los más problemas traen cuando se maqueta un sitio. O se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos resolvíamos este tema prefijando valores fijos a las alturas de cajas, pero no tiene sentido. Lo que se debe hacer es de nuevo establecer un valor de ancho fijo. De esta forma el pié se va a hacer su lugar del resto e irá a parar donde tiene que ir.

Ejemplo:

#pie { 
width: 900px; 
background-color: #666666; 
}

No todo es 1+1=2 en CSS (cuando los anchos no cierran)

Un problema común en css es pensar que todos los anchos entre cajas cierran perfectamente. A veces es necesario jugar con los valores de los contenedores, a veces contrario a la lógica hay que añadir algunos px a los contenedores.

Otros trucos rápidos

Trucos sencillos, de los que no hace falta explicar mucho pero que son muy prácticos y te harán más fácil el trabajo y evitarán posibles errores.

  • Usa colores diferentes para distinguir las cajas.
  • Pon una palabra descriptiva en cada caja.
  • Comenta el código fuente y señala los finales de los contenedores grandes.
  • No mezquines espacios entre los divs.
  • No seas un fundamentalista y no quieras escribir tu CSS con dos o tres líneas. Si no quieres errores escribe lo necesario.
  • Cuidado con el tamaño de las imágenes que insertas, estas cambian el ancho de los contenedores.
  • Elige bien los nombres de cada div y trata de ser ordenado en el código.
  • Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. Por ejemplo un contenedor que agrupe tres o cuatro cajas.

Conclusión

Todas estos párrafos son simplemente algunas sugerencias o comentarios de lo que me ha dado resultado a mi. Existen otras muchas ataduras de este tipo, si tienes alguna no dudes en comentarlas en este mismo artículo.

Que pasa cuando no puedes resolver un problema con CSS o similar? A mi me ha dado resultado levantarme un rato, hacer cualquier otra cosa y luego volver e intentar de nuevo.

Dejar de renegar y no enloquecer con CSS dependerá de la cantidad de tiempo, trabajo y esfuerzo que le metas a tu trabajo. No lo dudes.

Compartir

Comentarios

richard

18/6/2007
Está interesante y algunas cosas me han servido para darme cuenta de fallos que puedo cometer y volverme loco.

Y no estaría mal que esto se extendiera y que otros desarrolladores experimentados realizasen artículos parecidos.

Javi

18/6/2007
Me parecen fantásticos los truquillos del artículo.
Os quiero comentar un truco que utizo para las cabeceras gráficas de las páginas. De toda la vida estamos muy a merced de la resolución de pantalla que utilice el visitante. Lo que he empezado a hacer yo es situar una caja del alto deseado y ancho total con top:0px
Luego la imagen que quiero como cabecera la pongo de fondo de esa caja con posición de imagen de fondo centrada y sin repetición.Por ejemplo:
#cabecera {
position:absolute;
margin-left:0px;
top:0px;
width:100%;
height:99px;
z-index:2;
background-image:url(../imagenes/fondocab.jpg);
background-repeat:no-repeat;
background-position:center;
}

********************+
Este mismo principio lo utizo para centrar una imagen en una caja donde por ejemplo pueda variar dicha imagen dinámicamente (siempre que no tenga otro fondo de imagen dicha caja.

No sé si he aportado algo que os valga. La verdad es que soy novatillo en esto del css y cuanto más voy avanzando más me gusta el tema.

Un Saludo.

- Javi -

Final 2.0

09/9/2007
Otro truco cuando haces un layout con 2 o 3 columnas que por lo general son capas flotantes es agregar una linea con la propiedad clear al final ya que las demas capas que le sigan a estas flotantes quedaran bajo estas ^^ ademas de que en caso de estar en un contenedor estas no ampliaran el tamaño de dicho contenedor en todos los exploradores algo muy molesto cuando se tiene un color o imagen de fondo ejemplo:
<html>
<head><title> Ejemplo </title>
<style type="text/css" media="screen">
.contenedor {
width: 900px
}
.flotante {
width: 290px;
float: left
}
.clear {
clear: both;
}
<style>
</head>
<body>
<div class="contenedor">
<div class="flotante">Flotante 1 ^^</div>
<div class="flotante">Flotante 2 ^^</div>
<div class="flotante">flotante 3 ^^</div>
</div>
<div class="clear"></div>
<div>otra capa que de otro modo seria cubierta por las flotantes</div>
</body>
</html>

Espero les sea de ayuda ^^

Facundo

24/12/2008
Muy bueno, ayuda bastante.
Creo que para un diseñador de paginas web son cosas que no se le olvidan, pero para los que estan aprendiendo si.
La verdad que en mi caso acabo de aprender como poner tres ileras con los float right o left.. es algo que no sabia y nunca habia intentado tampoco..
Saludos!

FerCbaArg

01/9/2009
2 o más columnas.
Una duda que tengo cuando hago un esquema de 2 o más columnas que están dentro de un contenedor y cada columna tiene un fondo distinto, que truco puedo utilizar para hacer que todas las columnas tengan el alto de la columna que tiene el contenido más extenso? Ya que de lo contrario en las columnas con menor contenido se ve al final el fondo del contenedor y no es lo que estoy queriendo obtener.

sefo262

25/9/2010
Problema css
Hola a todos! tengo un problema que no logro solucionar.
Quiero un div que se adapte al contenido (Imagino que es con height:auto;) y que la imagen de fondo se repita verticalmente (repeat-y) a medida que se expande el div.
Cuando intento esto no me muestra la imagen de fondo a menos que defina un valor en pixeles para el height del div.
Podrian ayudarme?
Gracias!!

Mario

29/4/2011
Funciono
Gracias amigo la verdad esque estaba buscando el problema con el css ya que el pie en los navegadores chrome y firefox no se veian, luego ise lo de dejar el pie fuera del contenedor de los otros div y guala ya solo tuve que cambiar el tamaño del contenedor para borrar los pixeles creados para el pie y listo.
Gracias...

Obo

02/1/2012
¿Ya no queda nadie aprendiendo?
Hola.
Perdonadme si alguien se ofende porque no es mi intención.
Estoy aprendiendo ahora y siempre que miro esta página veo comentarios superantiguos, pero ninguno actual (que ya estamos en 2012). También echo en falta el poder contestar a algunos comentarios que la gente hace y que yo ya he resuelto, con lo que podría aportar mi experiencia, pues hay veces que la contestación la veo un poco corta o yo creo que la podría ampliar.
Creo que se podía plantear como un foro donde los socios podemos contestarnos unos a otros, y así poder compartir nuestras experiencias.
Y, por último, a todos aquellos que ya han aprendido y, posiblemente, se ganen la vida con esto, recordarles que también ellos un día necesitaron ayuda. Por favor, no os olvidéis ahora de los que empiezan y tratad de ayudar ahora vosotros.
Gracias a todos.

alfredo_ros

30/6/2012
quitar filas fantasma
Hola a todos, siempre me he limitado a leer los comentarios y he aprendido bastante, siempre he usado tablas y, creo, que ha llegado el momento de empezar con css.
Mi problema es que no se como quitar las "filas blancas" que aparecen en este listado que adjunto, es el color de fondo de "Pagina" que es el contenedor que utilizo para centrar toda la información que pondré de mi pagina. Y no se como quitar esas lineas blancas y que las distintas capas ocupen todo el sitio.
¿Alguien que me ayude?

gracias de antemano

alfredo_ros

30/6/2012
quitar filas fantasma
Adjunto el fichero que se me ha olvidado en el mensaje de antes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

html,body{

margin:0px;

height:100%;

}


#base {
background-color: #0CF;
height: 100%;
width: 100%;
position: absolute;

}
#base #pagina {
background-color: #efefef;
height: 80%;
width: 80%;
border:#ff530d 1px solid;
margin-right: auto;
margin-left: auto;
}
#base #pagina #cabecera {
background-color: #333;
height: 10%;
width: 100%;
}
#base #pagina #navegador{
background : #F5F4C3 ;
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
text-align: center;
}
#base #pagina #contenedor {
background-color: #999;
height: 74%;
width: 100%;

}
#base #pagina #pie {
background-color: #333;
height: 5%;
width: 100%;
margin:0px;
}


A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK
{
color: #494E6B;
}
A.enlacenav:HOVER
{
color: #3F7DE3;
}




</style>
</head>

<body>
<div id="base">
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="pagina">
<div id="cabecera">
<p>&nbsp;</p>


</div>
<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>
<div id="contenedor">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>

</div>
<div id="pie">
<p>1</p>

</div>
</div>
</div>
</body>
</html>

Jes

05/12/2012
Problema con el contenedor
tengo un problema que agradeceria mucho me ayudaran estoy manejando un css. tengo en el diseño de la pagina un gridview que le cargo datos desde un archivo pero al cargarlos no se ajustan al espacio definido para el contenido, se sale y no se ajusta se sobrepone a todo. me podrian decir como logro k se acomode dentro del contenedor todos los datos por favor?
muchas graciias!

zombyk

20/4/2013
Duda sobre las cantidades de css
Hola buenas, tengo la siguiente duda
por ejemplo, tengo una lista <li>
de 6 elementos los cuales a los pares le colocare un color
y a los impares otro!
el hecho esta a como ejemplo, puedo dos archivos css
uno para cada uno, ej: par.css y impar.css
claro que para toda la pagina serian muchos css pero ayudarian a separar bien el code! tendrá algún contra este tipo de desarrollo

Ariel

02/7/2014
Limpiar Floats
Les dejo un pequeño consejo sobre como limpiar los floats.
Lo único que tenemos que hacer es colocar la propiedad overflow en el elemento contenedor (padre).
por ejemplo:
<div>
<p>Esto es un ejemplo 1</p>
<p>Esto es un ejemplo 2</p>
</div>
si en este caso si damos la propiedad float: left; a los dos elementos <p> lo que haremos es colocarlos uno al lado del otro, pero ahora bien el elemento contenedor <div> ya no los contendrá porque los elementos flotantes salen del flujo normal de la pagina. Lo que debemos hacer es colocar la propiedad css
overflow: hidden; en el elemento div (contenedor) y con eso limpiamos los floats.

Valentín Sánchez

30/9/2014
Tips para evitar todos de cabeza maquetando.
Buen artículo!

marcelo

27/9/2015
Ayuda con un problema de css
Hola amigos estoy tratando de mejorar mi sitio web de venta de libros.
He realizado las cajas en css pero cuando quiero insertar otra caja que contiene texto se me desarma todo y no lo puedo volver a armar.
Les dejo el codigo para ver si alguien me puede ayudar.
Desde ya muchas gracias

<style>
.column{width:315px; margin-top:20px; margin-right:20px; float:left;}
.section{width: 300px; background: #fff; border:1px solid #eee; padding:6px; margin-top:6px; float:left;}
.section img{float:right; margin:0px 0px 10px 10px; position:relative; bottom:10px;}
.section ul{padding-left:15px;}
.spacer{height:20px; width:100%;}
.social-item-span3{
float: left;
list-style-type: none;
margin-top: 0;
text-align: center !important;
overflow: hidden;
width: 33%; }
.social-item-span3 a {
display: block;
width: 42px;
height: 40px;
margin: 0 auto; }
.social-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
.center{text-align:center}
.left{float:left}
.right{float:right}
.nowrap{white-space:nowrap}
.textalign-right{text-align:right}
.hidden{display:none}
</style>
<p>No hay edición más famosa que la primera, y en Librería usados disponemos de muchos de estos ejemplares irrepetibles. ¡Podrás encontrar libros de diversos escritores como por ejemplo Borges, Bioy Casares, Victoria Ocampo, Gabriel García Márquez, Leopoldo Lugones, Sidney Sheldon, Tom Clancy, Abelardo Arias, Agatha Christie, Albert Camus, Alberto Moravia, Aldous Huxley, Alejandro Dumas, Alicia Jurado, Álvaro de Laiglesia, Anne Perry, Clive Cussler, Conrado Nale Roxlo, Dalmiro Sáenz, entre otros...!</p>

<div id="main">

<!-- This is the first of three columns -->
<div class="column">

<div class="section">
<a href="http://www.libreriausados.com.ar/item0005.html">
Guy des Cars:<p><a> Siete Mujeres</a></p>
<a href="http://xxx/item0005.html"><img src="http://www.xxxx/1LV0009.gif" alt="Libro Usado - Guy des Cars: Siete Mujeres" /></a>
<p>
Las ambiciones y pasiones de las siete están dominadas por un mismo...</p></div>

<div class="section">
<a href="http://xxx/item15529.html">
Daniel Goleman:<p><a> La inteligencia emocional en la empresa</a></p>
<a href="http:/xxx/item15529.html"><img src="http://xxx/1LV5374.gif" alt="Libro Usado - Daniel Goleman:La inteligencia emocional en la empresa" /></a>
<p>
¿Cuáles son los verdaderos criterios que guían a los empleadores a la hora de contratar a alguien?...</p></div>

<div class="section">
<a href="http:/xxx/item6160.html">
Jorge Luis Borges:<p><a> Evaristo Carriego</a></p>
<a href="http:/xxx/item6160.html"><img src="http://xxx/1LV1255.gif" alt="Libro Usado - Jorge Luis Borges: Evaristo Carriego" /></a>
<p>
Evaristo Carriego no es solamente la biografía de un poeta olvidado. En realidad, Jorge Luis Borges utiliza su existencia para recrear el suburbio...</p></div>

<div class="section">
<p>
<?php
include("http://xxx/Marcos/banercuadradox1.php");
?></p></div>

</div>
<!-- / End Column -->
<p>No hay edición más famosa que la primera, y en Librería usados disponemos de muchos de estos ejemplares irrepetibles. ¡Podrás encontrar libros de diversos escritores como por ejemplo Borges, Bioy Casares, Victoria Ocampo, Gabriel García Márquez, Leopoldo Lugones, Sidney Sheldon, Tom Clancy, Abelardo Arias, Agatha Christie, Albert Camus, Alberto Moravia, Aldous Huxley, Alejandro Dumas, Alicia Jurado, Álvaro de Laiglesia, Anne Perry, Clive Cussler, Conrado Nale Roxlo, Dalmiro Sáenz, entre otros...!</p>

<div class="column">

<div class="section">
<a target="_blank" href="http://xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http://xxxxx/item0006.html"><img src="http://xxx/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></div>

<div class="section">
<a target="_blank" href="http://xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http://xxx/item0006.html"><img src="http://xxxx/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<ul>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></ul>
<br style="clear:both;" /></div>

<div class="section">
<a target="_blank" href="http://xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http://xxx/item0006.html"><img src="http://www.elaleph.com/images/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></div>

<div class="section">
<p>
<?php
include("http://xxx/Marcos/banercuadradox1.php");
?></p></div>

</div> <!-- / End Column -->
<p>No hay edición más famosa que la primera, y en Librería usados disponemos de muchos de estos ejemplares irrepetibles. ¡Podrás encontrar libros de diversos escritores como por ejemplo Borges, Bioy Casares, Victoria Ocampo, Gabriel García Márquez, Leopoldo Lugones, Sidney Sheldon, Tom Clancy, Abelardo Arias, Agatha Christie, Albert Camus, Alberto Moravia, Aldous Huxley, Alejandro Dumas, Alicia Jurado, Álvaro de Laiglesia, Anne Perry, Clive Cussler, Conrado Nale Roxlo, Dalmiro Sáenz, entre otros...!</p>

<div class="column">

<div class="section">
<a target="_blank" href="xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http:/xxx/item0006.html"><img src="http://xxx/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></div>

<div class="section">
<a target="_blank" href="http://xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http://xxx/item0006.html"><img src="http://xxx/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></div>

<div class="section">
<a target="_blank" href="http://xxx/item0006.html">
Guy des Cars:<p><a> La justiciera</a></p>
<a href="http://xxx/item0006.html"><img src="http://www.xxx/libros/1LV0010.gif" alt="Libro Usado - Guy des Cars: La justiciera" /></a>
<ul>
<p>
Un abogado se enfrenta a un caso sumamente complicado. Un recluso ha sido acusado de asesinar a su compañero de celda...</p></ul></div>

<div class="section">
<p>
<?php
include("http://xxx/Marcos/banercuadradox1.php");
?></p></div>

</div>
<!-- / End Column -->

<br style="clear:both;">
<div class="spacer">&nbsp;</div>
</div>

</body>
</html>