18.05.
2008

tabele so passé

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:

 preprost izdelek

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

 

1 komentar

Dodaj komentar
  1. lepo in uporabno :)