Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 632282]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 294503

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49889]
2. CSS
A pozícionálás, és a z-index [26662]
3. CSS
Függőleges menü, legördülő almenüvel [21074]
4. CSS
Függőleges menü készítése listából [20883]
5. CSS
Bevezetés a CSS alapjaiba [20083]
 

 

CSS -> Oldalszerkezetek II.

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-08-25 21:44:04
Lektorálta: adrob
Lektorálva:
2005-10-01 13:36:48 [9792]

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
<div id="container">
    <div id="header">
    </div>
    <div id="content">
        <div class="text_box">
        </div>
    </div>
    <div id="left_side">
    </div> 
    <div id="footer">
    </div>
</div>

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.
#content{
      width: 400px;
      text-align: left;
      padding: 0;
      margin-bottom: 35px;
      [b]float: right;[/b]
}

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.
#left_side{
      width: 150px;
      text-align: left;
      padding: 0;
      margin-bottom: 35px;
      border-right: 2px solid #DF0404;
}

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.
#left_side:hover{
      border-right: 2px solid #cccccc;
      color: #444444;
}

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
#footer{
      width: 550px;
      height: 50px;
      background: transparent;
      border-top: 1px dotted #cccccc;
      padding-top: 2px;
      clear: both;
}

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:

left: a balra lebegő elem után következik
right: a jobbra lebegő elem után következik
both: a doboz minden lebegő elem alá fog kerülni

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.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!