IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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&#268;ENJE</a> vrlo, ali vrlo, ozbiljan sajt</p>
<p>Recicu iskreno da je <a href=# id=displ>OVAJ SAJT ZA U&#268;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

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

Pasusi koji nisu prebaceni u inline

Pasusi koji nisu prebaceni u inline

Pasusi koji jesu 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
     sakrivanje

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

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display