ugrás a tartalomhoz

Clear: both lista elemeire hogyan

ada · 2007. Május. 19. (Szo), 23.09
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:

<ul>
<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!
 
1

miért?

Joó Ádám · 2007. Május. 19. (Szo), 23.57
Mit szeretnél elérni, azt írd le inkább.
2

Szerintem

janoszen · 2007. Május. 20. (V), 10.27
Szerintem, Te ezt szeretnéd:
ul
{
 overflow:auto;
 _height:1%;
}

li
{
 float:left;
}


A _height-et pakold ki IE 6 conditional comment-be.
3

Egyértelmű

ada · 2007. Május. 20. (V), 12.33
Azt hittem (illetve szerintem) egyértelmű hogy mit akarok :) Float-olt listaelemek-re nem tudok elhelyezni úgy clear: both tagot hogy figyelembe vegye (IE alatt megy, de gyanítom ott más miatt, azaz már eleve rosszul működik a float).

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 :)
4

Klasszikus?

vbence · 2007. Május. 20. (V), 12.40
Te nem a menü alatti képeket szeretnéd clear: both-osra tenni? Akkor ugyanis nem a listának kell CSS-t adni, hanem amit clear-re szeretnél tenni, szóvel az első képnek.
6

Sajnos nem

ada · 2007. Május. 20. (V), 12.56
Ezeket már végigpróbáltam, és semmi változás. Egy esetben működött a dolog de az meg nem volt valid XHTML.
5

Fordítva ülsz a lovon

Jano · 2007. Május. 20. (V), 12.44
Azért nem volt egyértelmű, hogy mit akarsz, mert a clear:both-nak alapvetően megvan a saját szerepe és az csak egy mellékhatása, hogy meg lehet oldani vele, hogy a befoglaló elem "körbevegye" a belül floatolt elemeket.

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
7

Pedig

ada · 2007. Május. 20. (V), 13.01
Pedig utánaolvastam a float dolognak külön emiatt, és vagy rossz helyen néztem (az oldaladról is mutat egy link a Floatutorial-ra), vagy csak képtelen vagyok felfogni :) Számomra a clear megoldás tűnt volna az ultimate megoldásnak.

Köszönöm a rövid ismertetőt és a linket!
8

Örök hálám

ada · 2007. Május. 20. (V), 13.14
Köszönöm szépen, így már kezd világos lenni a dolog :) Ez a rész viszont tetszett:

It seems that reminding the outer DIV that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.

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

Nem 'rendes' menü esetén nem jó

ada · 2007. Május. 20. (V), 13.41
Az overflow semmilyem formája nem működik, mégpedig azért mert pár menüpont alól újabb almenük nyílnak le (100% css megoldás), és overflow: auto esetén scrollozható lesz a div és csak azon belül látható az almenü. Hidden esetén az alsó margó megjelenik jól, de az almenü egyáltalán nem mert levágja a 'kilógó' részt.
10

Nekem nem tiszta...

vbence · 2007. Május. 20. (V), 15.07
Talán egyszerübb lenne, ha feltöltenél valahova egy demót, és "pontosan" leírnád, hogy mit szeretnél látni, a felhasználó szemével.
11

Padding

Jano · 2007. Május. 20. (V), 15.52
Margin helyett paddingot adni az alsó elemnek nem megoldas? Én általában ezt szoktam csinálni ilyen esetben, de persze lehet, hogy olyan a dizájn, vagy más ami miatt nem megoldás nálad.
12

Az eredeti terv még mindig nem jó

ada · 2007. Május. 20. (V), 16.00
Eredeti tervem szerinti megoldás még mindig nem életképes, de még ma összedobok egy apró demot amivel szemléltetem mi is a gondom igazából.

Átmenetileg a legalsó elemnek adni margin-t jó ötlet :) (padding az én esetemben nem játszik).