3 oszlopos weblapok kialakítása

3 oszlopban minden elfér. Balra mehet a vezérlő rész (a menü), középre a mondanivaló, a tartalom, jobbra meg a többi. Persze lehet máshogy is, de ez egy kényelmes elosztás. Persze nem akarunk az oldal designhoz táblázatokat használni (brrr…), így marad a css. De hogy is lássunk hozzá?3 oszlopos kialakításra több lehetőség is van. Megpróbálok itt bemutatni 3 különböző megoldást azzal együtt, hogy bemutatom ezek előnyeit és hátrányait is.

Egy kétoszlopos megoldás kiterjesztése

Ez a megoldás a legegyszerűbb kétoszlopos megoldást terjeszti ki. Ez a kétoszlopos megoldás abból áll, hogy van két div-ünk, az első balra floatol, a második meg jobbra. Valahogy így:

<div style="float:left;width:25%;">
   a bal oldali tartalom jön ide
</div>
<div style="float:right;width:75%;">
   a jobb oldali tartalom jön ide
</div>

Ezt könnyen átalakíthatjuk 3 oszloposra az eredeti két oszlopos megoldás másolásával. Ne is csináljunk mást, mint fogjuk és a jobb oldali div-be tegyünk bele másik két div-et, és az egyiket balra, a másikat pedig jobbra floatoljuk.

<div style="float:right;width:75%;">
   <div style="float:left;width:66%;">
      a középső rész tartalma jön ide
   </div>
   <div style="float:right;width:34%;">
      a jobb oldali tartalom jön ide
   </div>
</div>
<div style="float:left;width:25%;">
   a bal oldali tartalom jön ide
</div>

A két új divünket 66% és 34% szélesre állítottuk, mert ugye ezek így fogják a szülő divük teljes szélességét kitölteni. Voala! Ennyi és már lehet is teletölteni tartalommal. További leszármazott divekkel ezzel a módszerrel akárhány oszlopos megoldást kreálhatunk. Kérdés, hogy a 3-nál több oszlopos megoldások mennyire használhatóak.

Előnyök

• egyszerű
• könnyen átalakítható
• akár relatív (%-os) akár pixeles méretek megadásával is működik
• könnyen illeszthetünk hozzá fejlécet és láblécet
• ha weblapunk eleve kétoszlopos kialakítású és három oszloposra akarunk áttérni, akkor ez a legfájdalommentesebb megoldás
• a forráskódban előrébb szerepel a tartalmi rész mint a vezérlő rész (bal/menü)

Hátrányok

• amennyiben a középső rész függőleges irányban hoszabb mint a bal sáv akkor internet explorerben a lábléc felső határvonala a bal sáv aljánál fog kezdődni, ami nem kívánt hatásokat eredményezhet

Balra tarts!

A második megoldás 3 div-et definiál, és mindhármat balra lebegteti.

<div style="float:left;width:25%;">
   a bal oldali tartalom jön ide
</div>
<div style="float:left;width:60%;">
   a középső rész tartalma jön ide
</div>
<div style="float:left;width:15%;">
   a jobb oldali tartalom jön ide
</div>

Előnyök

• még egyszerűbb
• könnyen átalakítható
• akár relatív (%-os) akár pixeles méretek megadásával is működik
• könnyen illeszthetünk hozzá fejlécet és láblécet
• táblázatos kialakításból tableless (táblázat nélküli) kialakításra való áttérés esetén ideális

Hátrányok

• amennyiben a középső rész függőleges irányban hoszabb mint a bal sáv akkor internet explorerben a lábléc felső határvonala a bal sáv aljánál fog kezdődni, ami nem kívánt hatásokat eredményezhet
• a forráskódban előrébb szerepel a vezérlő rész (bal/menü) mint a tartalmi rész

Abszolút pozíciók

A harmadik megoldás az abszolút pozícionálást használja az oldal felépítéséhez.

<div style="width:400px;margin-left:150px;position:absolute;
   top:0;">
      a középső rész tartalma jön ide
</div>
<div style="width:150px;position:absolute;top:0;">
   a bal oldali tartalom jön ide
</div>
<div style="width:80px;position:absolute;margin-left:550px;
   top:0;">
      a jobb oldali tartalom jön ide
</div>

Előnyök

• könnyen illeszthetünk hozzá fejlécet
• a tartalom előbb helyezkedik el a forráskódban mint a vezérlő / menü rész
• ha az oldal ránézésre egy bonyolultabb vizuális egységet alkot, akkor (talán) ez a legbiztonságosabb módszer összerakni

Hátrányok

• láblécet nehezen vagy egyáltalán nem tudunk biztonságosan hozzáilleszteni, mivel az abszolút pozícionált elemek kilépnek a dokumentum normál folyásából
• relatív méretek esetén fokozottan óvatosan kell eljárni nehogy az oldal szétessen (ezért használtam a példában is pixeleket %-ok helyett)