A leckében megismerkedünk a dobozmodellel, a szélesség és magasság fogalmával, a belső kitöltéssel, margóval, illetve a lebegtetésre is nézünk példákat.
A weblapokat alkotó elemeket könnyebben elképzelhetjük, ha egymásba pakolható dobozként képzeljük el őket. Az ilyen dobozoknak jól elkülönülő, CSS által stílussal felruházható részei a következők:
doboz_pelda_full.jpgDobozmodell felépítéseA doboz szélessége, a tartalom szélességének, valamint a jobb és bal oldali belső térköz méretének, a jobb és bal oldali szegély méretének összegéből számítódik ki. A doboz által elfoglalt vízszintes helyhez hozzátartozik annak jobb és bal oldali margójának mérete is.
Ugyanígy számítható ki a doboz magassága is.
A böngészőprogramok egy része sajnos nem a szabvány szerint határozta meg a dobozok méretét. Ezt az újabb változatokban próbálták orvosolni. Nagyon fontos, hogy mindig adjuk meg a dokumentumtípust, mert ekkor tud a böngésző szabványos üzemmódba kerülni!
A böngészők alapból egy elem szélességének a teljes rendelkezésre álló vízszintes helyet, magasságának pedig a tartalom teljes megjelenítéséhez szükséges magasságot adják. Ezt CSS segítségével felülbírálhatjuk. Az esetek nagy részében azonban csak a szélesség beállítására van szükség.
Értékek:
Példa - Doboz szélesség és magasság beállítás példa
Amennyiben átméretezzük az ablakot látható, hogy a div szélessége mindig a szülő elem (jelen esetben a body) szélességének 70%-át veszi fel, a magasság pedig fix (150 képpont). Azonban láthatjuk, hogy ebben az esetben a tartalom kisebb felbontásban nem fér ki a dobozban.
Később látni fogjuk, hogy meghatározhatjuk, hogy mi történjen a dobozból kilógó részekkel (overflow).
A min-width/max-width tulajdonság segítségével egy elem minimális/maximális szélességét állíthatjuk be. A min-height/max-height tulajdonság segítségével egy elem minimális/maximális magasságát állíthatjuk be.
A min-width/max-width és a min-height/max-height tulajdonságok értékei nem öröklődnek. A tulajdonságokat csak blokk elemekre alkalmazhatjuk.
Értékek:
Példa - Doboz minimális és maximális szélesség és magasság beállítás példa
Most a tartalom szélessége minimum 400 képpont, ha átméretezzük az ablakot ez alá nem csökken a mérete. A maximális szélesség 80%-ra van beállítva. A div elem minimális magassága 150 képpont, a maximális nincs beállítva, így a doboz magassága dinamikusan változik.
Tegyük fel, hogy van egy képünk, amelyet úgy szeretnénk elhelyezni, hogy azt körbevegye a körülötte lévő tartalom (szöveg). Ebben az esetben a képet lebegtetnünk kell. Ha a képet balra lebegtetjük, akkor a tartalom tőle jobbra fog elhelyezkedni, jobbra lebegtetésnél pedig tőle balra.
A lebegtetést a float paraméterrel állíthatjuk be. A float tulajdonság értékei nem öröklődnek.
Értékek:
A CSS3 a fentieken kívül újabb értékeket is bevezet, amelyek a lapozható médiatípus esetén használhatóak. Lásd CSS Generated Content for Paged Media Module.
Példa - Elemek lebegtetése
A képet balra lebegtettük, ezért a szöveg körbefolyja és tőle jobbra helyezkedik el.
Írd át a left értéket right értékre, hogy a jobbra lebegtetést is kipróbálhasd!
Természetesen nemcsak képet, hanem más blokkszintű elemet is lebegtethetünk. A lebegtetett elem margóját érdemes beállítani (hamarosan megmutatjuk), hogy szebb, átláthatóbb eredményt kapjunk.
A clear tulajdonsággal felülbírálhatjuk az elemek lebegtetését. Segítségével meghatározhatjuk, hogy az elem melyik oldalán nem lehet másik lebegtetett elem. A clear tulajdonság értékei nem öröklődnek.
Értékek:
Példa - Elemek lebegtetése és a lebegtetés tiltása
Ebben az eseteben a képek balra vannak lebegtetve, ezért előfordulhat (a böngésző méretétől függően) hogy egymás mellé kerülnek a képek. Ezt a clear:left; tulajdonsággal letiltottuk, így most nem kerülhet egymás mellé a két lebegtetett kép.
Állítsd be a none értéket a clear tulajdonságnak, hogy lásd, milyen ha a két kép egymás mellé kerül.
Módosítsd úgy a példát, hogy mindkét kép jobbra legyen lebegtetve, és ne kerülhessenek egymás mellé!
A margin paraméter segítségével az elemek margójának méretét állíthatjuk be. Az értékei nem öröklődnek.
Fontos megjegyeznünk, hogy két egymás alatt elhelyezkedő elem közötti margók nem adódnak össze (mint ahogyan vízszintesen szomszédos elemeknél), hanem a két margó közül a nagyobbik lesz beállítva, míg a kisebbik 0 értéket vesz fel.
Értékek:
Paraméterek:
A tulajdonságnak legalább egy legfeljebb négy szóközzel elválasztott paramétere lehet:
Úgy is mondhatnánk, hogy a paramétereket a a felső értéktől kell megadni, az óramutató járásával megegyező irányban (felső, jobb, alsó, bal). Amelyik értéket nem adjuk meg, az a szemben lévő oldalról örökli az értéket.
A négy oldali margin értéknek külön-külön is értéket adhatunk:
Példa - Margó beállítása
Az első div elemnél lenulláztuk a margót. A másodiknál mindegyik oldalra eltérő margót állítottunk be, a harmadiknál ugyanezen értékeket rövidebb módon (shorthand) adtuk meg.
Annak ellenére, hogy az első esetben a margó nulla, látjuk, hogy az elem nem az ablak bal felső sarkába került, néhány képpontnyi hely ki lett hagyva. Ez azért van, mert a body elemnek alapértelmezetten van margó és kitöltés értéke. Ha ezt nem szeretnénk, akkor azt is le kell nulláznunk.
A margó értékek auto értékre való állításával az elemeket balra, jobbra és középre is igazíthatjuk. Erre mutatunk példákat az alábbi interaktív példában:
Ebben a példában a body szélességét 500 képpontra állítottuk be. A div elemeket pedig különböző módon igazítottuk a margó beállításával. Látható, hogy ha a bal oldali margót állítjuk auto értékre, akkor az elem jobbra fog eltolódni. De ettől függetlenül a jobb oldali margóját is beállíthatjuk. Ha a jobb oldali margót állítjuk auto értékre, akkor az elem balra tolódik. Ha mind a bal, mind a jobb margót auto értékre állítjuk, akkor a szimmetrikus margók miatt az elem középen fog elhelyezkedni.
A belső kitöltés az elem tartalma és szegélye közötti rész, amelyet a padding tulajdonsággal állíthatunk be. A padding tulajdonság értékei nem öröklődnek.
Értékek:
Paraméterek:
A tulajdonságnak legalább egy, legfeljebb négy szóközzel elválasztott paramétere lehet:
Itt is igaz, mint amit a margó esetén leírtunk, vagyis az értékeket a felső értéktől kell megadni, az óramutató járásával megegyező irányban (felső, jobb, alsó, bal). Amelyik értéket nem adjuk meg, az a szemben lévő oldalról örökli az értéket.
A négy oldali padding értéknek külön-külön is értéket adhatunk:
A belső kitöltés alkalmazásával szellőssebbé, átláthatóbbá, jobban pásztázhatóvá tehetjük a tartalmat.
Példa - Belső kitöltés beállítása
Az első példában szimmetrikus (mind a négy oldalon azonos) kitöltést állítottunk be. A második példában mind a négy oldalra eltérő értéket állítottunk be, a harmadik példában ugyanezt tettük, de a rövidített (shorthand) módon.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.