Visto en Roman Cortes

El problema que planteo es el siguiente: tu creas tu layout con tres columnas y luego quieres que tus columnas, aunque dos de ellas no tengan contenido, lleguen siempre hasta la altura de la que más contenido tenga. Normalmente obtienes algo así:

¡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

Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas.

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

Llevo bastante tiempo intentando lograr hacer el efecto de arrastrar y soltar de las cajas de igoogle, hay poquísima información en la red respecto a cómo se consigue crear este efecto, a pesar de que es algo muy interesante a nivel de diseño.

¿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

Cuando maquetamos una web, lo primero siempre es tener una estructura definida bien sólida 2 columnas -3 filas, 4 filas- 2 columna,.. etc. Siempre he defendido el trabajo sin tablas, y si eres iniciado y crear estas filas y columnas te cuesta, puedes optar por descargártelas desde  este link. Los chicos de IronMyers se han molestado en crear una serie de plantillas con muchas combinaciones.

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.

Para hacer las cosas bien al trabajar con CSS tenemos un abanico de opciones tan grandes como nuestro dominio del lenguaje, pero para que las cosas salgan mal hay una cantidad enorme de errores que podemos cometer.

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.

Estoy totalmente en contra de los hacks css, siempre hay otro camino para conseguir el diseño que queramos (Por favor, no uses nunca tablas. ¡ese no es el camino!). Pero cuando no queda otro camino hay que usarlos, aquí dejo una lista de ellos.

• _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