Líneas horizontales

En esta lección aprenderás las propiedades que se pueden aplicar a una línea horizontal <hr /> de una página web:

• Color
• Tamaño
• Alineación

Por desgracia, cada navegador trata las líneas de una manera distinta. Mozilla considera las líneas como bloques, mientras que Internet Explorer considera las considera como elementos en-línea. Por eso, las propiedades que permiten establecer las características de una línea son distintas en cada navegador. En este caso, la solución es incluirlas todas.

Color de una línea

El color de una línea se establece de distinta manera en Mozilla y en Internet Explorer:

• En Mozilla, la propiedad background-color establece el color de la línea.
• En Internet Explorer, la propiedad color establece el color de la línea.

Para asegurarte de que la línea se vea del mismo color en ambos navegadores, puedes establecer las dos propiedades (color y background-color) con el mismo valor.

	hr { background-color: red; }
	hr { color: red; }
	hr { background-color: red; color: red; }

Tamaño de una línea

La propiedad height establece la altura de la línea.

hr { height: 10px; }

La propiedad width establece la anchura de la línea. Conviene expresarla como porcentaje.

hr { width: 50%; }

Alineación de una línea

Por omisión, las líneas se alinean al centro.

hr { width: 50%; }

La alineación de una línea se establece de distinta manera en Mozilla y en Internet Explorer::

• En Mozilla, las propiedades margin-left y margin-right establecen la posición de la línea. Los valores de estas propiedades se pueden expresar como distancias o como porcentajes.
• En Internet Explorer, la propiedad text-align establece la posición de la línea. Los posibles valores de text-align son left (izquierda), right (derecha) y center (centro).

Para asegurarte de que la línea se alinee de la misma manera en ambos navegadores, puedes establecer las dos propiedades simultáneamente.

El ejemplo siguiente muestra cómo se alinea una línea a la izquierda:

	hr { width: 50%; margin-left: 0px;}
	hr { width: 50%; text-align: left;}
	hr { width: 50%; margin-left: 0px; text-align: left;}

El ejemplo siguiente muestra cómo se alinea una línea a la derecha:

	hr { width: 50%; margin-right: 0px;}
	hr { width: 50%; text-align: right;}
	hr { width: 50%; margin-right: 0px; text-align: right;}

Las propiedades margin-left y margin-right permiten establecer la posición de la línea en cualquier posición, expresada como porcentaje o distancia.

	hr { width: 25%; margin-right: 50%;}
	hr { margin-left: 33%; margin-right: 33%;}
	hr { margin-left: 20px; margin-right: 20px;}

Parece que Mozilla se aclara cuando se le dice width, mientras que Internet Explorer se aclara cuando no se le dice, pero tengo que mirarlo con cuidado.

Autor: Bartolomé Sintes Marco
Última modificación: 20 de enero de 2003