VISIBLITY - LÁTHATÓSÁG
A visiblity tulajdonság segítségével a következőket tudjuk tenni:
- láthatóvá tehetjük vele az elemet (visible)
- illetve láthatatlanná tehetjük vele az elemet (hidden)
DISPLAY - MEGJELENÍTÁS
A display tulajdonsággal a következőket tehetjük:
- bedobozolhatjuk (:D)
- soron belülivé tehetjük
- lista elem szerűvé alakíthatjuk
- bedobozolás: az elem kitölti a rendelkezésre álló szélességet --> sortörés van előtte és utána is (tehát külön sorba kerül). Ilyen elemek lehetnek például a bekezdések (p), címek (h1...), div-ek (div)
- soron belulivé tevés: az elem csak a szükséges szélességet használja --> nincs előtte és utána sortörés. Ilyen elem lehet például: span, link (a)
- span: olyan mint a div, azzal a különbséggel, hogy míg a div egy nagyobb blokkot foglal magába (pl. több bekezdés..), addig a <span> csak egy szövegrészletet (pl. egy szó, mondat)
A mai második témánk a pozicionálás. Mindenek előtt tisztázzunk valamit, amit már előbb kellett volna. Tehát: a felső oldal a top, a bal oldali a left, a jobb oldali a right, a bottom pedig az alsó oldal.
Most, hogy ezt tudjuk, megismerkedünk a 4 pozicionálási lehetőséggel:
STATIKUS POZICIONÁLÁS
A böngésző alapértelmezett pozicionálása. Az elemek úgy következnek, ahogy helyük van.
FIX POZICIONÁLÁS
Ez esetben az elem MINDIG az adott helyen van. Tehát görgethetek én akár hova, nem változik a helye. Nézzük meg a következő kódot:
elem{
top:10px;
left:20px;
position:fixed;
}
Elemzés: Az elem az oldal tetejétől (top) 10px-re lesz, bal oldalától (left) 20px-re, s görgetés során az alakzat helye nem változik. Ezen a linken jól látszik.
RELATÍV POZICIONÁLÁS
Ilyenkor az elem pozíciója az, amit megadtunk. Tehát lehetnek mínusz értékek, akár másik elem alá is becsusszanthatjuk, DE az elem eredeti helye üresen ottmarad.
Kód:
elem{
top:10px;
left:20px;
position:relative;
}
ABSZOLÚT POZICIONÁLÁS
Ilyenkor az elem kikerül az oldal "síkjából", s úgy kezelhetjük, mintha az oldal felett lebegne..
Kód:
elem{
top:10px;
left:20px;
position:absolute;
}
De mi van akkor, ha több elemet akarunk így pozicionálni? Ha több elemet akarunk ilyen módon a szöveg elé rakni, akkor a html kódban utoljára megadott elem lesz legfölül. Ha ezen változtatni akarunk, akkor 2 dolgot tehetünk. Vagy a HTML-ben állítunk a sorrenden, vagy igénybe vesszük a Z-INDEX-et. Minél kisebb a z-indexe egy elemnek, annál lejjebb fog megjelenni. Tehát mondjuk van 2 elemünk. Az egyiknek 3-as a z-indexe, a másiknak 2. Akkor a másik lesz alul. Itt van kódban:
elem1{
position:absolute;
z-index:3;
}
elem1{
position:absolute;
z-index:2;
}
IDE TARTOZIK MÉG:
Most, hogy ezt tudjuk, megismerkedünk a 4 pozicionálási lehetőséggel:
STATIKUS POZICIONÁLÁS
A böngésző alapértelmezett pozicionálása. Az elemek úgy következnek, ahogy helyük van.
FIX POZICIONÁLÁS
Ez esetben az elem MINDIG az adott helyen van. Tehát görgethetek én akár hova, nem változik a helye. Nézzük meg a következő kódot:
elem{
top:10px;
left:20px;
position:fixed;
}
Elemzés: Az elem az oldal tetejétől (top) 10px-re lesz, bal oldalától (left) 20px-re, s görgetés során az alakzat helye nem változik. Ezen a linken jól látszik.
RELATÍV POZICIONÁLÁS
Ilyenkor az elem pozíciója az, amit megadtunk. Tehát lehetnek mínusz értékek, akár másik elem alá is becsusszanthatjuk, DE az elem eredeti helye üresen ottmarad.
Kód:
elem{
top:10px;
left:20px;
position:relative;
}
ABSZOLÚT POZICIONÁLÁS
Ilyenkor az elem kikerül az oldal "síkjából", s úgy kezelhetjük, mintha az oldal felett lebegne..
Kód:
elem{
top:10px;
left:20px;
position:absolute;
}
De mi van akkor, ha több elemet akarunk így pozicionálni? Ha több elemet akarunk ilyen módon a szöveg elé rakni, akkor a html kódban utoljára megadott elem lesz legfölül. Ha ezen változtatni akarunk, akkor 2 dolgot tehetünk. Vagy a HTML-ben állítunk a sorrenden, vagy igénybe vesszük a Z-INDEX-et. Minél kisebb a z-indexe egy elemnek, annál lejjebb fog megjelenni. Tehát mondjuk van 2 elemünk. Az egyiknek 3-as a z-indexe, a másiknak 2. Akkor a másik lesz alul. Itt van kódban:
elem1{
position:absolute;
z-index:3;
}
elem1{
position:absolute;
z-index:2;
}
IDE TARTOZIK MÉG:
- owerflow - egy dobozban lévő elemek tördelését adhatjuk meg vele. Itt érthetőbben.
- cursor - megadja, hogy az elem fölé vitt kurzor milyen alakú legyen. Itt az értékekkel.
A mai napra legyen elég ennyi, legközelebb a lebegtetést és az igazítást fogjuk részletesen megnézni.
Nincsenek megjegyzések:
Megjegyzés küldése