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. Normalmente la solución es incluirlas todas, pero eso tampoco funciona siempre.

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, en Mozilla las líneas se alinean al centro. Pero en Internet Explorer es necesario establecer la propiedad text-align con el valor center.

	hr { width: 50%; }
	hr { width: 50%; text-align: center; }

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-left: 50%;}
	hr { width: 33%; margin-left: 33%;}
	hr { margin-left: 33%; margin-right: 33%;}
	hr { margin-left: 20px; margin-right: 20px;}

Parece que Mozilla se aclara cuando se le dice la anchura de la línea, pero no se aclara cuando se le dan sólo los dos márgenes. Sin embargo Internet Explorer 6 parece que primero reserva los márgenes y en el resto dibuja la línea (si la línea está expresada como porcentaje, no lo entiende como porcentaje del total, sino del total menos los márgenes). No tengo claro qué se podría escribir para que los dos navegadores lo entendieran correctamente.

Este punto lo tendría que estudiar un poco más

Autor: Bartolomé Sintes Marco
Última modificación: 7 de octubre de 2003