CSS -> Oldalszerkezetek II.

II. Rugalmas oldalszerkezet, oldalsó menüvel

A mai lecke az előző anyagban (Oldalszerkezetek I.) tárgyaltakra épül.
Nem fogok külön kitértni a már ismertetett szerkezeti egységekre, csak az újdonságokra.
Ezért, ha nehéz szívvel is, de javaslom, hogy olvasd el előbb az első részt.
(Azért nehéz szívvel, mert tudom, sokatoknak - nekem is - gyakran elmegy a kedvem ettől a kijelentéstől, de, ha mégegyszer leírnám, akkor az előző anyagnak nem lenne sok értlme)

Ebben az anyagban, a már elkészített oldalhoz fogunk egy oldalmenüt készíteni. Alatta a "content"-től(tartalmi rész), és a most elkészítendő menütől rugalmasan fog elhelyezkeni a lábléc.
Nem számít, hogy a "content", vagy az oldalmenü fog több tartalommal rendelkezni, hiszen mindig a magasabbhoz igazodik. Így elkerülhetjük, hogy a lábléc (ha csak a contenthez igazodna) az oldalsó oszlop mellé kerüljön, abban az esetben, ha a "content"-ben kevés a tartalom.
A leckében elkészített oldal itt látható.
Internet Explorer használatakor itt.

1. A fő szerkezeti egységek HTML része

Amint látható, az oldalmenünk a "content" alá került.
Tehettük volna fölé is, csak akkor a DIV-ek CSS tulajdonságait is fel kellet volna cserélnünk.
Menünk nem áll másból, csak egy left_side azonosítójú DIV-ből és ennek tartalmából.
Az egyszerűség kedvéért én most csak sima szöveget tettem bele, de természetesen, ha igazi menüt szeretnénk belerakni használhatunk listákat is.
A left_side-ot, ha nem formázzuk, akkor a HTML-ben megadott sorrend szerint a "content" alá kerül, és a "footer" fölé.
Hogy érhetjük el a tartalmi rész mellé kerülését?

2. A tartlamat magábafoglaló DIV-et (content) körül kell folyatni a mellé szánt dobozzal, tehát magával az oldalmenünkel.

Szélessége 400 pixel, hogy legyen hely az oldalsó doboznak.
A körülfolyatásra a float tulajdonságot használtuk.
A right értékkel a "content" jobbra igazodik, így balról lesz hely, hogy körülfollya a menü.

3. A left_side DIV tulajdonságai.

Az oszlop 150px széles, és rendelkezik 2 pixel vastag jobb kerettel. Ezt a tulajdonságot összevonva adtam meg.
Itt semmi, a körülfolyatásra mutató beállítást nem alakmaztunk, hisz a "content"-nél megadottak alapján ez a DIV szépen mellé fog kerülni.
Nincs szükség további tuajdonságok megadására szerkezeti szempontból, ám még lenne egy kis apróság.

Ha az IE 7> böngészőket figyelmen kívül hagyjuk, akkor a DIV-eknek van pszeudo osztályuk is. Ez a hover.
Ugyanúgy működik, mint a linkek esetében. Itt is alkalmazhatunk számtalan tulajdonságot.
Én csak a jobb keret, és a szöveg szín beállításokat váloztattam meg a példa kedvéért.
Figyeljünk arra, hogy e pszeudó osztály alkamazása bizonyos esetekben, és tulajdonságokkal igen zavaró lehet a felhasználó számára.
Míg egy linknél csak egy szó színe vagy háttere változik meg, itt akár oldalunk nagyobbik része is zavaróan más színű lehet (persze ez a tulajdonaágoktól és értékeiktől függ).
Például, ha egy nagyobb cikk dobozát el akarod olvasni és véletlen fölé mész az egérrel, s annak háttere fehérről pirosra vált, vagy a szöveg színe feketéről rikító zöldre, nem hiszem hogy szívesen olvasnád tovább.
Ráadásul ezt a cikket, ha scrollozod egérrel akkor scrollozás közben villogni fog.

4. A footer

A tartalmi DIV float: right; tulajdonsága nemcsak a "left_side"-ra hatot, hanem a láblécre is, azzal, hogy most az oldalmenü határozza meg helyzetét.
De azt szeretnénk, hogy ne csak a menü, hanem a "content" is meghatározza; attól függően melyik a magasabb.
Ezért, ha azt akarjuk, hogy a "footer" helyzetét ne egy lebegő elem határozza meg, alkamazzunk a clear tulajdonságot.
Értékei:

Esetünkben a both értéket használva dobozunk a "content" és a "left_side" DIV alá fog kerülni, és tartalmuktól függően (a relative pozicionálás miatt) elhelyezkedni.