CSS/Positsioneerimine

Positsioneerimisskeem: position

Väärtus: static | relative | absolute | fixed | inherit

Atribuut position määrab millise algoritmi järgi objekti asukoht arvutatakse. Teisisõnu määrab see parameeter teatud positsioneerimisskeemi. Vaikimisi on veebilehe tekst ekraanil samas järjekorras kui selle lehe HTML-failis. Pealkirjad, lõigud, loendid ja muud järgnevad üksteisele muutmata järjestuses ning üldiselt ongi see just see, mida me soovime. Mõnikord aga sooviksime objektide asukohta muuta: paigutada osa tekstist kitsasse tulpa peateksti kõrval, kergitada mõni sõna teistest kõrgemale jmt. Selleks tarbeks pakub CSS meile lisaks harilikule positsioneerimisele (vaikimisi kasutatav väärtus static) ka kolme erilist positsioneerimistehnikat:

relative - suhteline positsioneerimine. Objekti nihutatakse tema esialgse asukoha suhtes.
absolute - absoluutne positsioneerimine. Objekt asetatakse dokumendis kindlale kohale, näiteks ülevale paremasse nurka või dokumendi keskele.
fixed - "kleebitud" positsioon. Sama, mis eelmine, aga fikseeritud objekt ei liigu lehekülje kerimisel kaasa.

Kõigi nimetatud kolme väärtuse puhul kasutatakse asukoha määramiseks atribuute left, right, top ja bottom, millest järgnevalt lähemalt.

Asukoht: left, right, top ja bottom

Väärtus: <pikkus> | <protsent> | auto | inherit

Parameetrid left, right, top ja bottom määravad objekti asukoha. Need parameetrid omavad toimet vaid juhul kui parameetri 'position' väärtus pole 'static'. Asukoha määramisel on aluseks milline positsioneerimisskeem on valitud:

Suhtelise positsioneerimise puhul määrab 'top', kui palju liigutatakse objekti allapoole tema esialgsest positsioonist, 'bottom' määrab kui palju liigutatakse ülespoole, 'left' kui palju paremale ning 'right' kui palju vasakule.
Absoluutse positsioneerimise puhul määrab 'top', kui kaugel asub objekti ülaserv (veerise ehk 'margin'-i välimine piir) dokumendi ülaservast, 'bottom' määrab kauguse alumisest servast, 'left' vasakust ning 'right' paremast
Kui aga element, millele on määratud absoluutne positsioneering, asub sellise elemendi sees, millele on antud suhteline positsioneering, siis arvutatakse elemendi positsioon selle konteinerelemendi suhtes. Seega näiteks 'left' määrab kauguse konteineri vasakust servast ning 'top' kauguse ülaservast.
'fixed' puhul kehtib üldiselt sama, mis absoluutse positsioneerimis puhul, aga objekti asukoht arvutatakse alati brauseri akna suhtes (mitte kunagi suhteliselt positsioneeritud konteineri suhtes) ega liigu dokumenti kerides kaasa.

Näitena võiksime võtta sellise HTML-i:

<div>
<p>Irure dolor in reprehenderit in voluptate velit 
cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</p> 
<p class="nr">135</p>
</div>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis</p> 
<p class="nr">136</p>
</div>

Kombineerides suhtelist ja absoluutset positsioneerimist võime saavutada kujunduse, kus antud järjekorranumber (klass 'nr') asub muu tekstiga kõrvuti.

div { 
    background: #ccbc2d;
    width: 300px;
    padding-right: 50px;
    position: relative;
}

div p.nr {
    position: absolute;
    width: 50px;
    top: 0;
    right: 0;
    font-weight: bold;
    color: #802000;
}

Väärtustena võib kasutada nii positiivseid kui negatiivseid pikkuseid, mis teeb võimalikuks kirjutada üht ja sama asja mitmel eri moel. Järgnevad deklaratsioonid on võrdväärsed (element 'em' liigutatakse ühe tähepikkuse jagu paremale):

em {
    position: relative;
    left: 1em;
}
em {
    position: relative;
    right: -1em;
}

(Väärtus 'auto' vajab seletamist.)

Laius ja kõrgus: width ja height

Väärtus: <pikkus> | <protsent> | auto | inherit

Parameetrid width ja height määravad vastavalt kui lai ja kõrge on elemendi sisu ehk, kui lai ja kõrge on element ilma servade, veeriste ja polstriteta.

p {
    width: 400px;
    height: 300px;
    margin: 20px;
    border: 5px solid red;
    padding: 15px;
}

Vaadeldes eelnenud näidet, proovige vastata järgnevatele küsimustele:

Kui kaugel on üksteisest parem ja vasak serv (servasid kaasa arvamata)?
Kui kaugel on üksteisest ülemine ja alumine veeris (veeriseid kaasa arvamata)?
Kui lai ja kõrge on element 'p' koos kõigi oma polstrite, servade ja veeristega?
Kui lai ja kõrge on element 'p' ilma polstrite, servade ja veeristeta?

Õiged vastused on:

Vasaku polstri laius + sisu laius + parema polstri laius: 15px + 400px + 15px = 430px.
Üleminese serva paksus + ülemise polstri paksus + sisu kõrgus + alumise polstri paksus + alumise serva paksus: 5px + 15px + 300px + 15px + 5px = 340px.
Laius: 20px + 5px + 15px + 400px + 15px + 5px + 20px = 480px.
Kõrgus: 20px + 5px + 15px + 300px + 15px + 5px + 20px = 380px.
Sisu laius = 'width' = 400px.
Sisu kõrgus = 'height' = 300px.

Mõneti võib näida imelik, et kasti laiust mõõdetakse tema sisu laiuse järgi ja mitte servast servani, kuid nii juba kord CSS töötab. Kahjuks pidasid sellist käitumist imelikuks ka Microsoft Internet Explorer 5 loojad ning leidsid, et märksa parem oleks, kui atribuudid 'width' ja 'height' määraksid ära vahemaa servast servani - nii tehtigi. Kuid see läks vastuollu kõigi teiste brauseritega, mille arendajad tegid nii nagu W3C spetsifikatsioon ette nägi. Nüüdseks on Microsoft selle vea oma brauseri kuuendas versioonis kõrvaldanud, kuid eelmises püsib see siiski. Õnneks on selle vastu olemas rohi nimega the box model hack (loe selle kohta vastavast peatükist).

Kui me seame tekstilõigule väiksema laiuse kui tal algselt on, siis tehakse lõik küll kitsamaks ent kuna tekst on tarvis siiski obketi sisse ära paigutada, siis muutub lõik pikemaks. Näiteks alguses on meie lõik selline:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.

ning pärast laiuse vähendamist (width: 50%;) selline:

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute 
irure dolor in reprehenderit in 
voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui 
officia deserunt mollit anim id 
est laborum.

See on täiesti korralik ja mõistlik käitumine tolle lõigu poolt ja ette heita pole midagi. Kui me nüüd aga määrame kõrguse, mis on väiksem kui tema praegune kõrgus (height: 7em;), siis võiks arvata, et osa teksti läheb kaduma:

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea

Tegelikult jääb aga näha kogu tekst, kuid kuna kõrgus on fikseeritud, siis tegelikult kõrgus ka selliseks saab, aga tekst lihtsalt voolab üle alumise serva ja kui sellele fikseeritud kõrgusega lõigule järgneks veel üks, siis kataks ülevalguv tekst kõik mis talle järgneb. Reeglina mitte just eriti meeldiv tulemus, ülevoolamist aitab meil õnneks väga hästi kontrollida parameeter 'overflow' (loe selle kohta eraldi peatükist).

NB! MS Internet Explorer tõlgendab seda valesti ja ei tekita sellist ülevoolamist vaid suurendab hoopis kõrgust.

Miinimum- ja maksimumlaiused ning -kõrgused

Kohe alguses tuleb ära öelda, et siin peatükis kirjeldatud parameetrid pole toetatud MS Internet Exploreri poolt. Sellegipoolest võib neid kasutada, et pakkuda teiste brauserite kasutajatele lisamugavusi.

min-width ja max-width

Parameeter: min-width

Väärtus: <pikkus> | <protsent> inherit

Vaikimisi: 0

Parameeter: max-width

Väärtus: <pikkus> | <protsent> none | inherit

Vaikimisi: none

Kui meie teksti laius muutub vastavalt brauseriakna laiusele, siis on see üldjuhul hea asi, aga kui ekraan on suur või isegi väga suur, siis võivad read venida liialt pikaks ja kogu tekst muutub raskesti loetavaks. Seepärast oleks hea kui me saaksime määrata, et teksti laius võib varieeruda vaid kindlas vahemikus.

Parameeter min-width määrab ära kui minimaalse laiuse ning max-width maksimaalse võimaliku laiuse. Vaikimisi on miinimumlaius 0 ning maksimumlaiuseks 'none', mis tähendab, et maksimumile pole piirangut seatud.

min-height ja max-height

Parameeter: min-height

Väärtus: <pikkus> | <protsent> inherit

Vaikimisi: 0

Parameeter: max-height

Väärtus: <pikkus> | <protsent> none | inherit

Vaikimisi: none

Kui laiuse puhul osutub kasulikumaks maksimumlaiuse määramise võimalus, siis kõrguse puhul osutub selleks hoopis miinimumkõrgus. Kujutame ette näiteks sellist kujundust, kus iga peatüki vasakul küljel asub kujunduselemendina väike rosett suurusega 150x200 pikselit. CSS-is on see üles tähendatud nõnda, et peatüki vasakut polstrit on suurendatud 150 pikseli võrra ning ülemisse vasakusse nurka on asetatud taustapilt, millel on paanimine keelatud (no-repeat). Seni kuni kõik peatükid on kõrgemad kui 200 pikselit näeb kõik kena välja, aga kui mõni peatükk osutub antud mõõdust lühemaks, siis lõigatakse meie kena rosett teksti lõppemisega ühelt joonelt lihtsalt pooleks ning see ei näeks just eriti kaunis välja. Seega oleks siin hea, kui me määraksime peatükkidele miinimumkõrguse, millest väiksemaks enam peatükk ei muutu.

Parameeter min-height määrab minimaalse kõrguse ning max-height maksimaalse kõrguse. Vaikimisi on 'min-height' 0 ning 'max-height' 'none' (piirang puudub).

Raamat: CSS

<< Servad, veerised ja polstrid

Taustad >>

Sisukord