Autor Zpráva
Petr ZZZ
Profil
Hezký večer vinšuju. Trápí mě značka <hr>. Rád bych ji používal výhradně jako čistič, čili v HTML pouhým zápisem <hr>, bez přiřazení třídy, ale zdá se, že to má svoje úskalí. Inspirován pixym jsem si do CSS zapsal:
hr { clear:both; height:1px; margin:-1px 0 0 0; padding:0; 
       border:none; visibility:hidden; }

Občas by se mi ale hodilo, aby <hr> nevytvářelo mezeru, a v IE se mezery okolo <hr> nemůžu zbavit. Zjistil jsem, že se to tu už řešilo a tak nějak nevyřešilo (Stylování <hr />, K čemu <hr />, při použití clear se v IE objeví mezera), anebo vyřešilo, ale za cenu obalení čáry divem nebo přidáním nastylovaneho <br> (které nechci stylovat, protože <br> celkem hojně využívám takové jaké je). Ta citovaná vlákna jsou vesměs staršího data, tak bych se rád zeptal, zda už třeba někdo neobjevil nějaký elegantní způsob, jak přes CSS vytvořit tenoučkou neviditelnou <hr> s nulovým marginem nahoře i dole. Vytvořit čistič pomocí <div class="clear"> &nbsp; </div> je sice taky možnost, ale nemá to tu eleganci, kterou by měl zápis pouhého <hr> bez nutnosti přiřadit třídu (33 znaků oproti 4 znakům). Taky zápisu
* { margin: 0; padding: 0 }
který v jiné souvislosti (Skryté nadpisy) zmiňuje DT, bych se asi raději vyhnul. Tak se ptám: Dají se u <hr> nějak šikovně udělat nulové marginy? Děkuji předem za jakékoli trknutí.
Nox
Profil
co overflow: hidden; ?
Plaváček
Profil
Petr ZZZ:

Dají se u <hr> nějak šikovně udělat nulové marginy?

Ne pro IE. Ostatně - devět z deseti kodérů doporučuje pro ukončení floatování nastavit nadřazenému bloku overflow:hidden. Viz http://www.quirksmode.org/css/clearing.html
Petr ZZZ
Profil
Nox, Plaváček:
overflow:hidden jsem neznal, dík za tip, mrknu na to!
habendorf
Profil
Plaváček:
devět z deseti kodérů doporučuje pro ukončení floatování nastavit nadřazenému bloku overflow:hidden

Tak to já jsem ten desátý, který by to nedoporučoval.
Petr ZZZ
Profil
habendorf:
Tak to já jsem ten desátý, který by to nedoporučoval.
Budíš mou zvědavost. Proč ne?
habendorf
Profil
Petr ZZZ:

1) Ne vždy se overflow:hidden hodí (většinou ale nevadí, to je fakt).
2) Pokud je mi známo, neexistuje ve specifikaci žádný podklad pro takovéto chování browserů (čímž netvrdím, že skutečně neexistuje, zas tolik jsem to nezkoumal). Takže je otázkou, zda se takto budou chovat i nadále.
3) Ke clearování je clear.
Petr ZZZ
Profil
habendorf:
Dobře. Protože s clearem už jsem se stejně tak nějak spřátelil a overflow:hidden mi nic moc neříká, asi zůstanu u toho clear, budu ho dělat pomocí <hr> a smířím se s tím, že <hr> prostě (v IE) dělá mezeru. Pro případy, kdy ta mezera bude vadit příliš, dám si do CSS .clear { ... } a budu clearovat divem s příslušnou třídou. Dík za srozumitelné argumenty, pomohl´s mi v rozhodování. :)
habendorf
Profil
Petr ZZZ:
budu clearovat divem s příslušnou třídou

Nebo třeba <br>.
Petr ZZZ
Profil
habendorf:
Nebo (clearovat) třeba <br>.

Protože bych u prvku určeného ke clearování měl nejraději nulové rozměry i marginy, musel bych <br> nastylovat tak, že bych ho nemohl používat tak, jak jsem ho dosud (poměrně hojně) používal. Leda že bych v případech, kdy chci u <br> margin nebo něco jako výšku řádku, přiřadil <br> třídu, která by styl <br> jako čističe bez výšky a bez marginu přebila. Hmm, tak mám zas o čem přemýšlet...

Otázka: Daly by se značce <br> nastylovat nulové rozměry a čistič? Třeba takto nějak?
br { clear:both; line-height:0; height:0; font-size:0; margin:0; padding:0; }


A kdybych dal v případě potřeby do HTML toto:
<br class="lh1">

přičemž bych v CSS měl toto:
.lh1 { line-height:1em; }

– udělalo by pak to
<br class="lh1">
výšku řádku?

A bylo by to celé vůbec sémantické a validní, když <br> je zalomení řádku? (ve smyslu "co je to potom za řádek, s nulovou výškou?")
Plaváček
Profil
Petr ZZZ:

Element BR je takový zvláštní tvor. Jediné, co dělá a co je jeho primárním účelem, je vyrobit konec řádku. Nic víc. Stylovat se prakticky nedá. Specifikace, stejně jako habendorf, doporučuje právě tento prvek používat také jako čistič (čili k ukončení obtékání).

Můžeš klidně použít dovolené atributy:

br clear = none|left|right|all

Nebo využít třídu a nastavit clear:both.

Důvod, proč se ukončení obtékání pomocí tohoto prvku mezi kodéry neujalo, je spíše historický. V postarších prohlížečích (především v Netscape ve čtyřkové verzi) nepracoval korektně. Dále také pro to, že s o hledem na spoustu chyb v IE 6 bylo občas nutné pro čistič zapnout hasLayout nebo mu nastavit pevnou šířku, což se ovšem s elementem BR nepovede.

Nyní myslím není moc důvodů, proč BR k ukončení obtékání nepoužít. Stejně jako není důvod vyhýbat se mnou zminěnému řešení, pokud jej lze na stránce použít. Přestože toto chování skutečně nemá ve specifikaci oporu, všechny mně známé prohlížeče se chovají totožně a lze se na tento způsob myslím spolehnout i do budoucna.
panther
Profil
Petr ZZZ:
budu ho dělat pomocí <hr> a smířím se s tím, že <hr> prostě (v IE) dělá mezeru.
zrovna tohle mi moc rozumné nepřijde - spokojovat se s něčím, co nechci a možná mi může i překážet. Vždycky je lépe najít řešení, než před ním jen zavřít oči.
Plaváček
Profil
Petr ZZZ:

Jo, teď jsem si vzpomněl, že jsem kdysi viděl zajímavé řešení, ale prakticky jsem ho nezkoušel: http://hlodovnik.keilew.net/tlachtaty-webdesignerske/hr-cleaner-id-1/
panther
Profil
Plaváček:
jsem kdysi viděl zajímavé řešení, ale prakticky jsem ho nezkoušel:
zajímavé ano, ale praktické mi moc nepřijde - nelíbí se mi nastavovat všem blokům, pod nimiž chci clearovat, záporné marginy.
Plaváček
Profil
panther:

nelíbí se mi nastavovat všem blokům, pod nimiž chci clearovat, záporné marginy.

No ano, je to kostrbaté řešení, uvedl jsem to jenom pro doplnění, protože za určitých okolností může být použitelné.
habendorf
Profil
Petr ZZZ:

Já to dělám takto:

<br class="cleaner" />

.cleaner {
	font-size: 0;
	line-height: 0;
	height: 0;
	clear: both;
} 


Takže čistý <br> zůstává nedotčen.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: