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á ilustrace

image

Náhodný snímek


Minaret

Zajímavé odkazy

Flatika - originální trička pro cyklisty
Trička s originálními grafickými motivy pro cyklisty, bikery a milovníky jízdních kol.

[Kolo]

Velikosti obrázků pro soc. sítě
Kompletní přehled požadovaných rozměrů pro záhlaví a profily na jednotlivých sociálních sítích (Facebook, Twitter, Google+)

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

color.hailpixel.com
Geniálně jednoduché a přehldné míchátko barev - svou paletu si prostě naklikáte.

[Barvy]

UmSemUmTam
Portál, kde neziskovky můžou hledat profesionály pro své projekty a naopak, grafici a programátoři zde můžou pomoci neziskovkám - skvělý nápad!

[Práce, zaměstnání]

Rembrandted KIDS
Zábavný fotoblog kamarádky na mateřské dovolené - fotí své děti naaranžované podle známých uměleckých obrazů.

[Fotografie]

TrekView
Výborný prohlížeč GPX souborů. Jako podkladovou mapu používá podklady z google map a seznamáckých map (včetně turistických!)

[Sport]

Audioteka.cz
Jeden z prvních online obchodů nabízející české audio knihy.

[Literatura]

bab.la
Online slovník pro 22 jazyků, docela slušná slovní zásoba, jen trochu více reklamy, než by mi bylo milo.

[Různé]

Hrajeme.cz
Asi nejlepší, nejpodrobnější a nejobsáhlejší portál, který se zabývá deskovými hrami.

[Hry]

Font Awesome
Font se stovkou pěkných ikon, zcela zdarma i pro komerční použití.

[Grafika, elementy]

Další odkazy →