Clear: both lista elemeire hogyan
Sziasztok,
Akadt egy apró gondom miközben egy menüt csináltam.
Teljesen szabványos, xhtml1.0 strict és css megoldásokat alkalmaztam, és egy apró dolgot nem tudok megoldnani, mégpedig nem tudom a clear: both szabályt úgy v. olyan helyre alkalmazni, hogy a menü elemekre vonatkozzon.
Röviden:
Az összes (szerintem) létező megoldást próbáltam, és csak az a módszer tűnt működőképesnek, amikor a clear: both-os tagot beletettem az <ul>-en belülre, de az meg egyáltalán nem szabályos megoldás (validator is hibásnak találja).
Elég sok keresés után találtam egyetlen oldalt ahol foglalkoznak ezzel, de az ottani megoldás sem működik, legalábbis nekem nem.
Előre is köszönöm a segítő válaszokat!
■ Akadt egy apró gondom miközben egy menüt csináltam.
Teljesen szabványos, xhtml1.0 strict és css megoldásokat alkalmaztam, és egy apró dolgot nem tudok megoldnani, mégpedig nem tudom a clear: both szabályt úgy v. olyan helyre alkalmazni, hogy a menü elemekre vonatkozzon.
Röviden:
<ul>
<li>1</li>
<li>2</li>
</ul>
css:
ul li {
float: left;
}
<li>1</li>
<li>2</li>
</ul>
css:
ul li {
float: left;
}
Az összes (szerintem) létező megoldást próbáltam, és csak az a módszer tűnt működőképesnek, amikor a clear: both-os tagot beletettem az <ul>-en belülre, de az meg egyáltalán nem szabályos megoldás (validator is hibásnak találja).
Elég sok keresés után találtam egyetlen oldalt ahol foglalkoznak ezzel, de az ottani megoldás sem működik, legalábbis nekem nem.
Előre is köszönöm a segítő válaszokat!
miért?
Szerintem
{
overflow:auto;
_height:1%;
}
li
{
float:left;
}
A _height-et pakold ki IE 6 conditional comment-be.
Egyértelmű
Hogy pontosan mi nem működik? Van egy függőleges menü, és ebben az elemek float: left-elve, a menünek van 10-10px alsó és felső margója, és alatta egy másik div, amiben van egy kép. Namost, mindaddig amíg nincs clear: both rendesen elhelyezve (értsd: perpill csak akkor megy ha az <ul>-en belülre helyezem el de ez meg nagyon nem szabályos), addig az alsó kép rácsúszik arra a területre, ahol eredetileg a menü margója lenne.
Proclub: a megoldásod működik, bár egyáltalán nem értem hogy miért, és miért így kell ennek menni, kicsit olyan hack szagú ez nekem, főleg hogy overflow: hidden-el is megy :)
És hogy miért nem értem miért is megy ez így? Ezért: http://www.w3.org/TR/CSS21/visufx.html#overflow
Mindenesetre köszönöm a választ, de még azért reménykedek egy kicsit hátha kapok egy clear-es megoldást :)
Klasszikus?
Sajnos nem
Fordítva ülsz a lovon
A clear:both-t eredetileg arra találták ki, hogy egy floatolt elem után szabályozni lehessen, hogy mi az ami még mellé kerüljön és mi az ami már ne. A kifeszítő szerepe pedig onnan ered, hogy ő egy nem floatolt elem lesz, tehát a befoglaló elemből nem lóghat ki, a clear:both miatt, pedig az összes floatolt elem után kell kirakni.
A clear:both csak az egyike a belső floatok körbevételének a megoldására: Ebben a cikkben összefoglalták 4-et: Simple Celaring of Floats
Pedig
Köszönöm a rövid ismertetőt és a linket!
Örök hálám
This fact is so boringly simple that it’s hard to know if thousands of developers are well aware of it, but never thought to mention it. I know I showed the example page to four CSS-savvy SitePoint colleagues and all shock their heads, blinked slowly and said “Whaa…?” (or something similar).
Nem 'rendes' menü esetén nem jó
Nekem nem tiszta...
Padding
Az eredeti terv még mindig nem jó
Átmenetileg a legalsó elemnek adni margin-t jó ötlet :) (padding az én esetemben nem játszik).