IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Sadržaj CSS BOX elementa

Kad je sadržaj veći od prostora kojeg nudi BOX onda po defaultu se on povećava naniže ili udesno. Medjutim to možemo promeniti. Atribut koji nam služi za to jeoverflaow koji može imati sledeće vrednosti:

  • auto - pojavljuju se vertikalni i horizontalni klizači isključivo po potrebi.
  • hidden - nikad se ne pojave klizači, a i veličina polja će uvek biti striktno po definisanim veličinama bez obzira i da se tekst ili bilo koji drugi sadržaj iseče.
  • scroll - pojaviće se vodjice za scroll i po vertikali i po horizontali uvek bez obzira ako i ne treba, a ako se pojavi potreba onda se ubacuje i klizač
  • visible - to je kao i po defaultu, znači kao i bez overflow atributa. Bez obzira na veličine height i width atributa sadržaj će proširivati box sve do kraja sadržaja. Ukoliko je tekst onda će se proširivati na dole po vertikali a po horizontali će zadržati definisanu vrdnost. Ukoliko je slika recimo, onda će se proširivati i po horizontali i po vertikali ako je potrebno.

Evo primera koji sve dočarava:

<!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">
  #skrl {
     width: 100px;
     height: 100px;
     overflow: scroll;
  }
  #hid {
     width: 100px;
      height: 100px;
      overflow: hidden;
  }
  #vis {
      width: 100px;
      height: 100px;
      overflow: visible;
  }
  #au {
      width: 100px;
      height: 100px;
      overflow: auto;
  }
  #bez {
       width: 100px;
       height: 100px;
  }
</style></head><body>
<div id="skrl"> Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll</div><br>
<div id="hid"> hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden</div><br>
<div id="vis"> visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible</div><br>
<div id="au"> auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto</div><br>
<div id="bez"> bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow</div>
</body></html>

Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll


hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden


visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible


auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto


bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow

Naravno i atribut overflow podržavaju uglavnom noviji brauzeri jer je iz CSS2 specifikacije.

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