Visto en Roman Cortes

¡No se alargan las columnas como quieres!, es debido a que lo normal, es que las columnas se expandan según el contenido que tengan. Una opción rápida y chapuzas, sería poner un display:block a cada columna con el height deseado. Pero ¿Y si este es el layout general?, ¡entonces tendríamos que cambiarlo a todas nuestras páginas internas!, vamos una locura y algo muy feo..

¿La solución?

Asignar a las tres columnas, un padding bajo muy grande (32768px es el número máximo de pixeles posibles) y a su vez un margin negativo igual de grande. A su vez, deberemos crear un contenedor global que oculte lo que sobra.

#izquierda, #central, #derecha {
padding-bottom: 32768px;
margin-bottom: -32768px
}
#contenedor {overflow: hidden}

Desventajas

• Requiere de un contenedor div extra
• Si vas a usar anclas en la misma página ( <a name=”seccion”></a> ) y este ancla estiviera dentro de esta columna, el contenido que esté antes de ese ancla desaparecerá y permanecerá invisible.
• Me da un poco de rabia no haberlo encontrado antes

Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones:

border-radius (estándar css)
-moz-border-radius (cuando se trataba de mozilla, aunque desde la versión 3.0 ya lo hacemos con la instrucción anterior)
-webkit-border-radius (safari y chrome)

El problema de hacerlo de este modo, es el de siempre, el maldito Internet Explorer, que ni en su versión 8 implementa estos estándares.
Una solución para tener las esquinas redondeadas en todos los navegadores, incluido Internet Explorer es usar JQuery Corners.
jQuery Corners es un plugin que nos permite realizar esquinas redondeadas de una manera bastante sencilla, sin imágenes o maquetación adicional y engorrosa en el código. Simplemente se define una clase y se aplica a un elemento HTML. Veamos como hacerlo:

• Primero descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas y :

• Luego define la clase la cuál creará las esquinas redondeadas de la siguiente forma:

• Y por último simplemente aplica la clase a cualquier elemento HTML, como por ejemplo a un típico selector DIV:

Esta es la forma más básica de usar el script aunque posee varias opciones de configuración, como puede ser el radio de curvatura general o para cada una de las esquinas o también podemos aplicar el script a botones de un formulario. Todas estas las podemos consultar en el sitio oficial de jQuery Corners
Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Links | jQuery – jQuery Corners

¿Como he conseguido lograr el efecto? La base de todo es la clase prototype que podeis descargar desde ese link. Prototype es un framework hecho en JavaScript que se sirve para ayudar a un desarrollo sencillo y dinámico de aplicaciones web (como cualquier framework) con el uso de técnicas Ajax.
Luego mediante CSS, y definiendo las capas en el init() de javascript (se encuentr todo en el fichero index.html) podremos adaptarlo como queramos.

Enlaces |Demo – Prototype

Como verás, el código quedará más limpio y estructurado, con la consecuente perdida de peso en nuestro site que nos ayudará a que cargue más rápido.

Aquí dejo 5 de los errores más comunes al manejar css, al que agrego otro propio de nuestro lenguaje.
No cerrar los corchetes.

Mientras definimos los atributos de cada elemento, nuestro código se llena de un mar de corchetes abriendo y cerrando, por lo que dejar uno abierto es sumamente fácil y causará que todo el código abajo de él no trabaje debidamente. Para evitar este error hay que ser muy ordenado con nuestro código y para encontrar este corchete abierto el firebug es una estupenda herramienta.
#conteneiner {width: 100%;margin:0 auto;/* Falta el corchete de cierre, todo el código siguiente no tendrá efecto */
#header {
background-color: #fff;
font-size: 0.8em;
}
No listar los atributos adecuadamente.

Un problema similar al anterior se presenta al listar los atributos de cada clase o selector, cada atributo debe terminar con un punto y coma. No terminar un atributo con el punto representará automáticamente la anulación del siguiente atributo, creándonos un dolor de cabeza para buscar porque no se aplica un color, un tipo de letra, etc.
#header {background-color: #fff/* Falta el punto y coma que termina un atributo, el siguiente atributo no será leido */font-size: 0.8em;
}
Escribir mal el nombre de un selector o clase.
Todos tenemos malas pasadas con el teclado y escribir código no es la excepción. Hay que tener cuido al escribir correctamente el nombre de la clase o selector porque de otro modo simplemente es como si no existiera.
#haeder {/* la cabecera regularmente se escribe "#header", no "#haeder", esto hace imposible su lectura */background-color: #fff;font-size: 0.8em;
}
Escribir mal el nombre de un atributo.

Muy similar al anterior, pero cometiendo el error de escribir mal un atributo, que provocará que simplemente no se aplique.
#header {background-color: #fff;fotn-size: 0.8em;/* El atributo "fotn-size" no existe y no podrá ser leído, el correcto es font-size */
}
Confundir el valor de los atributos.

Cada atributo tiene una cantidad de opciones predefinidas que no deben ser confundidas. Esto lo da la experiencia y después de consultar la literatura debida. Dar mal el valor a un atributo hará que sea reconocido.
#header {background-color: #fff;font-size: 0.8em;vertical-align: center;
/* La alineación vertical no permite "center", en ella se usa el valor "middle" para alinear al centro verticalmente */
}
Acentos y caracteres del español en clases y selectores.

Como hablantes del español es muy tentador usar las palabras tal como las dicta el diccionario, pero para nuestra desgracia, los acentos y caracteres propios del español (como la ñ) son tomados como caracteres extraños en varios navegadores y por tanto, convertidos en sus equivalente, algo poco que resulta recomendable y que en muchos casos se traduce en que ni las clases, ni sus atributos sean aplicados.
#píe-de-página {/* Aunque nos gusten los acentos (¿si?), su uso es muy poco recomendado */clear: both;font-size: 0.7em;
}
Estos son errores que seguramente la mayoría que ha trabajado con CSS ha cometido o cometerá alguna vez. La recomendación general es ser lo más organizado con el código, para que en verdad el código sea “poesía”.

Todo se resume en esto, los dos primeros parámetros numericos que pongas, uno será el desplazamiento horizontal y otro el vertical, no es una propiedad muy común y muchos no la conocen porque el dreamweaver no la desliza (son medidas y es lógico). Pero ayuda bastante a poner índices en nuestras <ul> o <dl> por ejemplo.

• _left barra delante de la propiedad ejemplo:( .menu{ left:40em;_left:30em;}). La barra solo actua en IE6.
• .left punto delante de la propiedad ejemplo:( .menu{ left:40em;.left:30em;}). El punto actua tanto en IE6 e IE7.
• .menu, x:-moz-any-link {left:40em}. Estilo solo para mozilla firefox 1.0 o superior.
• @media screen and (-webkit-min-device-pixel-ratio:0) {.menu{ left:40em;.left:30em;}}. Solo para Safari y Opera

Intenta evitarlos, normalmente un hack lleva a otros problemas de proporciones. Pero si vez que no queda otro remedio…

En esta web podemos encontrar multitud de diseños y esquemas para profundizar en CSS2. Como programar una web al completo sin usar ni una sola tabla, evitando los continuos problemas que generan, creando rapidez de carga del site e incluso posicionando mejor nuestras web.

Es bastante completa, una de las cosas destacadas que se realiza con estos diseños, es la posibilidad de añadir los textos que queramos mediante imagenes, pero haciendo que los buscadores los indexen de manera que los vean como texto, de modo que estéticamente quede bien al usuario y permitiendonos usar las fuentes que queramos. Se la recomiendo a todo aquél que quiera profundizar el tema..

Link | CssZenGarden