Lõpuks oleme jõudnud veebilehekülje ehituse ühe kõige olulisema teemani: elementide paigutus. Eelnevalt oleme rääkinud html-põhielementidest, kuidas neid kujundada ja ka css-st oleme peamisi teemasid käsitlenud. Kuid sellise olulise ja huvitava teema nagu paigutus, jätsin magustoiduks. Kuna me oleme olnud tublid lapsed ja supitaldrikud tühjaks teinud, võime asuda magustoidu juurde.
DIV
Niisiis, xhtml-l on selline märgend nagu “div” (divide) mis võimaldab muuta elemendi asukohta. See justkui paneks elemendile rattad alla ning muudab selle liikuvamaks. “div” märgenditega ümbritsetud elemendi asukohta saab alati muuta.
Ümbritseme mõne elemendi “div” märgenditega. Seejärel lisame stiililehte märgendi div ning nende järel looksulud. Looksulgude vahele võime lisada ükskõik millised omadused, kuid positsiooni määramiseks lisame sellised reeglid nagu “position”. Selle parameetril on kolm väärtust, 
millest räägime hiljem, kuid praeguseks määrame selle väärtuseks “absolute”. Seejärel lisame parameetrid, mis näitavad, kui kaugele nihutatakse elementi veebisirvija akna äärest. Nendeks parameetriteks on “left” ja “top”.
Üks tähtis omadus, mis tuleb meelde jätta on see, et elemendi asukoha kaugust stardipunktist, määratakse selle järgi, kui kaugel on elemendi ülemine vasak nurk positsioneerimise algasukohast. Algasukoht oleneb positsioneerimise liigist. Näiteks, kui parameetriteks on “top: 25 px” ja “left: 40 px” siis elemendi ülemine vasak nurk on sellisel juhul algpunktist 25 piksli võrra allpool ja 40 piksli võrra paremal pool.
DIV-le nime andmine
Kui meil on käsil tõsine ja suur veebilehekülg, millel on mitukümmend elementi ja igal elemendil peab olema kindel asukoht, ei saa me iga elemendi puhul kasutada sama “div” elementi. XHTML ei saa siis enam aru, kumba elementi te kavatsete nihutada. Igale “div”-le nime andmiseks tuleb stiililehte lisada trellid # ning seejärel sobilik nimetus. Nimetusele järgnevad looksulud, kuhu lähevad asukoha parameetrid. Seejärel lisame veebilehe kehas olevale “div” märgendile atribuudi “id” ja selle väärtuseks nime, mis on meil stiililehes juba antud.
Näiteks, kui meil on css-s pandud nimetus #yuri, ning sellele on määratud teatud asukoha parameetrid, siis lisades “div”-le sama nimega atribuudi väärtuse, omandab “div” märgendite vahel olev element samad omadused, mis ID “yuri”.
Positsiooni tüübid
XHTML-s on levinud on 3 tüüpi positsioneerimist: “absolute”, “relative” ja “fixed”. Kõigi kolme positsiooni tüübi peamiseks erinevuseks on see, et kus elementide stardijoon, mille alusel saab määrata elemendi asukoha aknas. Ükski neist positsiooni tüüpidest pole iseenesest halb ega hea, erinevaid positsiooni tüüpe kasutatakse erinevates olukordades, ning neid kõiki võib veebilehekülje valmistamisel vaja minna.
Absolute Selle tüübi puhul on stardijooneks veebisirvija akna vasak ülemine nurk, kuhu element ilmub esialgselt (küllap olete seda tähele pannud, kui te eelnevalt veebilehele elemente lisasite). Parameetritega “left” ja “top” määrate te selle kui kaugel hakkab element olema sellest stardipunktist. “Left” näitab seda, kui kaugel on element akna vasakust äärest ja “top” määrab selle, kui kaugel on element akna ülemisest äärest. Selle tüübi puhul on miinuseks see, et ta ei arvesta teiste elementide asukohaga. Kui element katab täielikult või osaliselt teist elementi, siis pole tal sellest sooja ega külma.- Relative Selle tüübi puhul on stardijooneks elemendi asukoha määramisel see koht, kus ta asuks siis, kui talle poleks mingit asukohta määratud. Kui element on veebilehel algseadistuste järgi akna vasakust ülemisest nurgast allpool, siis positsiooni määramisel on stardijooneks just see koht, kust ta esialgselt oli.
- Fixed on tüübilt sarnane “absolut”-ga. Ka selle puhul on positsiooni määramise algpunktiks akna ülemine vasak nurk, KUID peamine erinevus seisneb selles, et sellist tüüpi positsiooniga element püsib alati veebisirvija akna suhtes paigal. Ehk, kui te kerite veebilehte üles ja alla, jääb “fixed” element oma paigale, ta võib üle minna teiste elementidest. Ühesõnaga, te olete seda tüüpi elemente näinud, veebilehtedel asuvate reklaamide puhul.
tehnikarott 