Sekce

Náhodný snímek

Medové kuře

21.02.07
Komentáře: 8

Důležité články

Reklama

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

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;
Ulož odkaz na: del.icio.us | linkuj.cz | jagg.cz | vybrali.sme.sk

Související články

Komentáře

  1. 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}


    — Hondrej    23 08 2005 - 11:21    #

  2. 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í.


    — Marek Prokop    23 08 2005 - 11:23    #

  3. 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ů.


    — Jan Bien    23 08 2005 - 11:28    #

  4. bohužel v opeře to nefunguje :(


    — waclaw    23 08 2005 - 11:57    #

  5. [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


    — Petr Václavek    23 08 2005 - 12:52    #

  6. 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


    — Daniel Dočekal    23 08 2005 - 14:58    #

  7. 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í.


    — rarouš    23 08 2005 - 15:01    #

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


    — Plaváček    23 08 2005 - 18:51    #

  9. 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.


    — Mordae    23 08 2005 - 19:25    #

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


    — Honza    6 09 2005 - 19:36    #

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


    — Ivorius    16 07 2006 - 19:26    #

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


    — Petr Václavek    11 02 2008 - 09:50    #
Přidat 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.

Pamatovat
- Toto je otázka proti SPAMU, zapište výsledek

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje sexy formátování texy. Například nový odstavec získáte 2x odřádkováním, citace započněte znakem ">", 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]