9. Lecke: Elhelyezés a weboldalon, láthatóság

iDevice ikon Célok
  • Ismerje a HTML oldal elhelyezésének elvét
  • Ismerje a mélységi sorrend jelentését, módosítását
  • Ismerje a HTML elemek láthatóságának beállítási lehetőségeit
  • Ismerje a lebegtetés működését

Tartalom
  • Az elemek elhelyezése az oldalon
  • Mélységi sorrend megadása
  • Láthatósági beállítás
  • Lebegtetés

Elemek elhelyezése

A weboldal elemei alapértelmezetten olyan sorrendben jelennek meg, amilyen sorrendben a forráskódban vannak megadva. Ezt a sorrendet nevezik szövegfolyamnak. A szövegfolyam balról jobbra és föntről lefele halad. Az sorközi elemek sorfolytonosan kerülnek az oldalra, míg a blokkos elemek mindig önállóan sortöréssel előtte és utána. Az elemek tényleges helye attól függ, hogy az előző elemek mennyi helyet foglalnak. Vízszintes és függőleges igazítással csak a szülőelemen belüli elhelyezkedést lehet változtatni, az elemek sorrendjén nem.
Stílus segítségével lehet a szövegfolyamtól eltérő helyet is meghatározni az elemeknek. Ehhez először az pozícionálást kell beállítani, ami megadja a viszonyítási pontot. Ennek négy módja van.
A statikus pozicionálás az alapértelmezett és azt jelenti, hogy az elem ott jelenik meg, ahol a szövegfolyamban szerepel és ezen a helyzeten nem is lehet változtatni.

position : static;

A relatív jelentése, hogy szintén ott jelenik meg az elem, ahol a szövegfolyam definiálja, de ezen a helyzeten változtatni lehet.

position : relative;

Ehhez a helyzethez képest el lehet tolni az elemet vízszintesen a left illetve right tulajdonsággal valamint függőlegesen a top és bottom tulajdonsággal. Az elemet mindig egy befoglaló téglalapként kell elképzelni. A left azt adja meg, hogy az elem az eredeti helyéhez képes hány pixellel kerül jobbra. Hasonlóan a top azt adja meg, hogy mennyivel kerül lejjebb. Például ha az elemet száz pixellel jobbra és 50 pixellel lejjebb akarjuk tolni, a stílus a következő:

left : 100px;
top : 50px;

Fontos azt megjegyezni, hogy az elmozdítás nem befolyásolja a többi elem helyét a szövegfolyamban, az elhelyezéskor úgy számol az elmozdított elemmel, mintha az eredeti helyén lenne.
Az abszolút pozicionálás esetén fontos, hogy az elem kikerül a szövegfolyamból, először a folyamban található elemeket jeleníti meg, majd utána jelennek meg a folyamon kívül elemek. Azaz az abszolút pozicionálású elemeket a folyamban lévő elemek nem "érzékelik".
Az abszolút pozicionálású elemeket is a top, left, right, bottom tulajdonsággal tudjuk elmozdítani, de ilyenkor nem a szövegfolyamban adott helyéhez képest viszonyítunk, hiszen nincs is benne a szövegfolyamban.

position : absolute;

Ilyenkor az elemet a tárolójának a bal felső sarkához viszonyítjuk. Ha egy elemnek nincs igazi tárolója, akkor a body a tároló, így az egész dokumentum bal felső sarkához viszonyít. Ebből következik, hogy az azonos tárolóban található abszolút, de nem elmozdított elemek egymáson jelennek meg.

Pozicionálás


1. Animáció: Az elemek position tulajdonsága

A fix pozicionálású elem az abszolúthoz hasonlóan kikerül a szövegfolyamból és az elmozdítása is ugyanúgy működik.

position : fixed;

A különbség a viszonyítási pontban van. A fix elem a böngésző ablakhoz viszonyít, így az ablak weboldalt tartalmazó részének bal felső sarkához képest határozzuk meg a helyét.
Tehát míg egy statikus, relatív vagy abszolút pozicionálású elem a dokumentum valamelyik részéhez viszonyít, így annak görgetésekor a dokumentummal együtt „mozog", addig a fix pozicionálású elem az ablakhoz viszonyít, így a weboldal görgetése nincs hatással rá, az ablakhoz képest elfoglalt helye nem változik.


Mélységi sorrend

Alapértelmezettként az elemek mélységi sorrendjét, azaz az elemek egymás alatt-fölötti viszonyát, a szövegfolyam határozza meg. Tehát egy később megjelenő elem a korábban megjelenő elemek "fölött" helyezkednek el. Ez csak a tárolóknál érzékelhető, ahol először a tároló jelenik meg, majd a benne lévő elemek.
A szövegfolyamból kikerülő elemek így a mélységi sorrendből is kikerülnek. Tehát először a szövegfolyami elemek jelennek meg a folyam által adott sorrendben, majd az abszolút és fix pozicionálású elemek, a forrásban adott sorrend szerint.
A mélységi sorrendet lehet változtatni, de csak azoknál az elemeknél, amelyek pozícináltak, azaz nem statikusak. Az elemek kapnak egy sorszámot a megjelenési sorrend szerint. Ezt a sorszámot lehet változtatni és más számot megadni.

z-index: 100;

Természetesen egy elem sorszámát nehéz kiszámolni, így ezt a beállítást sokszor arra használjuk, hogy az elemet legalulra küldjük a -1 értékkel, így minden alá kerül, vagy egy megfelelően nagy számmal minden fölé hozunk, így változtatva a láthatóságát az elemnek. Illetve egymást követő elemek sorrendjét tudjuk cserélgetni, így változtatva, hogy melyik fedi le a másikat.


Tartalom megjelenése

Az oldal strukturális összeállításához a blokkos tárolók helyét és méretét is pontosan be kell állítani a helyes megjelenés miatt. A méret meghatározásakor nehézség az, hogy sokszor nem tudjuk a tároló tartalmának a méretét. Lehetőség van beállítani, hogy egy tároló hogy viselkedjen, ha a tartalma nem fér bele. Négy lehetőség közül tudunk választani. A hidden esetén a tároló megtartja a méretét és a túlnyúló tartalom nem látható. A scroll esetén a tároló az adott méretű lesz, de a görgetősáv kerül rá, így a tartalma görgetéssel elérhető. Ha visible értéket adunk meg, akkor a túlnyúló rész is látható lesz, a tartalom a tárolón kívül lesz látható. Végül auto értékkel a böngészőre bízzuk, hogy ha szükséges, akkor görgetősávot tesz a tárolóra.

overflow : auto / visible / scroll / hidden;

Láthatóság

Egy elemet kétféle módon lehet eltűntetni az oldalról.
A visibility tulajdonsággal befolyásolni tudjuk az elem láthatóságát úgy, hogy az elem benne marad a szövegfolyamban, így ha nem látható, a helyet akkor is foglalja, azaz a többi elem úgy helyezkedik el, mintha ez az elem is ott lenne.

visibility : visible / hidden;

A display tulajdonsággal az elemet úgy lehet eltűntetni, hogy az elem a szövegfolyamból is kikerül, azaz ilyenkor a többi elem elhelyezkedése is megváltozik, hiszen ezt az elemet nem számolják be a helyzetük meghatározásához.
display : none;
Ugyanez a tulajdonság alkalmas arra, hogy megváltoztassuk, hogy egy elem blokkos vagy sorközi.

display : block / inline;

 

Láthatóság


2. Animáció: Az elemek láthatóságának változása

Átlátszóság

Az elemek alapértelmezettként nem átlátszóak, de ezt lehet változtatni fokozatosan egészen a teljes átlátszóságig. A mértékét egy nulla és egy közötti számmal adjuk meg, a nulla teljes átlátszóságot jelent.

opacity : 0.5;

Megjegyezzük, hogy az Internet Explorer 8 és korábbi verzióiban ez nem működik, hanem helyette egy másik módon lehet beállítani. Itt a beállított érték nulla és száz közé esik és egész szám, a nulla a teljes átlátszóságot jelenti.

filter:alpha(opacity=50);

Mivel ezt a böngésző verziót is még sokan használják (1. Lecke), így érdemes ezt a beállítási módot is megadni a stílusban.


26. Ábra: Átlátszó elemek a weboldalon
Lebegtetés

A lebegtetéssel azt lehet állítani, hogy az elemet hogyan fussák körbe a rákövetkező elemek. A nem lebegtetett elem alapértelmezettként vagy blokkos vagy sorközi, ilyenkor nincs körbefuttatás. A lebegtetéssel meg lehet adni, hogy jobbról vagy balról az elem legyen körbefuttatva.
float : none / left / right;
Ezt gyakran alkalmazzák képek gyűjteményénél, amikor minden egyes képet lebegtetjük, így azt érjük el, hogy úgy jelennek meg egymás mellett, hogy az ablak átméretezésekor a képek sorokba tördelése automatikusan igazodik az ablak méretéhez.
Lebegtetés

Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után. Szöveg a lebegtetett elemek után.

3. Animáció: A lebegtetés

Megjelenés meghatározása különböző eszközön
Bizonyos formátumok megfelelőek a weboldal képernyőn való megjelenítésére, de nem alkalmas a nyomtatásra. Például egy sötét hátterű világos szöveg esztétikus lehet a monitoron nézve, de nehezen olvasható kivetítve és alkalmatlan nyomtatásra. Így hasznos, ha bizonyos formátumokat megjelenítéstől függően eltérőnek határozunk meg. Erre van elhetőség a stílus leírásakor, külön megjelenítéshez más és más stílust rendelhetünk. A leggyakoribb megjelenítési formák:

@media all {
/* stílus az összes megjelenítőre */
}
@media screen {
/* stílus a képernyőn való megjelenítésre */ }
@media print {
/* stílus nyomtatásra */
}

 

iDevice ikon Feladat

Készítse el az oldalak általános szerkezetét! A 7. lecke feladataként már készített egy általános tárolót a weboldalaknak. Most ezt egészítsük két általános elemmel, a fejléccel és a menüvel. Minden oldal tartalmazzon egy teljes szélességű tárolót (a fő tárolóhoz mérten) az oldal tetején, amely az oldal fejléce! Ebbe írja bele az oldal címét (kinek a weboldala) és formázza meg ízlése szerint! Majd legyen egy másik tároló, ami tartalmazza a menüt! A menü egy lista, amely linkekből áll. A linkekre kösse rá az eddig elkészült weboldalait! A menüt tartalmazó tárolót helyezze el a fő tároló bal oldalára a fejléc alá! Szüksége lesz egy újabb tárolóra, ami tartalmazza az eddigi tartalmát az oldalnak és amely változik a különböző oldalakon. Mindhárom tárolóhoz adjon meg megfelelő méreteket és pozíciókat, illetve formázza őket elgondolása szerint!
A 24. ábrán látható a kívánt szerkezet, a különböző színű részek jelentik a tárolókat. Természetesen a színek, szövegek és formátumok csak a szemléltetik az elemeket, a tervezett design szerint más formátumokat kell használni.

 
27. Ábra: A feladat által definiált szerkezet

Készítsen továbbá egy galériát az életében fontos képekkel, amelyeket formázzon megfelelően és igazítsa őket lebegtetéssel!



iDevice kérdés ikon Feleletválasztós teszt
Mit jelent a szövegfolyam kifejezés?
  
Az oldal elemeinek egymás után következését, sorrendjét.
Az oldal szöveges elemeinek sorozatát.
Az oldalon megjelenő folytonos szöveget.

Mi a különbség a statikus és a relatív pozicionálású elem között?
  
A relatív elmozdítható a helyéről, a statikus nem.
A statikus elemet az eredeti helyéhez képest tudunk elhelyezni, a relatívat a tárolójának aktuális helyéhez képest.
A statikus elem a szövegfolyamban jelenik meg, a relatív a szövegfolyam után.

Mi a különbség az abszolút és a fix pozicionálású elem között?
  
Az abszolút viszonyítási pontja a tárolójának helyzete, a fixé a böngésző ablaka.
A fix elemet nem lehet elmozdítani a helyéről, az abszolút elemet igen.
Az abszolút elem kikerül a szövegfolyamból, a fix benne marad.

Mi a különbség a visibility:hidden; és a display:none; beállítás között?
  
Az első csak nem láthatóvá teszi az elemet, de az foglalja a helyet, a második esetben az elemet nem jeleníti meg a böngésző.
Az első esetben alapértelmezettként nem látszik az elem, csak ha fölé visszük a kurzort, a második esetben nem jelenik meg az elem.
Az első eltűnteti az elemet, a második azt határozza meg, hogy nem blokként jelenik meg az elem, hanem sorköziként.

Mit jelent a lebegtetés?
  
Azt adja meg, hogy a lebegtetett elemet hogyan fussák körbe az utána következő elemek.
Azt adja meg, hogy egy elem szerepel a szövegfolyamban, vagy kikerül belőle.
Ezzel lehet képekből egy táblázatos galériát készíteni.