CSS div -ben táblázat
Üdv!
Van egy szokásos 3 oszlopos div-es float-olt lapom.
Amit el szerettem volna érni:
A lap mindíg "majdnem teljes" szélességre legyen széthúzva felbontástól függetlenül. (alapkeret width:95%)
Ha alacsony (640x480, 800x600) felbontást használok, akkor se nyomja össze az oldalakat egy bizonyos szélesség alá: alapkeret min-width: 790px
ez eddig szép és jó!
A problémám:
Ha a középső részben egy táblázat(fórum) van width 90-100% al,akkor IE alatt a következő dolog történik:
Szűkítem a böngésző ablakot, (vagy kisebb felbontásba váltok)akkor nem csak a táblázatban lévő szövegek tördelődnek új sorba, hanem az egész táblázatot eltolja lefelé az oldalsó float-olt div-ek aljához. Nem az egész "közepső" div-et tolja el, hanem csak a táblázatot. Ha a táblázat előtt van szöveg, az fent marad a rendes helyén.
Úgy néz ki a táblázat nem akar elférni a neki szánt helyen, pedig még lehetne a tábla mezőiben tördeli a szöveget.
Az IE az alapkeret min-width (css2) selektor-ról nem tud.
Mozilla, firefox, konqueror, opera, stb alatt teljesen jól működik.
Arra gondoltam , hogy a min-width hiánya miatt nem jó az IE megjelenítése.
Találkozott már valaki ilyen "hibával?"
Vagy teljesen rossz az egész oldal kialakításom?
"Minden megoldás érdekel..." :)
-zolih-
Vázlatosan így néz ki (most csak fejből, nincs előttem..):
■ Van egy szokásos 3 oszlopos div-es float-olt lapom.
Amit el szerettem volna érni:
A lap mindíg "majdnem teljes" szélességre legyen széthúzva felbontástól függetlenül. (alapkeret width:95%)
Ha alacsony (640x480, 800x600) felbontást használok, akkor se nyomja össze az oldalakat egy bizonyos szélesség alá: alapkeret min-width: 790px
ez eddig szép és jó!
A problémám:
Ha a középső részben egy táblázat(fórum) van width 90-100% al,akkor IE alatt a következő dolog történik:
Szűkítem a böngésző ablakot, (vagy kisebb felbontásba váltok)akkor nem csak a táblázatban lévő szövegek tördelődnek új sorba, hanem az egész táblázatot eltolja lefelé az oldalsó float-olt div-ek aljához. Nem az egész "közepső" div-et tolja el, hanem csak a táblázatot. Ha a táblázat előtt van szöveg, az fent marad a rendes helyén.
Úgy néz ki a táblázat nem akar elférni a neki szánt helyen, pedig még lehetne a tábla mezőiben tördeli a szöveget.
Az IE az alapkeret min-width (css2) selektor-ról nem tud.
Mozilla, firefox, konqueror, opera, stb alatt teljesen jól működik.
Arra gondoltam , hogy a min-width hiánya miatt nem jó az IE megjelenítése.
Találkozott már valaki ilyen "hibával?"
Vagy teljesen rossz az egész oldal kialakításom?
"Minden megoldás érdekel..." :)
-zolih-
Vázlatosan így néz ki (most csak fejből, nincs előttem..):
css:
#alapkeret {
width : 95%;
min-width : 790px;
}
#bal {
width : 10em;
float : left;
}
#jobb {
width :10em;
float : right;
}
#kozepe {
margin: 1em 12em;
padding : 1em;
}
A közepét nem float-oltam a bal oldal mellé, mert akkor a középső tartalom szélességétől függően máshova kerül(vizszintesen) a jobb oldal, fix méretet meg nem akartam megadni, mert akkor nagyobb felbontásban a jobb oldalon nem nyújtja ki a böngésző ablak teljes szélességére.
Inkább a közepe div-nek 12em széles (10em szélességű a két oldalsáv) bal, jobb margót adtam.
html:
<html>
<body>
<div id=alapkeret>
<div id=bal>...</div>
<div id=kozepe>
<p>szoveg jó helyen</p>
<table> .hosszú szövegnél oltolódva.. </table>
</div>
<div id=jobb>...</div>
</div>
</body>
</html>
#alapkeret {
width : 95%;
min-width : 790px;
}
#bal {
width : 10em;
float : left;
}
#jobb {
width :10em;
float : right;
}
#kozepe {
margin: 1em 12em;
padding : 1em;
}
A közepét nem float-oltam a bal oldal mellé, mert akkor a középső tartalom szélességétől függően máshova kerül(vizszintesen) a jobb oldal, fix méretet meg nem akartam megadni, mert akkor nagyobb felbontásban a jobb oldalon nem nyújtja ki a böngésző ablak teljes szélességére.
Inkább a közepe div-nek 12em széles (10em szélességű a két oldalsáv) bal, jobb margót adtam.
html:
<html>
<body>
<div id=alapkeret>
<div id=bal>...</div>
<div id=kozepe>
<p>szoveg jó helyen</p>
<table> .hosszú szövegnél oltolódva.. </table>
</div>
<div id=jobb>...</div>
</div>
</body>
</html>
Szerintem jó leírás a liquid oldalkialakítás metóduasiról.
Mindenképpen fontos kiemelni ebből a leírásból,(Russ Weakley is kihangsúlyozza)
hogy ne tedd a diveket konténerbe, hanem a böngésző számolja ki az elrendezést.
Valamint talán célszerűbb lenne százalékos "méretezést" megadni.
Tomek73
Jello
Köszönöm a linket
-Azért van az alap konténer, mert a háttérbe képet szeretnék tenni, ami túlnyúlik az oldal div-ek határán
-százalékos méretezést azért nem akartam, mert a két oldalsáv méretének nem kell változni (10em lett, mert csak akkor kellene nyúlnia, ha nagyobb betűméretet állít be a látogató )
Lényegében a két oldalsáv div fix, csak betűméret növeléskor nyúlik.
A középső tartalomnak kellene nyúlnia vizszintesen, az ablakmérethez igazodva. ablakméret csökkenéskor pedig kell egy minimum szélesség, aminél nem lehet szűkebb a tartalom(mert a bent lévő táblázat mezőinek szövegét ha már nem lehet tovább tördelni, akkor az egész táblát eltolja lefelé).
Erre használtam az alap div width:100%-ot, és min-width : 69em; -et.(Ami ugye IE alatt nem ér semmit :( )
Vagy float-oljam az osszes div-et balra egymás mellé?
http://uwmike.com/layout/jello/
Ez egész érdekes megoldás negatív margókkal
Ennél az oldalnál a sidebar és content "display:inline; " az IE margó duplázása miatt lehet benne?