Igual aprendemos algo

nonews

Adornando una línea horizontal

| lunes, 5 de octubre de 2009
Como ya adelantábamos en este post, para colocar una línea horizontal en algún lugar del post o página web, sólo es preciso colocar la etiqueta HTML siguiente:
<hr />

El resultado será esta línea que vemos aquí:


A poco que nos fijemos veremos que ocupa todo el ancho del bloque de escritura.
Pero podemos cambiar eso haciendo uso de los atributos o modificadores que acepta esta etiqueta.
Para darle un ancho concreto a esta línea tendremos que especificar ese ancho, mediante el atributo width, bien en píxeles o en porcentaje respecto del ancho total.
El código sería como este:
<hr width="100px" />

o también así:
<hr width="50%" />

Y lo que veríamos son estas dos líneas respectivamente:




Ahora, al ver esto, nos damos cuenta de otra cosa, y es que por defecto las líneas se colocan centradas dentro del post.
Esto también lo podemos cambiar si le añadimos el atributo align.
Si escribimos esto:
<hr align="left" width="50%" />

lo veremos así:


Y a la derecha sería:
<hr align="right" width="50%" />




Ya metidos en harina, ¿por qué no darle un grosor determinado a la línea?
Utilizaremos para ello el atributo size, en píxeles:
<hr size="10px" />

ó <hr size="10" />

Veremos esto:



Ahora, parece que se echa en falta un poco de color.
Pues nada, a por ello con el atributo color, dando los valores en formato hexadecimal, por ejemplo, el rojo sería:
<hr color="#ff0000" size="10px" />

y se verá así:



Notas importantes:

Dependiendo del navegador que usemos los resultados pueden variar ligeramente.

Si nuestra página o blog usa plantilla CSS en la que se haya definido el comportamiento de la etiqueta hr, los resultados no serán los mismos que hemos indicado aquí.

Todos los atributos que hemos explicado anteriormente han quedado anticuados a partir de la versión HTML 4.01, por lo que pudieran quedarse obsoletos y no funcionar en un futuro, aunque por el momento todos los navegadores los interpretan aún por motivos de compatibilidad.



En la actualidad es conveniente, aunque sea un poco más complicado, utilizar la sintaxis de estilos propia de las CSS.
Tomando los mismos ejemplos de arriba, se escribirían así:

En lugar de:
<hr align="left" width="50%" />

pondríamos:
<hr style="width:50%;text-align:left" /> (IExplorer y Opera)

<hr style="width:50%;margin-left:0" /> (Firefox, Chrome y Safari)

Si queremos que lo entiendan todos los navegadores simplemente lo escribimos todo, es decir:
<hr style="width:50%;text-align:left;margin-left:0" />

El resultado es este:



En lugar de:
<hr color="#ff0000" size="10" />

pondremos:
<hr style="height:10px;color:red" /> (IExplorer)

<hr style="height:10px;border-width:0;background-color:red" /> (Firefox, Opera, Chrome y Safari)

Para todos ellos a la vez:
<hr style="height:10px;border-width:0;color:red;background-color:red" />

Y el resultado:


Actualización (25-10-09):
Uno de mis lectores me dice que ha intentado colocar una barra horizontal y no le sale centrada por defecto, como yo decía en el post.
Normalmente esto es debido a que la plantilla tiene algunas opciones predeterminadas para mostrar ciertos elementos.
Cuando eso ocurre la solución más sencilla es añadir el siguiente código (escrito en rojo):
<hr align="center" width="50%" />

o bien:
<center><hr width="50%" /></center>

2 comentarios:

Anderea dijo...

¡Genial, Jose!

Pero como me ponga a dornar voy a dejar superdesgastado el enlace con este entrada, porque con mi memoria "pez" recordar todo esto va a ser como "Misión impposible del 4 al 255", por lo menos.

De todos modos, gracias por compartir.

Juan Nadie dijo...

Joé, tío, es que no paras de investigar. Chispas lo voy a sacar yo a esto.

Los últimos comentarios