CSS Positsioneerimine
CSS positsioneerimise omadused võimaldavad elemente paigutada (positsioneerida).
Positsioneerimine on css'i õppimise juures kõige keerulisem. Esiteks sellepärast, et brauserid kuvavad positsioneerimise omadusi erinevalt. Teiseks sellepärast, et css'is on positsioneerimiseks palju võimalusi.
Vaatame esialgu mõnda lihtsamat moodust kuidas veebielemente paigutada:
Teksti tsentreerimiseks kirjutame sellise koodi:
p.center { text-align: center; }
Dokumendi "body" sektsiooni kirjutame nii:
<p class="center">See tekst on tsentreeritud.</p>
Tulemus on siis selline:
See tekst on tsentreeritud.
Seega paragrahvi element ja kõik muu mis jääb selle elemendi sisse, nihutatakse lehekülje keskele.
Blokk elemendi tsentreerimiseks kirjutame sellise koodi:
div.center {
margin-left: auto;
margin-right: auto;
width: 18em;
border: #000 solid 1px;}
Dokumendi "body" sektsiooni kirjutame nii:
<div class="center">See blokk element on samuti tsentreeritud.</div>
Tulemus on siis selline:
Niikaua kui "width" atribuut on määratud nihkub kogu blokk kuid bloki sees olev tekst ei nihku.
Pildi tsentreerimiseks kirjutame sellise koodi:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
border: #000 solid 1px;}
Dokumendi "body" sektsiooni kirjutame nii:
<img src="/pic/green-butterfly_tn.png" alt="Green butterfly" class="center" />
Tulemus on siis selline:
Pildi v. bloki vertikaalseks tsentreerimiseks kirjutame sellise koodi:
.vcenter {
min-height: 12em;
display: table-cell;
vertical-align: middle;
border: #000 solid 1px;}
Dokumendi "body" sektsiooni kirjutame nii:
<div class="vcenter"> <p>See tekst on vertikaalselt tsentreeritud kasti sees.</p> </div>
Tulemus on siis selline:
|
See tekst on vertikaalselt tsentreeritud kasti sees. |
Näited
Positsioon: relative.
Selles näites demonstreeritakse, kuidas nihutatakse elementi tema normaalsest positsioonist kõrvale.
Positsioon: absolute.
Selles näites demonstreeritakse, kuidas nihutatakse elementi kasutades "absolute" väärtust.
Positsioon: fixed.
Selles näites demonstreeritakse, kuidas nihutatakse elementi vastavuses brauseri aknale.
Elemendi kuju.
Selles näites demonstreeritakse, kuidas määrata elemendi kuju. Element on kärbitud ning seejärel kuvatud.
Overflow element koos kerimisribaga.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et tekkiks kerimisriba sest element on liiga suur mahtumaks määratud alale.
Overflow elemendi peitmine.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et elemendi see osa peidetakse mis ei mahu määratud alale.
Overflow brauseri automaat valikuga.
Selles näites demonstreeritakse, kuidas määrata overflow (paisunud, üleujutatud) omadust nii, et brauser valib ise automaatselt overflow omaduse.
Pildi vertikaalne paigutus.
Selles näites demonstreeritakse, kuidas määrata pildi vertikaalset paigutust teksti suhtes.
Z-index.
Z-indeksit kasutatakse selleks, et paigutada üks element teise "taha".
Z-index-2.
Ülalpool oleva näite Z-indeks on muudetud.
Pildi ülemine serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi ülemise serva paigutust, kasutades piksel väärtust.
Pildi ülemine serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi ülemise serva paigutust, kasutades protsent väärtust.
Pildi alumine serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi alumise serva paigutust, kasutades piksel väärtust.
Pildi alumine serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi alumise serva paigutust, kasutades protsent väärtust.
Pildi vasak serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi vasaku serva paigutust, kasutades piksel väärtust.
Pildi vasak serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi vasaku serva paigutust, kasutades protsent väärtust.
Pildi parem serv piksel väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi parema serva paigutust, kasutades piksel väärtust.
Pildi parem serv protsent väärtusega.
Selles näites demonstreeritakse, kuidas määrata pildi parema serva paigutust, kasutades protsent väärtust.
CSS Float Omadus
CSS float omadus aitab paigutada Html elemente teineteise suhtes.
float kirjaviis on selline:
float: left | right | none | inherit
- left
- Viib määratud elemendi vasakule teise elemendi suhtes
- right
- Viib määratud elemendi paremale teise elemendi suhtes
- none
- Eemaldab float väärtuse ning kuvab elemendi nagu tavaliselt
- inherit
- Element on määratud sama float väärtusega mis juurelement
Vajalikud Näpunäited
Selleks, et nihutada pilti teksti suhtes kasutatakse float omadust "style" elemendis.
Näiteks:
<img src="URL" alt="alternatiiv tekst" width="laius" height="kõrgus"
style="float:right; />
Ülal toodud näites on pilt nihutatud paremale. Seega jääb tekst pildist vasakule.
| Omadus | Kirjeldus | Väärtus |
|---|---|---|
| bottom | Määrab kui kaugele jääb elemendi alumine serv teise elemendi suhtes | auto % lenght |
| clip | Määrab elemendi kuju. Vastavalt määratud kujule element ka kuvatakse |
shape auto |
| left | Määratleb kui kaugele jääb elemendi vasak serv teise elemendi suhtes |
auto % lenght | overflow | Määratleb toimingu kui element ei mahu määratud piiridesse | visible hidden scroll auto |
position | Määratleb elemendi static, relative, absolute v. fixed positsiooni |
static relative absolute fixed |
| right | Määratleb kui kaugele jääb elemendi parem serv teise elemendi suhtes |
auto % lenght |
| top | Määratleb kui kaugele jääb elemendi ülemine serv teise elemendi suhtes |
auto % lenght |
| vertical-align | Määratleb elemendi vertikaalse paigutuse |
baseline sub super top text-top middle bottom text-bottom length % |
| z-index | Määratleb elementide prioriteedid üksteise kohal |
auto number |
