Razrez spletne strani s pomočjo polj – DIV

Spletno stran lahko zgradimo tudi s pomočjo tako imenovanih DIV polj.  Osnutek spletne strani razdelimo na posamezna polja, ta polja so ponavadi glava, navigacija, vsebiski del in noga. Dodamo lahko tudi druga poljubna polja. Atribute teh polj ponavadi urejamo s pomočjo CSSja oziroma s pomočjo stilov, ki so lahko tudi znotraj HTML datoteke ali samega DIV polja. Kateri tip uporabimo je odvisno od števila strani in načina programiranja. V našem primeru bomo uporabili tip, kjer se stili določajo znotraj DIV polja. DIV polju lahko določamo širino, višino, barvo, pozicijo,… če pa želimo imeti dva polja v isti višini, se pravi enega levo enega desno pa moramo najprej uporabiti polje – DIV za okvir, kjer določimo širino, nato pa dva dodatna polja enega za levo stran enega za desno. Potrebno je še uporabiti parameter “FLOAT” – float:left, tako se polji postavita vsporedno.  Za centriranje celotne spletne strani na sredino moramo dodati stil na sam “body” – <body style=”text-align:center;”>.

PRIMER KODE:
<div align="center" style="width:700px;;height:80px;background:#FF6600;line-height:80px;">
Glava
</div>

<div id="okvir" style="width:700px;;height:250px;vertical-align:middle;line-height:250px;">
<div id="navigacija" align="center" style="width:200px;;height:250px;background:#CCCCCC;float:left;vertical-align:middle;">Navigacija</div>
<div id="vsebina" align="center" style="width:500px;;height:250px;float:left;vertical-align:middle;">Vsebina</div>
</div>

<div align="center" style="width:700px;;height:20px;background:#FFAA00;line-height:20px;">
Noga
</div>

PRIMER IZPISA:

Glava
Vsebina
Noga

Širina DIV je bila prirejena za predogled.