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

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;

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
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
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
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
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
23 srpen 2005, 18:51

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

 
9
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
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
16 červenec 2006, 19:26

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

 
12
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