Opažam, da velika večina začetnikov pri postavljanju predlog še vedno uporablja tabele. Verjamem, da je lažje začeti s tabelami in da nudijo takojšnje, lahko predvidljive rezultate. Ko pa enkrat stran postane obširna, se izkaže, da so tabele prava mora. Delanje popravkov postane precej oteženo, saj se je v kodi težko orientirati.

DIV značka nam nudi odlično nadomestilo za tabele. Treba se je le naučiti nekaj osnovnih CSS lastnosti in se zavedati teža, ki ji povzroča IE6. Ko to osvojimo, je vse lažje.

Kako centriramo stran s fiksno širino s pomočjo DIV značke?

Začetnik v HTMLju bi postavil tabelo s fiksno širino in dodal “align=center”. Ker pa nismo več začetniki, se bomo poslužili DIV značk.

Najprej HTML koda:

<div id=”ogrodje”>
Vsebina spletne strani….
</div>

In nato še CSS oblikovanje:

#ogrodje {
width: 800px;
margin-right: auto;
margin-left: auto;
}

Postavili smo sredinsko poravnano plast širine 800px. Enostavno, ne? DIV značkam lahko damo poljuben ID, s katerim smiselno poimenujemo polja.

Sredinsko centrirana stran fiksne širine. Vsebuje glavo, izbirni meni in vsebino.

HTML koda:

<div id=”ogrodje”>
   <div id=”glava”></div>
   <div id=”izbirni_meni”></div>
   <div id=”vsebina”></div>
</div>

CSS oblikovanje:

#ogrodje {
 width: 800px;  /* Določimo širino strani. */
/* Avtomatski odmik od desnega roba ekrana. */
 margin-right: auto; 
/* Avtomatski odmik od levega roba ekrana. */
 margin-left: auto;
}

#glava {
 height: 200px; /* Določimo višino glave. */
 width: 800px; /* Določimo širino glave. */
}

#izbirni_meni {
 width: 200px;  /* Določimo širino menija. */
 float: left; /* Določimo oblivanje z ostalimi elementi. */
 min-height: 300px; /* Določimo minimalno višino menija. */
}

#vsebina {
 width: 600px; /* Določimo širino vsebine. */
 float: left; /* Določimo oblivanje z ostalimi elementi. */
 min-height: 300px; /* Določimo minimalno višino vsebine. */
}

/*  Prikazanim elementom nisem določil barve ozadja, kot na sliki. */

Pa smo dobili nekaj takega:

Dobili smo osnovo, na kateri lahko delamo dalje in to brez uporabe tabel!

Priporočam naslednje povezave za dodatno branje o CSS pozicioniranju:
- http://glish.com/css/
- http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
- http://www.pixel2life.com