Centrar horizontalmente bloques dentro de un bloque contenedor

Problema: Queremos tener una lista de bloques ("elementos_a_centrar") dentro de un contenedor, que estén centrados respecto a ese contenedor.

Solución: Metemos los "elementos_a_centrar" dentro de un contenedor auxiliar ("contenedor_auxiliar") con el estilo:

.contenedor_auxiliar {
   float: right;
   position: relative;
   left: -50%; /* ó right 50% */
}

A los "elementos_a_centrar" les asignamos el estilo:

elementos_a_centrar {
   position: relative;
   left: 50%;
}

Referencia a la solución original, con ejemplo: http://codepen.io/alexandredees/pen/ojaFr

Top frameworks de CSS actuales

• Bootstrap 
• Foundation 
• Skeleton
• Kube

Artículo con la comparación de los 3 primeros [en inglés][en ruso].

Hack CSS exclusivo del IE8

Con éste hack, o truco, conseguimos que la propiedad de estilo sólo se aplique en el internet explorer 8. Ni Firefox, ni versiones inferiores de explorer detectarán las propiedades definidas de esta manera.

selector {propiedad: valor\0/;}

La clave del truco es "\0/", que se pone tras el valor de la propiedad del estilo.

Un ejemplo:

<!-- Definición del estilo en alguna parte -->

<style type="text/css">

p.textoRojoEnIE8 {color: #ff0000\0/;}

</style>

...

<!-- Código html dentro del tag body -->

<p class="textoRojoEnIE8">

El texto de éste párrafo se verá rojo, sólo en Internet Explorer 8.

</p>

<!-- O definiendo el estilo directamente en el tag. -->

<p style="color: #ff0000\0/;">

Éste párrafo también se verá en rojo, sólo en IE8.

</p>

Fuente: Internet Explorer 8 only CSS hack

Truco CSS - fijar ancho mínimo del elemento body

No es ninguna noticia que en CSS, incluso en navegadores que cumplen la mayoría de los estándares, no funcione todo como nos esperamos y haya que recurrir a trucos, que además la mayoría de las veces parecen de lo más irracionales.

Vía un artículo de script&style me entero de un hack útil que no conocía: fijar el ancho mínimo del elemento body. Hice la prueba únicamente en FF3 (firefox 3) y funciona.

Problema:

Si tenemos una imagen de fondo de, supongamos, ~2000 px, centrada dentro del elemento body, al redimensionar estrechando la ventana del navegador, el elemento body tambien se estrechará redimensionando su imagen de fondo, con lo que es posible que por debajo de un ancho determinado se desencaje el diseño. Nos gustaría fijar un ancho mínimo, por debajo del cual el elemento body no siga estrechándose. Si probamos a asignar únicamente la regla min-width al elemento body, ésta parece no aplicarse.

// sin el hack, la imagen seguirá redimensionándose por debajo de ese ancho
body{min-width:958px;}

Si no se utiliza la regla color en el elemento html, la imagen de fondo se redimensiona, desencajando el diseño.

El hack:

Para que la regla min-width surta efecto, es necesario añadir (no me preguntéis porque, pero funciona) una regla color, asignando el valor a, por ejemplo, blanco, al elemento html.

html{color: #000;} // sin esto el min-width del body no funciona
body{min-width:958px;}

Si se utiliza, la regla min-width del elemento body hace efecto, fijando el ancho mínimo por debajo del cual la imagen de fondo deja de redimensionarse.

Potente creador/editor de menús CSS: CSS QuickMenu

CSS QuickMenu es una potente aplicación web para crear menús CSS.



Una vez seleccionado el tipo de menú y pulsando sobre el botón "customize menu", se tiene acceso al editor.

El editor permite:

* Añadir/actualizar menús y submenús
* Actualizar colores, fuentes, bordes,...
* Elegir las animaciones
* Elegir las formas y contornos CSS
* Decidir si el menñu será accesible vía teclado, si será vertical/horizontal y mucho más...

También permite que le añadas tus propios estilos CSS y comprobar los resultados instantáneamente.

Después de haber creado el menu, para obtener los códigos HTML y CSS hay que dar al botón de "save" (Desde el menú superior File -> Save ó pulsando sobre el botón que tiene el icono de un disquete azul, el primero a la izquierda).

Conversión de px (pixeles) a em y viceversa

En la web "PXtoEM.com" se puede visualizar y calcular cómodamente la conversión de unidades dadas en px (píxeles) a em (unidad de longitud relativa a la altura de la fuente del elemento), y viceversa. Ambas unidades tienen un uso extendido en las definiciones de hojas de estilo ( particularmente en css).



Otro conversor de pixeles a em.
(En el momento de redactar este post, éste último conversor seguía teniendo algunos fallos para Opera y Safari).