CSS - <div> tag egymásbaágyazási probléma
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.
■ 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.
link
A link nem ment át.
float "probléma"
Hasznos olvasmány Rrd-től!
Én itt kezdtem a táblázat mentes oldalfelépítést:
http://rrd.1108.cc/oldalhasabok-magassaga/
s_volenszki
megoldás
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.
háttérszín