| Autor | Zpráva | ||
|---|---|---|---|
| Petr ZZZ Profil |
#1 · Zasláno: 28. 12. 2009, 01:46:04
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"> </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 } |
||
| Nox Profil |
#2 · Zasláno: 28. 12. 2009, 09:18:06
co overflow: hidden; ?
|
||
| Plaváček Profil |
#3 · Zasláno: 28. 12. 2009, 09:25:25 · Upravil/a: Plaváček
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 |
#4 · Zasláno: 28. 12. 2009, 12:59:41
Nox, Plaváček:
overflow:hidden jsem neznal, dík za tip, mrknu na to! |
||
| habendorf Profil |
#5 · Zasláno: 28. 12. 2009, 20:46:20
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 |
#6 · Zasláno: 29. 12. 2009, 00:02:34
habendorf:
„Tak to já jsem ten desátý, který by to nedoporučoval.“ Budíš mou zvědavost. Proč ne? |
||
| habendorf Profil |
#7 · Zasláno: 29. 12. 2009, 00:18:49
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 |
#8 · Zasláno: 29. 12. 2009, 00:56:29
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 |
#9 · Zasláno: 29. 12. 2009, 01:12:00
Petr ZZZ:
„budu clearovat divem s příslušnou třídou“ Nebo třeba <br>. |
||
| Petr ZZZ Profil |
#10 · Zasláno: 29. 12. 2009, 02:07:44 · Upravil/a: Petr ZZZ
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"> 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 |
#11 · Zasláno: 29. 12. 2009, 09:00:15 · Upravil/a: Plaváček
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 |
#12 · Zasláno: 29. 12. 2009, 10:06:19
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 |
#13 · Zasláno: 29. 12. 2009, 10:27:21
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 |
#14 · Zasláno: 29. 12. 2009, 10:31:10
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 |
#15 · Zasláno: 29. 12. 2009, 10:37:41 · Upravil/a: Plaváček
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 |
#16 · Zasláno: 29. 12. 2009, 10:52:40
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. |
||
|
Časová prodleva: 14 let
|
|||
0