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

- 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
- 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.
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;
Á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.

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;
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.
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 */
}

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.

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!

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.
|
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.
|
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.
|
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.
|
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.
|