CSS CLEAR BOTH BŐVEBBEN!
Sziasztok! Egy css problémám lenne egy dinamikus xhtml 1.0 strictnél! Az oldal minden egyes böngészőben hibátlanul megjelenik és valid KIVÉVE Internet Explorer 7-ben. Valószínüleg nem jól használom a Clear:both; tag-et. Szeretném ha valaki eltudnán magyarázni, hogy mi a pontos feladata és hogy mikor használjuk és mikor nem?
Kérlek benneteket segítsetek! Amúgy az oldal:
Előre is köszönöm!
■ Kérlek benneteket segítsetek! Amúgy az oldal:
Előre is köszönöm!
Szóval a link!
Asszem megvan a hiba
Megpróbálok "rajzolni" ide, remélem, nem esik szét
+--div#tartalomhatter-----------------------------------------+
| |
| +--div#tartalom-----------------------------------------+ |
| | | |
| | +--div#felso--------------------------------------+ | |
| | | | | |
| | +-------------------------------------------------+ | |
| | | |
| | +--div#bal---------+ +--div#jobb-----------------+ | |
| | | | | | | |
| | | | | | | |
| | +------------------+ | | | |
| | | | | |
| | | | | |
| | +---------------------------+ | |
| | | |
| | +--ide kéne egy br style="clear:both;"-------------+ | |
| | | |
| +-------------------------------------------------------+ |
| |
+-------------------------------------------------------------+
+--div#lablechatter-------------------------------------------+
| |
| +--div#lablec-------------------------------------------+ |
| | | |
| | | |
| +-------------------------------------------------------+ |
| |
+-------------------------------------------------------------+
Szóval a probléma abból adódik, hogy a clear:both; az a vele egy szinten lévő dobozokra hat. Nem vagyok biztos benne, hogy ez a szakszerű megfogalmazás, de oda se neki :)
Mivel a div#lablechatter a div#tartalomhatter-rel van egy szinten, de az utóbbi nem rendelkezik float tulajdonsággal, ezért a lábléc-ben a clear:both figyelmen kívül marad és feltolódik a tartalomhatter div alá 400px távolságra (mert ha jól látom annak min-height:400px; van megadva).
És mivel a float tulajdonságú elemek - mint azt a nevük is leírja - "lebegnek", ezért a float-os elemet tartalmazó div magassága nem veszi fel ennek a magasságát (magyarán a div#tartalom csak a div#felso magasságát fogja felvenni a másik két div-ét már nem.)
De hogy mégis felvegye, a két float-os div után közvetlenül be kell rakni egy plusz tag-et (én a br-t javaslom, vagy egy üres div-et), aminek stílusképp megadjuk a clear:both-ot. Ettől a div#tartalom felveszi a nem-floatos, clearezős elem miatt a megfelelő magasságot, amitől a div#tartalomhatter is jó lesz, amitől a lábléc a megfelelő helyre kerül.
Ennyi :)
Ajánlom IE-hez a Developer toolbar-t, ha nem is olyan sokrétű, mint a firebug, de a semminél jobb.
Köszi!
Megpróbáltam mind a 2 javasolt verziót!
Sikerült és köszönöm!
Leírhatnád
Köszönet!