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...
Ejemplo para un contenedor de 900px centrado:
#contenedor {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 900px;
}
Ejemplo:
#caja {
float: left;
width: 300px;
}
Ejemplo:
#caja {
float: left;
width: 290px;
padding-left: 10px;
background-color: #FFE6DD;
}
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.
- 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.
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.
| Por: richard | 18/6/2007
|
| Por: Javi | 18/6/2007
|
| Por: Final 2.0 | 09/9/2007
|
![]() FerCbaA... | 2 o más columnas. | 01/9/2009 |
![]() sefo262 | Problema css | 25/9/2010 |
![]() Obo | ¿Ya no queda nadie aprendiendo? | 02/1/2012 |