WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 pozicionálás


    Stíluslapok segítségével könnyen és rugalmasan adhatjuk meg a HTML elemek egymáshoz viszonyított helyzetét.                         

Programozott tananyag:


A helyzetmegadás fajtái
Statikus helyzetmegadás (static), Relatív helyzetmegadás (relative), Független helyzetmegadás (absolute), Rögzített helyzetmegadás (fixed)

Eltolás mértékének megadása
A top: tulajdonság segítségével a helyzetmegadásos elemek margójának felső külső széle és tárolótömbjének felső széle közötti távolságot adhatjuk meg....

Statikus helyzetmegadás
A statikus helyzetmegadás az alapértelmezett. A HTML elem a szövegfolyamban az eredeti helyén marad.

Relatív helyzetmegadás
A HTML elemet egy általunk megadott értékkel eltolhatunk az eredeti helyzetéhez képest, de továbbra is a szövegfolyamban marad.

Független helyzetmegadás (absolute)
A HTML elem helyzete teljesen független a szövegfolyamtól. Helyzetét azon tárolótömbjéhez viszonyítva adhatjuk meg, amely a dokumentumfán az utolsó relatív helyzetmegadású őse az elemnek.

Abszolút pozíciónálású oszlopok
Az oldal szerkezetének kialakításánál is gyakran használjuk a független (absolute) helyzetmegadást.

Z-index avagy a 3. dimenzió
A láthatósági sorrend módosítható a z-index tulajdonság segítségével. A z-index növelésével adott elem (a z-tengely mentén) közelíthető a látogató felé.

A z-index dinamikus módosítása
A :hover dinamikus álosztály kijelölő segítségével a z-index növelése útján előtérbe hozhatjuk azokat a HTML elemeket, amelyek fölött az egérkurzor áll.

Rögzített helyzetmegadás (fixed)
A böngészőablak látható részéhez rögzített lesz a HTML elem, és így mindig látható marad. A független helyzetmegadás speciális esete, ahol a képernyő a viszonyítási pont.

A túlnyúlás kezelése (overflow)
Ha egy tárolóelem méretét meghaladja a benne elhelyezett tartalom, akkor a kilógó területek kezelésének módját, az overflow tulajdonság segítségével adhatjuk meg.

A vízszintes túlnyúlás kezelése
A kilógó területek kezelésének módját, vízszintes irányban az overflow-x tulajdonság segítségével adhatjuk meg.

A függőleges túlnyúlás kezelése
A kilógó területek kezelésének módját, függőleges irányban az overflow-x tulajdonság segítségével adhatjuk meg.

Látható terület kijelölése (clip)
A clip tulajdonság segítségével kijelölhető egy HTML elem megjelenítendő területe.

Megjelenítés módja (display tulajdonság )
A display tulajdonság határozza meg a HTML elemhez generált doboz típusát. Ezen keresztül pedig megjelenítésének módját.

Láthatóság (visibility)
A visibility visibility tulajdonság segítségével egy HTML elem elrejthető vagy láthatóvá tehető. Az elrejtett elem elem helye megmarad a weboldal elrendezésében.

 

CSS pozícionáló
tulajdonságok
a tananyagban


position CSS3
top CSS3
bottom CSS3
left CSS3
right CSS3
z-index CSS3
overflow CSS3
overflow-x CSS3
overflow-y CSS3
clip CSS3
display CSS3
visibility CSS3