CSS -> Oldalszerkezetek I.

I. Három DIV függőleges elhelyezése egymás alatt.

Ez az egyik legkönnyebb oldalfelépítés. Nem kell sokat kódolnunk, és kész is egy egyszerű, de frappáns oldal. Egy fejlécből, majd az azt követő tartalom részből, és legvégül a láblécből áll, ami mind egymás alatt helyezkedik el. A középső, tehát tartalmi rész érdekessége, hogy a benne lévő tartalomtól függ a magassága. Kisebb tartalomnál képes összehúzódni, nagyobb mennyiségnél pedig megnyúlni. Ezt követi a lábléc, ami a középső résztől függően fog elhelyezkedni.
A lecke végeredménye itt tekinthető meg.
Ugyanez Internet Explorer esetében itt.

1. Mindenek előtt a body CSS tulajdonságait nézzük meg.


Külső képet adtunk meg háttérnek. A kép szélessége fogja meghatározni az egész oldalszerkezet szélességét is. Ebben az esetben ez 600px. Ebből a fő DIV alatt 550px lesz, mert így az pont nem fedi a kép széleit.
Mivel a képet a koordinátarendszer szerint y irányba ismételjük a repeat-y tulajdonággal, így képünk magassága lényegtelen. Minnél alacsonyabb, annál jobb. Hisz nem kell sok adatot betölteni a felhasználónak, de hátterünk szépen össze fog állni. (Ilyen típusnál legalábbis, amilyent csináltam.)
Továbbá beállítotam a margin, padding, és a szöveg tulajdonságait.

A felépítés elkészítéséhez négy DIV-ből (4 nagy rész) álló kódot kell elsőnek készítenünk.

Itt több DIV-et is láthatunk, mert én már feltöltöttem tartalommal egyes részeit.

2. A legtöbbet befogadó DIV a "container". Itt van az oldalhoz tartozó összes szükséges alkotóelem, a további három fő DIV.
(A container általános elnevezése e szerkezeti egységnek. Jelentése: tároló.
Ajánlom, hogy használd, mivel így neked is könnyebb átlátni a munkád, de ami fontosabb, hogy más országokból a kódodat elemezve, rögtön feltudják azt bontani szerkezeti egységeire.)
Nézzük meg a CSS tulajdonságait.

A "containert"-t a postion: relatíve beállítással középre igazítottam. Így, mivel benne van a tartalom, az oldalad nem fog a különböző felhasználói felületeken -az position: absolute tulajdonsággal ellentétben- középről elcsúszni. Adjunk neki szélességet, a pozicionálás és az oldal háttere miatt is. Én 600px-es hátteret használtam. Namost ebből a látható kocka szélessége 550px árnyék nélkül. Ha nem akarjuk, hogy ezt lefedje, akkor olyan szélesre tegyük a "contanier"-t, hogy az pont a kockába beleessen. A hátterét szintén a lefedettség miatt állítottam background: transparentre, azaz átlátszóra. Mostmár semmi sem fogja fedni a body hátterét.

3. A fejléc - header
Ebben az esetben nincs tartalom, csak egy háttérkép. Viszont, ha te menüt akarsz ide tenni, az sem probléma.
Tedd bele a menüpontokat egy listába, és ezt pozícionáld a megfelelő helyre. (Pozícionáláskor az UL tag-et kell igazgatni.)
A CSS:

Itt szintén adtunk szélességet, és relatíve pozícionáltuk középre - habár nem feltélenül szükséges, akkor ha a szélessége megegyezik a "container" szélességével.
A doboznak egy külső képet adtunk háttérnek, majd középre-fel igazítottuk, és a background-repeat: no-repeat tulajdonsággal megakadályoztuk ismétlődését. Persze, ha nem ilyen hátteret szeretnénk, hanem a body-éhoz hasonlót, akkor itt is
ismételtessük meg a megfelelő irányba. Végül magasságot is kell adnunk a háttér, és a felépítés miatt. Ha nem állítanánk be, egyszerűen eltűnne a DIV. Miért?
Alapértelmezésben a tartalom nélküli DIV-ek magassága 0. (Ne tévesszen meg, a kép is tartalom, ha az HTML tag-ként szerepel. Viszont a CSS-el megadott háttérkép nem számít annak)

4. A tartalom - content
Ebbe kerül az oldal tartalma. Tehát ennek a szerkezeti egységnek fel kell vennie a benne lévő tartalmat, és maga alá kell szorítania a láblécet is.
Tulajdonságai:

Megint csak adtunk szélességet, és a háttérnek transparent tulajdonságot. A szöveget balra igazítottam, mert az előző CSS beállításaink szerint enélkül középen lenne - "container"-t text-align: center; tulajdonsággal láttuk el, amit a "content" is örökölt. A padding beállítása esztétikai szempotból előnyös. A margin-bottom pedig meghatározza, hogy milyen távolságban legyen a DIV alatt a lábléc.
A dobozunk azért fogja felvenni a tartalma magasságát, mert nem határoztuk azt meg a CSS tulajdonságainál. Ha nincs benne tartalom, akkor magassága 0 lesz.
Ezt befolyásolhatjuk - Firefox, Opera - böngészők esetében, a min-height: tulajdonsággal.
Használata ugyan az, mint a sima height, csak itt a minimális magasságot állíthatjuk be. Akkor is érvényes, ha nincs az adott DIV-ben tartalom.
Internet Explorer <7 esetében ezt a következőképp érhetjük el:

A fenti egy tömörített javascript kód. Kicsit hosszabban így nézne ki

Lefordítva: ha a minimális magasság kisebb mint 100px, akkor az if ágban található értéket állítja be. Ha ez nem teljesül, tehát ha a magasság nem kisebb mint 100px, akkor a height értéke auto.
A "content" tartalmát érdemes DIV-ekbe rakni, amint én is tettem, mert így még formálhatóbb lesz az oldal ezen része.

5. A lábléc - footer
Sok gondunk nem lesz ezzel a DIV-vel. A "content" CSS-, htuladonságainál már meghatároztuk, hogy mennyire, milyen közel legyen a DIV aljához. Ezt itt is megtehetnénk, sőt, vegyíthetnénk is a "content" tulajdonságaival, ha a "footer"-nek adunk margin-top értéket. De beállíthatunk margin értéket csak a "footer"-nek is.
Tulajdnoságai:

A tulajdonságok gondolom ismerősek. A háttér átlátszó, a szélesség és a magasság meghatározott, az elhelyezés miatt.
Igaz, itt magasságot nem fontos beállítani, de ha háttérképet szeretnél használni, akkor a mindenképp szükséges. A pozícionálás itt is kimaradt. Alapértelmezett a relative beállítása, szóval nincs szükség rá, hogy mi is beállítsuk.