Vidi Mama, bez tabela!

Iako kao i svaki drugi “pravi” (Web) programer od (Web) dizajna bežim “kao Đavo od krsta”, tu i tamo morao sam da se bavim (X)HTML-om, makar i samo radi pravljenja prototipova u smarty-u. Prilikom kodiranja HTML-a uvek sam se maksimalno trudio da poštujem W3C standarde ali sam se zadovoljavao zastarelim layout-om koji koristi tabele za pozicioniranje elemenata na strani.

U poslednje vreme primetio sam da sve više dizajnera čak i kod nas kreira sajtove koristeći moderan “tableless” iliti css-p (css positioning) pristup. Nisu to samo sajtovi kompjuterskih geek-ova, radi se i o vrlo komercijalnim sajtovima (primer svetski espn.com, a kod nas mojmobilni.com, Romance Cafe itd). Sve u svemu, rešio sam i sam da naučim ovu novu tehniku, i pre izvesnog vremena poručio knjigu sa sitepoint-a (koji je btw vrhunski primer tableless dizajna): “HTML Utopia: Designing WIthout Tables“. Nažalost knjiga je nedeljama skupljala prašinu na mojoj polici, jer jednostavno nisam imao vremena da se tome posvetim.

Pre odlaska na odmor, u potpunosti frustriran svojim blog software-om (movable type) obećao sam sebi (a bogami i drugima) da ću kreirati sopstveni blog software. U pripremi da sa tim konačno i krenem, rešio sam da usavršim svoje znanje css-a i da konačno naučim i principe tableless dizajna. Napokon sam uzeo knjigu u ruke, i čisto radi vežbe rešio da prepravim svoj stari sajt tako da bude pravi tableless xhtml sajt. Evo kako je to išlo.

Nakon kraće analize shvatio sam da dizajn koji je meni potreban spada u tipičan “3 columns layout” sa top i bottom contentom (header i footer). Kada se to razbije na div elemente to izgleda kao na slici:

Metod koji sam ovde koristio je da sam levoj i desnoj koloni dodelio float atribute (float: left i float: right) dok sam centralnoj koloni dodelio odgovarajuću levu i desnu marginu u skladu sa dužinama leve i desne kolone. Dakle u css-u:

#leftcolumn
{
float: left;
width: 215px;
border-right: 2px dotted #dadada;
padding-left: 7px;
margin: 0;
height: 75%;
}

#centercolumn
{
margin-left: 230px;
margin-right: 200px;
}

#rightcolumn
{
float: right;
width: 100px;
}

Kod dizajna ovom metodom (gde leva i desna kolona “plutaju) bitno je da se u html kodu prvo ubace leva i desna kolona, pa tek onda centralna. Na kraju, posle konteinera koji sadrzi sve ove kolone, bitno je u footer-u ubaciti “clear: both” kako bi sadrzaj footera bio ispod ove dve plutajuce kolone.

Rezultat možete videti na http://www.dinke.net/dinke_tableless.html. Namerno nisam ubacio flash sadržaj kako bi dokument bio xhtml. To je priča za neki drugi blog entry 🙂

Za kraj, pored knjige koju sam gore pominjao jako dobri css-p resursi su:

http://glish.com/css/

Homepage