Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:
<div class="clear"></div>
existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.
Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.
Muchas veces cuando estamos diseñando nuestras páginas web, nos encontramos con que vamos añadiendo estilos a nuestras CSS, por lo que al final tenemos un CSS bastante desorganizado y caótico. Aquí os dejo unos pocos consejos para tener unas CSS limpias y organizadas.
Agrupa los estilos: júntalos por categorías (cabecera, tipografía, …) y sepáralos mediante comentarios.
Entre todos los consejos, algunos me gustarÃa destacar, puede que sean conocidos de sobra, pero nunca viene mal volver a recordarlos.
Para empezar, usa una página en blanco, dibuja dónde quieres cada bloque (cabecera, contenido, paneles laterales, pie de página), sitúa las capas y empieza a crear los estilos.
Organiza tus CSS en bloques y añade comentarios para indentificarlos, cuando quieras añadir, modificar o borrar, siempre será más cómodo y rápido si lo haces asÃ.
Escribe los contenedores al mÃnimo, piensa bien en la estructura y no lo llenes todo de capas.
Evita los selectores y el hacking, aunque sobre el hacking yo dirÃa que ni lo uses.
Escribe en los comentarios al inicio los códigos de colores que utilices para facilitarte el trabajo.
Escribe el nombre de los ids y los class de acuerdo con la semántica.
Acorta la notación hexadecimal: #334455 es #345. Yo en esto fallo, me cuesta hacerlo asÃ, malas costumbres.
Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):
Ajax MGraph: desarrollado en XHTML u CSS, es una gráfica interactiva que funciona en Firefox, IE y Opera. Incluye integración PHP y de la base de datos.
PlotKit: gráfica de tarta y de puntos, soporta Canvas y SVG y soporte de navegador.
Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorÃas, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas: