Nastylování horizontální čáry (hr) po plovoucím prvku

Vydáno: 9.07.06 Kategorie:

Jistě se Vám již stalo, že jste potřebovali udělat odsazenou vodorovnou čáru za nějakým plovoucím prvkem, např. při výpisu článků z redakčního systému textpattern, ve kterém jsou krom anotace použity i plovoucí obrázky. Jestliže je text delší než obrázek, pak v tom není problém, pokud ovšem obrázek je větší > chytré prohlížeče nalepí vodorovnou čáru těsně pod obrázek i přesto, že má horizontální čára hr nastavena konec obtékání a odsazení clear: both; margin-top: 30px;

Tohle chování je naprosto v pořádku, neboť specifikace nám říká, že plovoucí prvky [tzv. plaváčci] (v našem případě obrázek) jsou vyjmuty z toku dokumentu. Tzn. že plaváček se nejprve vyjme z obsahu a odsune se k okraji rodičovského prvku (dle nastaveného obtékání do prava float: right, nebo do leva float: left) , nebo se zařadí vedle jiného plaváčka, který je již u okraje rodičovského prvku. Obsah (v našem případě text) ve stejném rodičovském prvku se formátuje tak, jako by tam žádný plaváček nebyl a jedinou změnou je řádkový obsah, který se zkrátí o velikost plaváčka.

Internet Explorer

Jestliže se chytré prohlíže (Firefox, Opera) chovají správně dle specifikace, pak Internet Explorer jde svou vlastní cestou a chová se k plaváčkovi jako k ostatním prvkům. Tudíž lze nastavit od tohoto plaváčka odsazení.

Řešení

Jednou z možností jak vyřešit takovouto prekérní situaci je specifikovat pro chytrý nebo hloupý prohlížeč vlastní css styl.

Nesmíme ovšem v žádném případě zapomínat, že značka hr není čárou, ale blokovým elementem, kterému lze nastavit šířku a výšku, stejně jako okraje.

Řešení pro IE

hr {clear: both; border-width:0; border-top:1px solid #6F6F6F; height:1px; margin-top: 30px;}

Tento zápis říká, u všech prohlížečů nastav prvku hr:

  • clear: both > konec obtékání, vypiš se až pod obtékaným prvkem
  • border-width: 0; > šířka okraje je 0
  • border-top:1px solid #6F6F6F; > nastav hornímu okraji 1px plnou čáru v barvě #6F6F6F;
  • height:1px; > výška prvku je 1px;
  • margin-top: 30px; > odsaď prvek o 30px níže než je plovoucí prvek

Řešení pro Firefox, Operu

html>body hr {clear: both; height:30px; border-width: 0; border-bottom:1px solid #6F6F6F;}

Tento zápis říká, u všech prohlížečů, které jsou chytré a znají selektor potomek, nastav prvku hr:

  • clear: both > konec obtékání, vypiš se až pod obtékaným prvkem
  • height:30px; > nastav prvku výšku 30px
  • border-width: 0; > šířka okraje je 0
  • border-bottom: 1px solid #6F6F6F; > nastav spodnímu okraji 1px plnou čáru v barvě #6F6F6F;

Tím, že je nastavena výška prvku na 30px a přitom je zvýrazněn pouze spodní okraj, je to obdobné jako když se pro IE odsadil o 30px prvek o výšce 1px.

Protože je tento kód až za kódem pro IE, nastaví se u chytrých prohlížečů kód poslední. Ovšem protože IE poslední kód nezná, nechá nastavený kód předešlý.

Příklad

Příklad na nastylování horizontální čáry (hr) po plovoucím prvku s použitím tohoto kodu:

<div style="width:700px; margin:0 auto;">
<h1>Nadpis</h1>
<p>
<img src="kacky.jpg" alt="Kačenky co popadaly do kanálu" style="float:left;" />
Lorem ipsum dolor sit amet consectetuer convallis tempus urna lacinia lobortis. </p>
<hr />
<p>Lorem ipsum dolor sit amet consectetuer nec gravida quis et tellus. Curabitur Ipibus consectetuer dui enim lorem nulla euismod.</p>
<p>Nonummy tellus volutpat Donec et aliquam in Aliquam fringilla egestas  libero volutpat dui interdum Aenean dolor non. Eu justo eu P.</p>
<p>Sociis at convallis ac interdum wisi dui natoque massa cursus Lorem. Ut ut Nunc at Sed vlit tincidunt enim Nam sed </p>
 </div>

a stylu:

* {margin: 0; padding: 0;}
hr {clear: both; margin: 0 10px; border-width:0; border-top:1px solid #6F6F6F;height:1px; margin-top: 30px;}

html>body hr {clear: both; margin: 0 10px;  height:30px; border-width:0; border-bottom:1px solid #6F6F6F;}

K dostudování

Drobečky: Weblog » webdesign hříčky » Nastylování horizontální čáry (hr) po plovoucím prvku

Komentáře



Přidat komentář








Formát Texy