HR – vodorovná čára

13. června 2006

•

Řešení ukazuje využití HTML elementu HR, tedy vodorovné čáry. Tag HR se již příliš nepoužívá, ale sémanticky do HTML stále patří. Proto je dobré v dokumentech používat. Ukážeme si, jak čáry ostylovat, aby graficky ladily s webovou prezentací.

Zde si můžete prohlédnout výsledek.

Inspirace pro toto řešení pochází z webů https://www.interval.cz/podklady/1998-2008/polacek/30/hr.html a http://www.sovavsiti.cz/css/hr.html.

CSS

hr
{
padding: 0;
}
.cara1
{
color: red;
background: red;
border: solid red 1px;
}
.cara2
{
border: dashed green 2px;
border-left: none;
border-right: none;
}
.cara3
{
color: #f70;
background: #f70;
border: solid #f70 1px;
margin: 3px 0;
width: 30%;
}
.cara4
{
height: 10px;
border: none;
background: transparent url(’83-1.gif‘) left top repeat-x;
}
.cara5
{
border: dashed #39c 2px;
border-left: none;
border-right: none;
border-bottom-style: solid;
height: 5px;
}
.cara6
{
height: 22px;
border: none;
background: transparent url(’83-2.gif‘) center top no-repeat;
}
.popisek
{
margin-top: 20px;
display: block;
}

XHTML

<html>
<body>
Klasická čára bez formátování
<hr/>
Červená čára
<hr class=“cara1″/>
Čárkovaná čára vytvořená pomocí horního a spodního okraje
<hr class=“cara2″/>
Podobná čára, spodní okraj je plný
<hr class=“cara5″/>
Čára použitelná například při psaní poznámek pod čarou
<hr class=“cara3″/>
Čára tvořená průhlednou GIF texturou
<hr class=“cara4″/>
Čára tvořená jedním obrázkem
<hr class=“cara6″/>
</body>
</html>