Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 621882]  
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 287745

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 [48908]
2. CSS
A pozícionálás, és a z-index [25815]
3. CSS
Függőleges menü, legördülő almenüvel [20234]
4. CSS
Függőleges menü készítése listából [20019]
5. CSS
Bevezetés a CSS alapjaiba [19211]
 

 

CSS -> Oldalszerkezetek III.

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-08-27 17:05:20
Lektorálta: adrob
Lektorálva:
2008-01-12 14:37:58 [8373]

III. Két oldalmenüs oldalszerkezet, rugalmas footer elhelyezéssel



Az előző leckében bal oldalra készítettünk egy menüt, ezt továbbfejlesztve jobb oldalra is csinálunk egyett.
A footer rugalmas elhelyezkedése most is egy fő szempont lesz. Alkalmazkodnia kell az oldal tartalmához.
És nemcsak a "content", hanem a többi ("left_side", "right_side") dobozhoz is.
Nézzük meg az elkészült oldalt
Explorer esetében.

1. Eddig a menü elhelyezéséhez a float tulajdonságot használtuk. Most sem lesz másképp.
Ám a HTML kód kicsit (elsőnek észszerűtlenül) átalakul. Nézzük:
<div id="container">
    <div id="header">
        ...
    </div>
    <div id="right_side">
        ...
    </div>
    <div id="content">
        ...
    </div>
    <div id="left_side">
        ...
    </div>  
    <div id="footer">
        ...
    </div>

Azt várnánk, hogy "right_side" DIV-ünk megszokottan valahová, a "content" alá kerül, a másik oszlop mellé,
de nem. Mivel az egész szerkezet a float tulajdonságra épül, így, ha a mostani oldalmenünk a "content" alá kerülne, gondban lennénk a másik oldalsó DIV-el.
Eddig a "content"-re alkalmaztuk a float: right; beállítást.
Tehát ezzel "content" doboz jobbra igazodik, és a bal oszlopnak is lesz elég hely mellette.
Ez nem is fog változni. Megvan mindhárom fő egység("content", "left_side", "footer") - kivéve most a "header"-t - tökéletesen elredezve.

2. Már csak a jobb oszlopnak kellene helyet szorítani. De hogyan?
#right_side{
      width: 150px;
      text-align: left;
      padding: 0;
      margin-bottom: 35px;
      float: right;
}

A jól bevált módszerrel, a float-al. Nem hiába rendeztük így a HTML kódót. Ha most a "right_side" azonosítójú DIV-nek float: right; tulajdonságot adunk, akkor az az előzőekben már látott módon jobbra igazodik, így lesz helye a "content"-nek mellé csúsznia.
De a "content"-nek is megvan ez a beállítása, így ő is jobbra fog igazodni, tehát megintcsak lesz hely (feltéve, ha a szélességük összesen nem több, mint a container szélessége, mert akkor nem fog felcsúszni az a DIV, amelyiknek nincs helye) a bal oszlopnak is.

Minden a helyére került, és a "footer" is rugalmas maradt, mivel a clear: both; tulajdonsággal a lebegő elemek(amire a float beállítás kihat) alá kerül.

3. Kicsit szépítgessük oldalunkat.
Az előző leckében a "left_side" doboznak border-right tulajdonságot adtunk. A keret viszont csak az adott doboz magasságáig fog "leérni".
Elég csúnyán nézne ki, ha a most beépített DIV-el nem lenne egyenlő (a tartalmuk miatt) a keretük. Itt két megoldás jöhetne szóba:
a) Mindkét DIV-nek adunk min-height tulajdonságot, így, ha egyikben kevesebb a szöveg, akkor is a beállítás alapján megmarad a magassága.
De ez nem elég, hiszen a tartalmi rész ("content") még mindig elronthatja az összképet, ha túllépi a két oldalsó oszlop magasságát, így "kiekrülve" a kereteket is.
Tehát ezt a megoldást el is vethetjük.
b) A border tulajdonságot, ne a két oszlopra alkalmazzuk, hanem próbájuk ki csak a "content"-re.
#content{
      width: 250px;
      text-align: left;
      padding: 0;
      margin-bottom: 35px;
      float: right;
      border-right: 2px solid #DF0404;
      border-left: 2px solid #DF0404;
      min-height: 600px;
}

Mindkét oldalára (bal, jobb) tettünk 2 pixel vastagságú keretet. A hatása olyan, mintha az oldlasó DIV-eknek lenne ez a tulajdonságuk.
Eddig gondunk volt a "content" rész magasságával, mert, ha túl sok benne a tartalom, túlhalad az oldalsó oszlopok keretén.
Most az a veszély áll fent, hogy a "content" keretét haladják majd túl a "left_side", illetve "right_side" DIV-ek.
Ezért számítsuk ki, körülbelül mekkora lehet (maximum) a két doboz magassága, és adjunk a "content"-nek min-height (IE 7> nem működik, csak egy kis JavaScript kóddal, amit már ismertettem) tulajdonságot.
Így, ha kevés tartalma, a keret akkor is el fogja érni az oldalsó DIV-ek magasságát.
* 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!