8 breves trucos CSS imprescindibles

En 8 Premium One Line Css Tips | Css Globe se resumen muy bien 8 trucos CSS y en los comentarios se añaden y corrigen algunos. Os lo dejo en español:

1. Centrar verticalmente con line-height

line-height:24px;

2. Prevenir que se el contenido salga del ancho fijado en diseños con elementos flotantes (por ejemplo una imagen)

#main {overflow:hidden; }

3. Para que los enlaces permanezcan en una sola lí­nea

a{
white-space:nowrap;
}

4. Para que siempre aparezca el scroll vertical en Firefox y de esta forma no baile el ancho en páginas en las que sí­ es necesario

html{overflow: hidden;}

5. Centrar elementos horizontalmente

margin:0 auto;
text-align: center;

6. Quitar el scroll vertical de los textarea en IE

textarea{overflow:auto; }

7. Forzar saltos de página al imprimir

h2{
page-break-before:always; }

8. Quitar los bordes de los enlaces

a:active, a:focus{ outline:none; }
Escribí esto el 12/03/2008

7 comentarios

  1. @agusrdelia dice:

    Puede ser que el punto cuatro sea overflow: auto;?

    Agrego.

    Usar el selector “+” para simular first-child. Por ejemplo: Si tengo tres columnas separadas por 20px en vez de agregar la clase “first” para sacarle el padding-right se puede hacer esto:

    .columna{width: 200px;}
    .columna + .columna {padding-right: 20px;}

    Ahi todas menos la primer columna tiene padding ;)

  2. @agusrdelia dice:

    Era padding-left en el comentario de arriba :D

  3. Kseso dice:

    Dos anotaciones y una petición de retirada:

    En el 1º: estaría bien añadir que eso centra en la vertical si la altura declarada es ese valor.

    El 5º el “text-align: center;” es un error muy extendido pensar que eso “centra”. Viene desde los tiempos de ie6 y de quienes no usaban doctype porque les que fallaba el margin auto.

    Y la petición de retirada: el 8º punto.
    Todo un error y atentado contra la accesibilidad y la navegación por teclado. Si se quita el outline al focus en los enlaces es obligado proveer otra forma para indicar qué elemento tiene el foco.

    Un saludo

  4. Kseso dice:

    Mis disculpas.
    Llegué al artículo por un newsletter sin fijarme en la fecha de publicación (2.008). Sólo en la de los comentarios.

    • ceslava dice:

      Hola,

      No pasa nada, mis disculpas por no actualizar, es una entrada muy antigua, pensé que estaría ya enterrada en los anales de Google.

      Por curiosidad cómo habéis llegado aquí??

      Saludos

  5. José dice:

    Si buscas en Google “css forzar una sola linea” sales en primer lugar

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies