CSS -> Megjelenítés, pozícionálás és a körülfofyatás

A CSS lehetőséget ad a különböző elemek elhelyezésére, a szöveg, egy adott elem körüli körülfolyatására.
Ezáltal biztonságosabban jeleníthetjük meg oldalainkat különböző felhasználóknál, és egyszerűbbé is válik oldalaink szerkesztése.

1. A dobozok (DIV)

Képzeljük el a DIV-eket egy doboznak, amellyet bármilyen tartalommal (kép, szöveg...) töltünk fel amire szükségünk van.
Ugyanakkor nem muszály feltöltenünk sem, hiszen jól jöhet egy üres DIV helykitöltésre is.
Elhelyezésüket mi szabjuk meg, és egymástól függetlenné is tehetjük őket. Méretet, színt adhatunk neki, mint bármely más HTML elemnek.

Mint említettem egy előző cikkben érdemes a design kialakításánál, a honlap szerkesztésénél keretszínt adni neki, és így könnyen meghatározhatjuk mi, hova kerül az oldalon.
Itt megemlíteném egy nagy előnyét a DIV-nek: ha IFRAME-t vagy FRAME-et használsz a keresőprogramok nem veszik be ezek tartalmát a találatok közé; ha DIV-et alkalmazol akkor viszont igen.
Ezen kívül, még rengeteg előnye van. Ha használjátok, ti is rá fogtok jönni.
A HTML kódja <DIV id=""></DIV> itt az ID egy egyedi azonosító, amellyel később a CSS-ből elérhetjük a következő módon:

(ID megadása nem kötelező, de ha valamilyen tulajdonságot, vagy tulajdonságokat csak erre a DIV-re szeretnél alkalmazni, akkor meg kell adni)

2. A doboz (réteg) megjelenési tulajdonságai

A doboz számtalan tulajdonsággal rendelkezik, hiszen egy igen alapvető, általános elem. Tömören összefoglalva a következő tulajdonságokat alkalmazhatjuk.
Beállíthatjuk méretüket, keret-, szegély-, margótulajdonságaikat, a tartalom-, háttértulajdonságaikat, láthatóságukat, átlátszóságukat (egyes böngészők esetében).

A fentiekről az előző cikkekben már volt szó. Most két olyan tulajdonság következik amiről még nem.
A láthatóság
Szintakszisa:

Értékei:

Az átlátszóság
Szintaksziksa

Értékei:

A szám természetesen nemcsak 5 lehet. Kilenctől egyig alkalmathatók a számok.
Minnél kisebb a szám, annál átlátszóbb lesz az adott elem.
Ám ez Internet Explorer alatt nem megy így. A következőt kell használnunk:

Itt az opacity értéke nullától 100-ig bármilyen szám lehet. Szintén minnél kisebb a szám annál átlátszóbb.
(Opera ezt a tulajdonságot nem támogatja.)

display: a doboz típusát határozza meg
Értékei:


Az adott doboz tartalmának kilógását, túlcsordulását az
overflow: tulajdonsággal szabhatjuk meg.

2. A pozícionálás

Talán ez a legfontosabb, és leghasznosabb dolog amit csinálni lehet egy DIV-vel, de akár az összes többi elemel is.

1. Egy réteg elhelyezkedését a position: tulajdonsággal érhetjük el. Lehetséges értékei:
absolute: (Lásd: "Méretek és mértékegységek" c. cikkben)
relative: (Lásd: "Méretek és mértékegységek" c. cikkben)
fixed: a réteg elhelyezése absolute módon történik, viszont rögzítve van, tehát nem gördül együtt a tartalommal. Figyeljünk arra, hogy mihez képest rögzített az adott elem.
A fixed és absolute tulajdonság esetében a réteg, a többi elemtől függetlenül helyezkedik el.
A fentiek csak a DIV eltolásának, elhelyezkedésének tulajdonságát határozza meg. Ez még nem elég magában egy doboz megfelelő helyre való pozicionálására.

2. Miután a fenti position tulajdonságot beállítottuk, elkezdhetjük a megadott helyre való pozicionálását a rétegnek.
Ebben szerepet játszhat a margó és a kitöltési-, illetve keret szélesség.
A doboz függőleges eltolását a top illetve bottom tulajdonággal állíthatjuk be.

A doboz vízszintes eltolása.

Értékeik számok, általában pixelbe mérve.
Vigyázzunk a fenti tulajdonságokkal, hisz nem mindig az oldal széleit veszik alapul.
Ha egy dobozt beteszel egy másik dobozba, akkor azt a külső dobozhoz(amibe van) képest kell elhelyezned.

A HTML forrás:

A legkülső DIV a "doboz1", az oldal tetejétől és bal oldalától 100px-re van, absolut pozicionálással.
A benne lévő "doboz2" DIV félig átlátszó, absolut pozicionálással a "doboz1" tetejétől és oldalától 50px-re van.

3. A dobozok olyan sorrendbe helyezkednek el az oldalon, amilyen sorrendbe megadtuk őket a HTML-ben.
A legelső lesz legalul, és az utána következők mind egymás fölé rendeződnek.
Tételezzük fel hogy egy adott DIV-et félig el akarsz takarni egy másikkal.
Ehhez szükséged lesz a z-index: tulajdonságra.
Értékei mértékegység nélküli egész számok. A legfelső doboz z-indexe például 0, akkor a többi dobozé 1 és 2.
Minél kisebb a szám, annál lejjebb helyezkedik el.

A HTML forrásban a két doboz egymás alatt van.
A CSS tulajdonságaik ugyanazok, mint az előző példában, csak mivel itt nem egymásban vannak hanem egymás alatt (tehát a második lenne felül alaphelyzetben) a z-index tulajdonsággal megváltoztattuk sorrendjüket.

3. A körülfolyás

Tételezzük fel hogy a szövegbe képeket akarunk elhelyezni, úgy hogy szavak közvetlen a kép mellett maradjanak, tehát körülfollyák.
De jól jöhet iniciálék használatakor is.
Ezt a float: tulajdonsággal érhetjük el.
Értékei:

Ha a float tulajdonság hatását meg akarjuk szüntentni akkor használjuk a clear: beállítást.
Értékei: