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.
