Izvod i Status
Puno puta se govorilo o tome da se tabele ne trebaju koristiti u HTML-u. Ova stranica sadrzi informacije o tome kako kreirati izgled sa 3 kolone koristeci samo CSS.
Molimo vas da posaljete komentare i sugestije Dominique Hazaël-Massieux. Prevodi ovog clanka su dostupni.
Uvod
HTML je strukturalni jezik, sto znaci da se koristi, ili bi trebalo da se koristi, za dodavanje strukture u tekst putem tagova. Stoga, table tag se treba koristiti samo za formatranje podataka u tabeli prilikom cega se kolone i redovi dovode u vezu.
Medjutim, od uvodjenja tabela u HTML, cesto se koriste u dizajnerske svrhe, obicno da bi se web strana podelila u kolone. Pored toga sto ovaj postupak rusi samu logiku i svrhu HTML-a, on cak i ne pomaze u vecem broju clucaja zbog poteskoca rastavljanja i renderovanja tabela u odredjenom kontekstu (ogranicavajuci faktori, restrikcije pregledavanja portova...).
Ovaj dokument opisuje jedan nacin kreiranja izgleda sa 3 kolone i poziva se na druge tehnike .
Opis Izgleda
Dole opisana tehnika se koristi na sledecoj strani za nove W3C korisnike i omogucuje kreiranje izgleda sa 3 kolone koji ima sledece karakteristike:
- tekst u centru strane je onaj koji se nalazi na samom pocetku koda, sto znaci da ce se prvo on citati u nevizuelnim brauzerima koji ne pordrzavaju CSS
- Onda slede leva i desna kolona u ovom redosledu
Ova metoda je idealna za naslovne strane jer omogucuje da se kompletan tekst nalazi u centru a liste linkova sa strane
Medjutim, jedna od restrikcija je ocigledna u CSS implementacijama, ali ce ipak lepo izgledati u tradicionalnom vertikalnom okruzenju
Ova metoda je primenjena na ovoj strani kako bi dobili vizuelnu ideju kako funkcionise
Implementacija
Ovaj izgled koristi CSS
apsolutno pozicioniranje. Ako definisemo 3 oblasti na HTML strani
<div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list">, onda mozemo primeniti sledeca CSS pravila na njih:
/* Karakteristike zajednicke za liste na levoj i desnoj strani */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* Ostavljamo mali prazan prostor sa strane upotrebom margin-* pravila margina */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* i onda stavljamo svaku listu na svoje mesto */
#list1 {
left:0;
}
#list2 {
right:0;
}
Ideja je da se glavna oblast isece po stranama koristeci
margin-left i margin-right pravila, i onda da se leva i desna strana pozicioniraju koristeci
position:absolute, i na kraju da se koordinate za levi i desni gornji ugao postave na (0,0).
Da bi se sprecila losa CSS implementacija koristi se naredba <style type="text/css">@import
url('your-stylesheet-url');</style>.