A display tulajdonság segítségével meghatározhatjuk, hogy az elem miképpen generálódjon. Ezzel az elemmel blokkszintű elemeket is megjeleníthetünk inline (soron belüli) elemként és fordítva, de számos más beállítási móddal is élhetünk, amelyeket konkrét példákon keresztül be is mutatunk. Nézzük először az egyes értékeket.
A CSS3-as szabvány a fentieken kívül más, ritkábban (speciális esetben) használt értéket is tartalmaz, amelyek a CSS basic box model oldalon elérhetőek.
Nézzünk tehát konkrét példákat!
Példa - Blokkszintű elem megjelenítése soron belüliként
A listaelemek (<li>) blokk szintű elemek, vagyis a böngésző ezek előtt és után sortörést hajt végre. Most viszont a display:inline megadással ezeket soron belüli elemekként jelenítjük meg. Így hogy a listajelölőt is eltűntettük rá sem ismerünk arra, hogy a menüpontokat felsoroláslistában helyeztük el.
Mivel a listaelemek között jól lehet navigálni képernyőolvasó programokkal, a menüt gyakran helyezzük el felsoroláslistában.
Amennyiben egy elemet soron belüliként jelenítünk meg, akkor nincs lehetőségünk az elem szélességének és magasságának beállítására. Az inline-block megjelenítéssel viszont erre is van módunk.
Példa - Inline-block megjelenítés szemléltetése
Ebben a példában is egy felsoroláslista megjelenítését módosítjuk, de most úgy, hogy az elemek az inline-block megjelenítés miatt szélesség és magasság beállítást is kaphattak. Ezt kihasználtuk úgy, hogy az értékeket oszlopdiagram szerűen jelenítjük meg.
Most nézzünk egy példát arra, hogy egy soron belüli elemet blokkszintűvé alakítunk!
Példa - Soron belüli elem megjelenítése blokkszintű elemként
Ebben a példában a <b> tagre a blokkszintű megjelenés lesz érvényes, ezért minden <b> tagben elhelyezett szöveg új sorban fog megjelenni.
Lehet olyan speciális eset is, amikor azt szeretnénk elérni, hogy egy elem az utána következő blokk szintű elem első, soron belüli eleme legyen. Jó példa erre, amikor egy címsort szeretnénk úgy megjeleníteni, hogy ne legyen előtte és utána térköz, hanem az utána következő elem soron belüli eleme legyen. Ehhez szükséges a run-in érték használata.
Példa - Befutó (run-in) megjelenítés bemutatása
A címsor blokkszintű elem, de a display:run-in definíció hatására a bekezdés első, soron belüli elemként jelenik meg.
A következőkben arra hozunk példát, hogy táblázatszerű megjelenést elérhetünk a HTML <table><tr><td> tagjainak használata nélkül is.
Példa - Táblázatszerű megjelenítés
A forráskódban elhelyezett kommentek alapján látszik, hogy hogyan értük el a táblázatos megjelenést. A div elemeknek táblázat, táblázat sor és táblázat cella megjelenítési módot állítottunk be.
Az is elképzelhető, hogy egy elemet nem akarunk megjeleníteni bizonyos okok miatt, ekkor a display:none; tulajdonságot is használhatjuk.
Az alábbi példában a nyomtatás során nem jelenítjük meg a menüt, a képernyőn viszont az az üzenet nem jelenik meg, amit a nyomtatásban során szeretnénk megjeleníteni.
Példa - Elem eltüntetés
A fenti példában a képernyőre és a nyomtatásra más-más stílust hoztunk létre. A képernyőn történő megjelenítésnél eltüntetjük a nyomtatásra szánt láblécet, a nyomtatásban viszont felesleges a menüt kinyomtatni, így azt tüntetjük el.
Ügyeljünk arra, hogy azon elemeket, amelyeket a képernyőolvasót használó felhasználók számára akarunk elhelyezni, viszont mások számára láthatatlanná szeretnénk tenni, NE a display:none; beállítással tüntessük el, mert ezt a beállítást a képernyőolvasó programok (jellemzően) úgy értelmezik, hogy az elem tartalmát figyelmen kívül kell hagyni.
Ilyen esetekben inkább éljünk a képernyőről való kipozícionálás lehetőségével!
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.