Jak nastylovat horizontální čáru (značka HR)?

23. srpen 2005 | Webdesign | Komentováno: 12×

Dlouho jsem přemýšlel jak nastylovat značku HR tak, aby tvořila jednobarevnou nestínovanou jednopixelovou čáru a aby to fungovalo jak v MSIE, Mozille, tak i v Opeře. Nakonec jsem na to přišel – stačí jí nastavit nulovou šířku okraje a výšku jeden pixel!

Ukázka:

Použitý styl:

border-width:0;
border-top:1px solid green;
height:1px;

Můžete použít i jiný styl okraje – třeba čárkovaný:

Použitý styl:

border-width:0;
border-top:1px dashed #bbb;
height:1px;
width:70%

Samozřejmě, kdo má rád grafiku ihned jej napadne dát značce HR nějaký pěkný obrázek na pozadí. Bohužel tudy cesta nevede, neboť MSIE kolem této horizontální čáry udělá rámeček, kterého jsem se nedokázal zbavit. Ostatní prohlížeče vykreslí grafiku bez rámečku

Použitý styl:

border-width:0;
height:20px;
width:90%;
background:url('/images/priklady/hr.jpg') no-repeat center center;
facebook | twitter | del.icio.us | linkuj | jagg | vybrali.sme.sk Ulož odkaz

Související články

Komentáře

1
Hondrej
23 srpen 2005, 11:21

Mám pocit, že jsem to viděl již vyřešené u www.vitdlou­hy.cz kde je to asi tak rok.

hr {height: 1px; color: #ddd; background-color: #ddd; border: 0px solid #ddd}

 
2
Marek Prokop
23 srpen 2005, 11:23

Pár řešení je taky na http://www.so­vavsiti.cz/css/hr­.html – ale pozor, je to přes tři roky staré a pro současnou Operu neaktuální.

 
3
Jan Bien
23 srpen 2005, 11:28

Snažil jsem se již několikrát o to samé, ale bez solidního výsledku. Problémy zde jsou nejen s výškou a rámečky, ale i okrajem (margin).

Pokud mohu čtenářům něco doporučit, tak pokud potřebují přesnost na pixel, nechť značku hr zcela skryjí hr {display:none} a různé takové „separátory“ vytváření nastavováním vlastnosti „border“ u blokových prvků.

 
4
waclaw
23 srpen 2005, 11:57

bohužel v opeře to nefunguje :(

 
5
Petr Václavek
23 srpen 2005, 12:52

[4] Teď jsem to zkoušel a opravdu to v Opeře zobrazuje rámeček, ale když to vypreparuji z této stránky a uložím do zvláštního souboru, tak je to OK, takže to nejspíse nějak ovlivňuje styl této stránky. Ještě se na to podívám

 
6
Daniel Dočekal
23 srpen 2005, 14:58

HR je kapitola sama pro sebe – dokáže přesvědčit IE k tomu aby „mizel“ obsah ze stránky při rolování. Nebavilo mě to nikdy zkoumat, takže jsme to vyřešil „doporučením“ na nepoužívání HR v článcích na blozích na pooh.cz

 
7
rarouš
23 srpen 2005, 15:01

Mám takový pocit, že to nefunguje ani Netscape 8. Pravděpodobně, přbíjíte styl HR co vkládáte sem globálním stylopisem. Otázkou je zda je nezbytné HR vůec používat, podlě mě nemá dnes žádné opodstatnění.

 
8
Plaváček
23 srpen 2005, 18:51

HR zásadně display none nebo jako killer plovoucích prvků. Nemá cenu se s tím vztekat.

 
9
Mordae
23 srpen 2005, 19:25

Deer Park Alpha 2 – SuSE/9.2 obě čáry špatně. Spodní má okraj, horní vypadá jako když border-bottom: 1px solid. Já to taky moc nehrotím, spíš píšu <div class=„hr“><hr /></div> a čáru schovám.

 
10
Honza
6 září 2005, 19:36

Já bych to viděl na: border:none; border-top:blablabla; pro explorer ještě třeba color:blablabla; a height:1px;

 
11
Ivorius
16 červenec 2006, 19:26

Taky jsem řešil podobný problém. Nastylování hr po plovoucím prvku

 
12
Petr Václavek
11 únor 2008, 09:50

Dero našel snad finální postup: http://dero.na­me/…veho-prvku-v

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce

Náhodný snímek


Kočka modelka

Zajímavé odkazy

Internetová jazyková příručka
Příručka, která nabízí ucelený přehled základních jazykových jevů češtiny, časté chyby, pravidla atd.

[Literatura]

Design Newz
Ty nejlepší ručně vybírané zahraniční články o webdesignu, webu, grafice, javascriptu...

[Blogy o webdesignu a spol]

jQuery Timelinr
Skvělý skriptík na prezentaci časové osy pomocí jQuery - návod, ukázky, zdrojáky.

[jQuery]

Origami instructions
Detailní a velmi přehledné návody na origami - zvládl jsem podle toho poskládat pár kousků i já.

[Hobby - kutilství]

Designspiration
Obrovská zásobárna inspirace pro grafiky - kvalitní vyhledávání podle klíčových slov, ale také podle barvy.

[Inspirační weby]

Fotobanky.cz
Můj nový web o microstock fotobankách - prodej a nákup fotografií, vektorových ilustrací, videa, flashe. Návody, tipy, triky, slevové kódy, přehledy, srovnání, rady...

[Fotobanky]

Můj antikvariát
Online vyhledávač v českých antikvariátech - půl milionu knih v cca 60 antikvariátech.

[Literatura]

Theses
Theses.cz je systém pro odhalování plagiátů mezi závěrečnými pracemi (bakalářské a diplomové práce). Slouží vysokým školám a univerzitám (nejen v ČR) jako národní registr závěrečných prací.

[Literatura]

jQuery bookmarklet generator
Výborný nástroj pro líné kodéry, aneb jak v bookrmarkletech a faveletech použít knihovnu jQuery.

[jQuery]

Facebook tipy a triky
Všechno co potřebujete vědět o Facebooku.

[Sociální sítě]

Další odkazy →