Consejos CSS en una linea

Otro post antiguo, recuperado gracias al RSS.

Traducción libre de un articulo publicado por CSS Globe con 8 soluciones muy sencillas a problemas que nos suelen dar muchos dolores de cabeza.

Las mejores soluciones son muchas veces las más simples. Una lista de 8 consejos (o trucos) con una sola propiedad CSS.

• Centrado vertical con line-height: Cuando tenemos un objeto contenedor con una altura fija, podemos usar la propiedad line-height para centrar verticalmente el contenido. Se puede comprobar en esta demo.

  line-height: 24px;

• Prevenir que el contenido sobredimensionado en objetos flotantes con un tamaño fijo rompa nuestra plantilla: Cuando el contenido (p.ej; una imagen panorámica) se coloca en un contenedor flotante con un tamaño fijo, es posible que descuadre nuestra plantilla. Para evitar esto, se puede usar este truco que ocultara parte del contenido pero mantendrá nuestra plantilla intacta.

  #main{overflow:hidden;}

• Evitar saltos de linea en los enlaces:

  a{white-space:nowrap;}

• Mostrar siempre el scroll vertical en Firefox: Firefox esconde por defecto el scroll vertical si la página no lo necesita. El “problema” es que si tienes páginas que precisen el scroll y otras que no, al pasar de unas a otras, nuestro diseño sufrirá un pequeño salto hacia la izquierda.

  html{overflow:-moz-scrollbars-vertical;}

• Central elementos horizontalmente: Con esta linea sera suficiente en todos los navegadores modernos para centrar horizontalmente cualquier elemento.

  margin:0 auto;

• Ocultar el scroll vertical de los textarea en IE: En IE se muestra por defecto el scroll vertical en los textarea. Para ocultarlos siempre que no sean necesarios con esta sola propiedad será suficiente.

  textarea{overflow:auto;}

• Forzar saltos de página al imprimir un documento: Con esta linea de código, podemos controla los sitios donde deseamos que haya un salto de página al imprimir nuestra (valga la redundancia) página.

  h2{page-break-before:always;}

• Ocultar los bordes de los enlaces activos:

  a:active, a:focus{outline:none;}

Espero que os sean de utilidad .