Korlátozottan-nyúlós méretezés Jello módszerrel
Az egyik legvitatottabb kérdés oldal szerkezetek méreteinek kialakításakor, hogy az oldal rögzített szélességű vagy az ablakmérethez idomuló legyen. Rögzített méretre könnyebb tervezni, az ablakot kitöltő oldalakat viszont bizonyos felhasználók sokkal jobban szeretik. A Jello módszer a nyúlos oldalak tervezése során felmerülő hátrányokat küszöböli ki.
A megjelenítő teljes szélességéhez igazodó méretezéskor a legnagyobb probléma, hogy nagy ablakokban a sorok rettentő hosszúak lesznek, amik nehezítik az olvasást. Szakértők szerint körülbelül 60-70 karaktert érdemes legfeljebb egy sorba tenni. Szintén problémát jelent, hogy kis ablaknál a tartalmak összetorlódnak. A CSS-ben ugyan szerepel ezekre az esetekre a
A Jello technika lényege a negatív margók használata. Három egymásba ágyazott elemet alkalmaz, melyek közül az egyik maga aA belső elem ezekután a két negatív értékű margó értékeinél kisebb nem lehet, viszont mivel a középső elem széltében nyúlhat, a belső elem is nyúlhat. A módszer a felső határra nem tud ennyire konkrét értéket meghatározni maximumként. Csak annyit ér el, hogy ne legyen nagyon széles az oldal.
Természetesen a valós környezetben használható kód ennél egy kicsit bonyolultabb az IE hibái miatt. A megértésben sokat segít a Firefox Web Developer eszköztárából a blokk elemek keretezése (Outline/Block Level Elements) funkció.
■ A megjelenítő teljes szélességéhez igazodó méretezéskor a legnagyobb probléma, hogy nagy ablakokban a sorok rettentő hosszúak lesznek, amik nehezítik az olvasást. Szakértők szerint körülbelül 60-70 karaktert érdemes legfeljebb egy sorba tenni. Szintén problémát jelent, hogy kis ablaknál a tartalmak összetorlódnak. A CSS-ben ugyan szerepel ezekre az esetekre a
min-width és max-width tulajdonság, amelyekkel korlátok közé szoríthatnánk a méret változást, de ezek nem támogatottak elég széles körben.A Jello technika lényege a negatív margók használata. Három egymásba ágyazott elemet alkalmaz, melyek közül az egyik maga a
body. A középső elem (#stretch) lesz képes a megnyúlásra. A trükk az, hogy ezt a középső elemet a body rögzített értékű padding beállításával összenyomja, a benne lévő harmadik elemet (#container) pedig negatív margókkal kihúzza a középső elem szélein túlra. A body elemnek adott padding és a negatív margók mérete közel azonos.
body {
padding: 20px 270px 20px 270px;
text-align: center;
}
#stretch {
margin: 0 auto 0 auto;
padding: 20px 0 20px 0;
width: 60%;
}
#container {
border: 3px solid red;
background: white;
margin: 0 -265px 0 -265px;
}
Természetesen a valós környezetben használható kód ennél egy kicsit bonyolultabb az IE hibái miatt. A megértésben sokat segít a Firefox Web Developer eszköztárából a blokk elemek keretezése (Outline/Block Level Elements) funkció.
Bocsi, khm...
Vagy nyúlós-ról beszélsz?
Legyen inkább a cím "Korlátozott átméretezhetőség Jello módszerrel".
Vagy "Korlátozható átméretezés Jello módszerrel".
Zoli
javítva