CSS dimenzije
Ovde se misli na definisanje širine i visine elemenata. Već smo upoznali
atribute za definisanje širine (width) i visine (height) ali sada će mo ovde
kompletirati sve atribute. Evo spiska a zatim i primer:
- height - definiše visinu elementa. Jedinice su:
- auto - defaultna vrednost koju odredjuje brauzer u zavisnosti od
prave veličine elementa
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elemena
- max-height - definiše maksimalnu visinu elementa
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elementa
- min-height - definiše minimalnu visinu elementa
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elementa
- width - definiše širinu elementa
- auto - defaultna vrednost koju odredjuje brauzer
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elementa
- max-width - definiše maksimalnu čirinu elementa
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elementa
- min-width - definiše minimalnu širinu elementa
- dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicama
- % - procentualna visina u odnosu na visinu elementa
Verovatno se pitate kakva je razlika izmedju na primer max-width i
width? Recimo definišemo neki prostor gde će stajati slike sa
max-width = 200px. E sad ako unese posetilac sliku koja je manja od 200 piksela
onda će se u tom prostoru širina te slike prikazati po defaultu. Znači neće se
ni smanjiti ni povećati. Jedino ako neki posetilac unese neku sliku koja je veće
širine od 200px, onda će se širina slike smanjiti na 200px, jer je to maksimum.
Ali ako smo taj prostor definisali striktno sa width = 200px onda kakvu god širinu
slike posetilac uneo, znači i manju ili veću nebitno, uvek će širina slike biti
200px u tom prostoru. Evo jednog primera gde unapred definišemo koliki će
prostor biti:
<!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">
#cv {
max-width: 50px;
max-height: 50px
}
</style></head><body>
<span><img src="csspozadina.gif"></span>
<span><img src="csspozadina.gif" id="cv"></span>
</body></html>
max-width, max-height, min-width i min-height podržavaju noviji brauzeri.
