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


Mňau!

Zajímavé odkazy

ColorSuckr
Webové udělátko, které z vámi zadaného obrázku vygeneruje paletu 12ti barev.

[Barvy]

Pdfcrowd
Služba, která nabízí skripty a své API pro snadnou konverzi HTML do PDF. Zajímavá je možnost přidat na web jednoduchý odkaz, který po vložení do libovolné stránky umožňuje stažení její PDF verze.

[Tvorba stránek - návody, nástroje]

Honzova Hypotéka
Pokud hodláte kupovat nemovitost (dům či byt), tak se vám bude hodit tato hypotečně poradní služba - po zadání základních údajů o nemovitosti, své bonitě a výši hypotéky vám budou banky a hypoteční poradci nabízet své produkty. První odpovědi dostanete již během hodiny, další v průběhu týdne. Já sám jsem jich získal téměř dvacet a dozvěděl jsem se, jaké jsou na trhu možnosti - to vše zdarma - k ničemu se nezavazujete. Samozřejmě, když vás nějaká nabídka zaujme, tak se můžete zdarma spojit s nabízející bankou/poradcem a nabídku dotáhnout do finále - uzavření smlouvy.

[Různé]

Hypoteční kalkulačka
Končeně pořádný hypoteční kalkulátor, který nejen vypočítá měsíční splátku hypotéky, ale zobrazí také splátkový kalendář po jednotlivých splátkových obdobích rozdělených na úroky a umoření splátky.

[Různé]

CSS chyby a nekonzistence ve Firefoxu 3.x
Přehled chybného interpretování CSS u Firefoxu (bohužel bez nástinu řešení)

[Chyby CSS a jejich řešení]

jPlayer
jQuery audio player plugin pro vaše stránky - lze snadno nastylovat, obsahuje i čistě textovou verzi a vypadá dobře.

[JavaScript]

Better drop shadows
Jednoduchá technika jak udělat ve Photoshopu realističtější stíny.

[Photoshop]

13 Simple CMS Options
Tipy na jednoduché redakční systémy, které mnohdy nepotřebují ani databázi.

[CMS systémy]

Nejlepší jQuery lightboxy
Článek s přehledem lightboxů založených na knihovně jQuery.

[JavaScript]

jQuery News Ticker
Docela pěkný a jednoduchý news ticker pro jQuery. Právě jsem ho použil na jednom webu.

[JavaScript]

Další odkazy →