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)
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
@pisti Persze tudok, csak kicsit konkretizálni kellene, hogy miben. A teljes cikk erről szól. Mivel van gondod?
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
Ü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?
@Gerilla Gorilla Biztos lehetséges. Keresgélj utána.
É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???