< WebKészítés /> interaktív webszerkesztő tananyagok
Méretezés
A következő tulajdonságok az elemek méretét állíthatjuk be, úgy, mint: width: (szélesség) és height: (magasság). Mindkettőnek létezik egy maximalizáló és minimalizáló formája: max-width és max-height illetve min-width és min-height. Ezek akkor lehetnek fontosak, ha a tartalom bármekkora lehet, viszont ha túl rövid, akkor egy minimális méretet tartani fog a dobozunk. Általában a háttér miatt fontos. Ha pedig nem szeretnénk megengedni hogy túl szétnyomja oldalunkat, egy maximális értékkel kiküszöbölhetjük ezt.
Érték terén megadhatjuk valamihez viszonyítva (px ~megjelenítő eszköz képpontja, % ~teljes szülőelemhez mérete, ex ~kis x betű mérete, em ~alapértelmezett betűmagasság) vagy fix hosszban (cm ~centiméter, mm ~milliméter, in ~inch=2,54cm, pt ~pont=1/72in, pc ~pica=12pt). További értékek lehetnek még az auto (automatikus) a width: és height:-nél illetve a none (nincs) a maximális és minimális tulajdonságoknál. Tipp: próbáljunk elszakadni a kijelző felbontásától föggő px-től! Ahol lehet, használjunk az em-et, majd ennek az eszköztől föggően adjunk méretet. (Pl: nyomtatónál fix cm, monitoron px)
Ha a tartalom túllógna a maximális méreten, akkor el fog tűnni a lelógó rész. Megoldás: gördítő sávot adhatunk egy elemhez az overflow: tulajdonsággal, de lássuk mire jó még! visible (alapértelmezés) esetén: ha a tartalom nem fér ki a tároló elemben, akkor túl fog lógni. hidden esetén: a tartalom nem fog túllógni a tároló elemből, a túllógó rész rejtve lesz! scroll esetén: a tartalom nem fog túllógni, és minden esetben gördítő sávok jelennek meg hozzá. Ennek egyfajta változata az auto. A különbség, hogy ennél csak akkor fog gördítő sáv megjelenni, ha az szükséges.
Pozícionálás
A böngésző alapesetben elindul a HTML forráskódban felülről lefelé, és a talált sorrendben jeleníti meg az elemeket. Ezt a megjelenést a position: tulajdonság static értékével is el lehet érni.
Ha el kívánjuk tolni, először be kell állítani a position: tulajdonság értékét relative-ra. Ezután a top: (fent), right: (jobb), bottom: (lent), left: (bal) tulajdonságokkal lehet megadni, hogy az elem mennyivel legyen eltolva a normális helyzetéhez képest.
Abszolút helyzetmegadáskor a position: értéke absolute legyen, és ezután is a fenti négy tulajdonsággal tudunk pozícionálni. Az abszolút pozícionálású elemek a dokumentumfában legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position tulajdonság MÁS értékkel, mint a static. Ha nincs ilyen, akkor a body elemhez képest lesznek elhelyezve. (Ennek bal felső sarka a 0,0 pont.) Ha más szülőhöz képest akarunk abszolút módon pozícionálni, akkor ennek egyszerűen csak adjuk meg a position: relative;
Ha az position: tulajdonság értékét fixed-re állítjuk, akkor az elem mindig a helyén marad, nem lesz a többi elemmel együtt elgörgetve. Ekkor is lehet pozícionálni a top:, right:, bottom:, left: tulajdonságokkal. Tipp: Ez a megoldás akkor hasznos, ha a HTML-beli Frame-ket akarjuk leváltani vagy lebegő menüt kívánunk alkalmazni. Az IE 6 és régebbi verziói nem ismerik fel ezt a tulajdonságot. Viszont háttérképet tudunk fixen megadni, tehát egy-egy kép esetén inkább azt játsszuk ki.
Arról még nem beszéltem, ha véletlen egymás alá-fölé kerülnének, akkor melyik elem takarja melyiket. Alap esetben a pozícionált feljebb lesz, mint a statikus. Beleszólhat még a forráskód felülről lefele történő értelmezése, de sok esetben nem egyértelmű a dolog. Pozícionáljunk térben is a z-index:-szel! Minden elem alapból 0 értéket kap erre. Lényeg, hogy minél nagyobbak (1, 2, 3, stb.) annál magasabban lesznek.
Abszolút pozicionálás esetén még használható a clip: rect(FENT,JOBB,LENT,BAL);
Úsztatás
A float: és a clear: tulajdonságot gyakran kell használni, azonban elsőre nem mindig egyértelmű a működésük. Az első feladata, hogy egy elemet úsztasson jobbra vagy balra. Értékei így értelem szerűen: left, right és none lehetnek. A második pedig arra hivatott, hogy megakadályozza az előbbi tulajdonságot. Neki így a left, right és both (mindkettő) lehet értéke.
Na de mi is az az úsztatás? Pl: Kép szöveggel való körbefuttatása. Fontos: arra figyeljünk, hogy csak olyan elemre vonatkoztathatjuk a float: tulajdonságot, aminek be van állítva a szélessége! Előbbi esetben például a képeknek meg van adva a szélességük. Bonyolódik a helyzet, ha egyszerre több elemet úsztatunk ugyanabba az irányba, de egymás alá. Ilyenkor a clear: right/left;clear: both;
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!