Busca

Carregando...

quarta-feira, 25 de março de 2009

Linha horizontal

Nível: intermediário

A Linha Horizontal (horizontal rule) é adicionada por meio da tag <hr>.

Dimensões e alinhamento

O elemento hr aceita alinhamento e redimensionamento, tanto de largura (width) como de espessura (height). Essa personalização permite até mesmo que você transforme uma linha horizontal em um retângulo ou em uma linha vertical.

Por padrão, as linhas horizontais são alinhadas à esquerda, têm largura de 100% da tela e o valor de height pode variar entre os navegadores.

Código 1:

<hr style="width: 90%; height: 5px; text-align:center" />

Exemplo 1:

hr-codigo1

Código 2:

<hr style="width: 50px; height: 50px; text-align:center" />

Exemplo 2:

hr-codigo2

Código 3:

<hr style="width: 50%; height: 1px; text-align:right" />

Exemplo 3:

hr-codigo3

Código 4:

<hr style="width: 5px; height: 300px; text-align:center" />

Exemplo 4:

hr-codigo4

Bordas

Pelos exemplos acima você percebe que o elemento <hr>, por padrão, tem uma borda que pode ser exibida de formas diferentes nos navegadores. Por isso é muito importante customizar esse atributo para que seus visitantes vejam do mesmo jeito, independente do browser.

Código 5:

<hr style="width: 90%; height: 5px; text-align:center; border:1px solid #ff0000;" />

Exemplo 5 no Internet Explorer:

hr-codigo5

Exemplo 5 no Firefox:

hr-codigo5-firefox

Código 6:

<hr style="width: 90%; height: 25px; text-align:center; border-width:5px 5px 8px 5px; border-style:dotted groove double ridge; border-color:#00ccff;" />

Exemplo 6 no Internet Explorer:

hr-codigo6

Exemplo 6 no Firefox:

hr-codigo6-firefox

Cores

Para o Internet Explorer, o atributo que define a cor da linha horizontal, é color. Para os demais navegadores, o atributo correto é background. Assim sendo, defina os dois atributos com o mesmo valor.

Código 7:

<hr style='width: 90%; height:5px; text-align:center; border:1px solid black; color:#ffff00; background:#ffff00;' />

Exemplo 7:

hr-codigo7

Código 8:

<hr style='width: 90%; height:5px; text-align:center; border:0px; color:#ff9999; background:#ff9999;' />

Exemplo 8:

hr-codigo8

Imagem como background da linha

Para que a imagem seja exibida no Internet Explorer, você não pode definir o atributo color. Para saber mais sobre imagens de fundo, visite o post Imagens no background.

Código 9:

<hr style='width: 100%; height:10px; text-align:center; border:0px; background:#000000 url(http://lh5.ggpht.com/_HlIyV_enpD8/SYZTu_gbHnI/AAAAAAAADRU/i7sEX-OhdJc/s144/tile.684377544.gif);' />

Exemplo 9:

hr-codigo9

Código 10:

<hr height:42px; background:url(http://lh4.ggpht.com/_HlIyV_enpD8/SYZTc-LOqXI/AAAAAAAADRA/lB6zBS-UArs/s144/tile.614236801.gif) #000000 center center; border:5px dotted #000000; border-left:0px; border-right:0px;>

Exemplo 10 no Internet Explorer:

hr-codigo10

Exemplo 10 no Firefox:

hr-codigo10-firefox

Na folha de estilos:

Nível: avançado

Você pode definir como serão suas linhas horizontais diretamente na folha de estilos, como no exemplo:

hr {color:#ffcc00; background:#ffcc00; border:0px; width:90%; height:3px; text-align:center;}
]]></b:skin>

Exemplo:

Posts relacionados