ugrás a tartalomhoz

CSS - <div> tag egymásbaágyazási probléma

napalm · 2007. Aug. 24. (P), 12.25
Hello,

Próbáltam felépíteni egy táblázat mentes design-t (eddig azt használtam); gondoltam itt az ideje áttérni CSS alapú tervezésre.

Nos azt tapasztalom, hogy ha van egy <div> tag, amibe be van ágyazva egy újabb <div>, akkor valamiért kizárólag IE alatt hajlandó valóban végrehajtani, Firefox+opera alatt nézve nem, egyszerűen egymás alá pakolja a div-eket..

Itt egy példa mire gondolok:
Azt szeretném, ha a "lap" div-be lenne beágyazva az összes többi, ahogy kell.

Hol baltázom el?

*********************************************************
<style type="text/css">
<!--
#lap { width:600px; margin: 10px auto 10px auto; background-color:#FF0000; }
#fejlec { height:70px; }
#menu { float:left; width:100px}
#tartalom { float:left; width:400px; text-align: center;}
#jobb { width:100px; float:left; }
-->
</style>
</head>

<body>
<div id="lap">
<div id="fejlec"> fejléc </div>
<div id="menu"> menü </div>
<div id="tartalom">Ez itt a tartalom! <br> Ez itt a tartalom! <br> Ez itt a tartalom! <br></div>
<div id="jobb"> Jobb!! </div>
</div>
</body>
</html>

**************************************************
Egyszerűen nem értem, ha a "lap" div tagba be van ágyazva más div tag, akkor hogyan kerül mégis kívülre.. IE alatt jó (a beállított piros háttérszínt "öröklik" a beágyazott div tag-ek), más browser alatt nem.

Ráadásul az a furi, hogy a "fejléc" div még "benne van" a "lap" div-ben, az összes többi már nincs.
 
1

link

napalm · 2007. Aug. 24. (P), 12.27
http://napalm.qnstudio.hu/tmp/stiluslap.html

A link nem ment át.
2

float "probléma"

gex · 2007. Aug. 24. (P), 12.43
az igazság az, hogy pont ie alatt nem jó a dolog, és a többi böngésző viselkedik szabványosan. ez a téma milliószor felmerült itt a fórumban, Janot tudnám idézni, egyrészt keress az archívumban, másrészt az a két link hasznos lehet.
3

Hasznos olvasmány Rrd-től!

s_volenszki · 2007. Aug. 24. (P), 13.00
Szia!

Én itt kezdtem a táblázat mentes oldalfelépítést:

http://rrd.1108.cc/oldalhasabok-magassaga/

s_volenszki
4

megoldás

napalm · 2007. Aug. 24. (P), 15.07
Egy fél, és egy egész megoldást találtam a fenti linkek vizsgálatakor (valamit 500 verzió kipróbálása után..)

1.(fél) A legkülső (az összes többit befoglaló) div tag stilusához hozzáfűzni az "overflow:auto;" tulajdonságot. Ekkor a teljes (a külső, befoglaló div tagen belül) felületen látszik rendesen a háttér, azonban a befoglaló div tag "felé" rak egy csíkot ( http://napalm.qnstudio.hu/tmp/stiluslap_overflow.html ) FF, Opera. Nem tudom miért csinálja ezt, margin/padding hiába van 0-ra állítva..

2. Az összes belepakolt tartalom után egy <div id="vege" style="clear:both;"></div> tag beszúrásával helyreáll a rend. ( http://napalm.qnstudio.hu/tmp/stiluslap_vege_div.html )Mondjuk ez utóbbinak nem tudom mi köze ahhoz, hogy a befoglaló <div> tag beállított háttérszíne/háttérképe miért jelenik, vagy nem jelenik meg a beágyazott div-ek "alatt"; mindenesetre működik.
5

háttérszín

rrd · 2007. Aug. 24. (P), 15.19
azért nem az a háttérszín jelenik meg amit szeretnél mert a befoglaló div magassága 0 lesz a floatok miatt.