CSS atribut DISPLAY

U HTML postoje elementi koji u nekim slučajevima iako sadržajem ne ispunjavaju do kraja celu širinu ekrana ne dozvoljavaju prisustvo u nastavku sadržaju drugom elementu. Takvi su na primer <h1>, <p>, <div> itd. i oni se zovu blok elementi.

Postoje elementi koji dozvoljavaju i druge sadržaje u ekranskoj liniji u kojoj se nalaze. Takvi elementi su <span> i <a>, i nazivaju se inline elementima.

CSS uvodi jedan atribut DISPLAY koji ima sposobnost da blok elementima omogućava ponašanje sa okolnim sadržajem kao da su inline, a inline kao da su blokovi. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> #displ {display: block} #inl {display: inline} </style></head><body> <p>Recicu iskreno da je <a href=#>OVAJ SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p> <p>Recicu iskreno da je <a href=# id=displ>OVAJ SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p> <p>Pasusi koji nisu prebaceni u inline</p> <p>Pasusi koji nisu prebaceni u inline</p> <p id=inl>Pasusi koji jesu prebaceni u inline</p> <p id=inl>Pasusi koji jesu prebaceni u inline</p> </body></html>

Recicu iskreno da je OVAJ SAJT ZA UČENJE vrlo, ali vrlo, ozbiljan sajt

Pasusi koji nisu prebaceni u inline

Pasusi koji jesu prebaceni u inline

Mislim da je ovde sve jasno. Display atribut može pored ove dve vrednosti block i inline imati još neke vrednosti. Evo spiska sa objašnjenjima:

- none - sakriva element. Evo primera:

<style> #test1 {display: none;} </style> <div>bez sakrivanja</div> <div id="test1">sakrivanje</div>

bez sakrivanja

Primetite (naravno oni sa novim brauzerima) da na desnom delu u rezultat se ne vidi tekst iz DIV sa identifikacijom "test1".

-list-item - sve elemente pretvara u listu. Evo primera:

<style> #test1 {display: list-item; list-style-position: inside;} </style> <div>nesto u div</div> <span>nesto u span</span> <p>nesto u P</p> <br><br> <div id="test1">nesto u div sa id=test1</div> <span id="test1">nesto u span sa id=test1</span> <p id="test1">nesto u P sa id=test1</p>

nesto u div

nesto u span

nesto u P

nesto u div sa id=test1

nesto u span sa id=test1

nesto u P sa id=test1

Vi display: list-item morate uvek pisati u kombinaciji sa list-style-position: inside, inače neće doći do efekta, ili hoće ali u kombinaciji sa recimo padding-left: 20px. I još nešto, preporučujem korišćenje samo neuredjenih lista u kombinaciji sa display: list-item, jer često se dešava kad se koriste uredjene da brojanje ne počinje od 1 već od nekog broja. Naime neki brauzeri broje sve elemente a ne samo one koje mi želimo. To se dešava jer pojedini brauzeri oćito imaju bagove. Takodje oni sa novijim operama vide da pasus (iako ima tačku ispred, i da pravi listu) je spušten za jedan red niže, ali naravno to ne treba tako jer je bag. Sva tri elementa (verovatno u budućnosti) će graditi lepu listu.

Postoje još:
- run-in - element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadržaja.
- compact - opet, element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadržaja, a u cilju uštede ekranskog prostora.

Vrednosti run-in i compat nisu podržane od ogromne većine brauzera, a mnogi brauzeri koji kao podržavaju imaju bagove, te nećemo ih nešto posebno objašnjavati primerima. Mislim nema smisla jer đaba ja napišem nešto i prokomentarišem rešenja ako većina vas vidi sasvim nešto drugo na ekranu. Ispašće da lažem.

Medjutim postoje i tabelarne display vrednosti. Zapravo te vrednosti su uveli u CSS kako bi zamenile HTML tabele u dizajniranju stranica. A klasične HTML tabele preporučuju za prikazivanje podataka tabelarno. U sledećem naslovu ćemo više o tim tabelarnim display vrednostima