3 oszlopos weblapok kialakítása

33 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)

6 thoughts on “3 oszlopos weblapok kialakítása

  1. Szia. Hasznos ez a bejegyzés, csak nekem olyan problémám lenne, hogy blogomat szeretném 3-oszlopossá tenni, csak sehogyan sem sikerül. Tudnál ebben segíteni? Válaszod reményében maradok üdvözlettel: Pisti

  2. Kedves szerkesztő!

    Nagyon köszönöm, hasznos tanácsait, amit itt találtam! Hihetetlenül kellemetlen, de a megoldást elolvasva, kértem segítségedet…. Azt hiszem, ideje szemüveget cserélnem, mert én nem emlékszem ezekre, a sorokra, már pedig itt voltak! 🙂

    Talán, problémám, a widgetekkel lesz, illetve, a template-vel, mert szerettem volna, photoshoppal készíteni blog teplatet, csak hiába, nem tudom összerakni, mert elkészíteni olyan bonyolult egy alapot, hogy feladtam. Azért nagyon rendes tőled, hogy ilyen egyértelműen fogalmazod, a mondatokat, hiszen így nagyon könnyű értelmezni!

    Köszönöm, segítséged!

    Baráti üdvözlettel: Pisti

  3. Üdvözletem!

    Szeretném megkérdezni hogy Twitter bejegyzést hogyan ágyazhatok be a blogspotba? Azon gondolkodtam minap,hogy lenne a legjobb a megoldás a zenéim link listába sorolását illetően ,mert rengeteg zeném van fent a tárhelyeimen ,és eszt valahogy összesíteném synopsisba. Új blogot azért nem akarok nyitni mert van más egyszerűbb alternatívája,mégpedig a twitter.- ha jól hiszem.

    Egyáltalán lehetséges ez?

  4. Én Nekem kicsit kompenzálva lenne.Lenne a sima háttér és arra divekkel bal-közép-jobb-fejléc. A közepe az a szöveg haladtával nyúljon mert sz tem úgy a leg kézrevalóbb a jobb és bal oldalnak meg ileszkednie kéne hozzá ugyanezen a módon.Ami nekem sajnos nem jön össze .Hogy lehetne megoldani???

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.