Tableless Layouts otvara nove dizajnerske granice
Postoji mnogo razloga da ne koristite tabele za izgled . Jedan od najčešćih razloga koji ljudi daju za nastavak korišćenja je to što je teško napraviti raspored CSS-a. Iako CSS skriptiranje podrazumeva krive učenja, kada shvatite kako da uradite CSS izgled, možda ćete biti iznenađeni koliko je lako. I kada jednom naučite, obratite se drugom najčešći razlog zbog kojeg ljudi ne daju za korišćenje CSS-a - "Brže je pisati tabele". Brže je zato što znate tabele, ali jednom kada naučite CSS-a, možda ćete biti brži s tim.
Browser podrška CSS pozicioniranja
Pozicioniranje CSS-a je dobro podržano u svim modernim pretraživačima . Osim ako ne gradite web lokaciju za Netscape 4 ili Internet Explorer 4, vaši čitači ne bi trebali imati problema sa prikazivanjem Web stranica postavljenih na CSS-u.
Razmišljajte kako pravite stranicu
Kada gradite sajt koristeći tabele, morate razmišljati u tabelarnom formatu. Drugim rečima, razmišljate u smislu ćelija i redova i kolona. Vaši veb stranici će odražavati ovaj pristup. Kada pređete na dizajn pozicioniranja CSS-a, počinje da razmišljate o vašim stranicama u smislu sadržaja, jer se sadržaj može postaviti bilo gdje želite na rasporedu - čak i slojevito na drugom sadržaju.
Različite web stranice imaju različite strukture. Da biste napravili efikasnu stranicu, procenite strukturu bilo koje stranice pre nego što joj dodelite sadržaj. Primerna stranica može uključivati pet različitih sekcija:
- Header . Dom banner reklame, ime sajta, linkovi za navigaciju, naslov članka i kao i nekoliko drugih stvari.
- Desna kolona . Ovo je prava strana stranice sa okruženjem za pretragu, oglasima, video kutijama i trgovačkim mestima.
- Sadržaj . Tekst članka, blog posta ili korpe za kupovinu - meso i krompir na stranici.
- Inline oglasi . Oglasi su u liniji sadržaja.
- Footer . Donja navigacija, informacije o autoru, informacije o autorskim pravima, niže reklame i slične veze.
Umesto stavljanja tih pet elemenata u tablicu, koristite elemente za razdvajanje HTML5 da definišete različite dijelove sadržaja, a zatim koristite pozicioniranje CSS-a kako biste postavili elemente sadržaja na stranici.
Prepoznavanje delova sadržaja
Kada definišete različite sadržaje na vašoj web lokaciji, morate ih upisati u svoj HTML. Iako možete, uopšteno, postaviti svoje sekcije u bilo koji poredak, dobra je ideja da prvo postavite najvažnije delove vaše stranice. Ovaj pristup će pomoći u optimizaciji pretraživača.
Da biste prikazali pozicioniranje, zamislite stranicu sa tri kolone ali bez zaglavlja ili podnožja. Možete da koristite pozicioniranje kako biste stvorili bilo koju vrstu prikaza koji vam se sviđa.
Za tabelu sa tri kolone, definišite tri sekcije: lijevi stupac, desna kolona i sadržaj.
Ovi sekciji će biti instancirani korišćenjem elementa ARTICLE za sadržaj i dva SECTION elementa za dve kolone. Sve će takođe imati atribut koji ga identifikuje. Kada koristite atribut id, morate pripisati jedinstveno ime za svaki id.
Pozicioniranje sadržaja
Koristeći CSS, definišite poziciju za vaše ID'd elemente. Svoje informacije o položaju čuvajte ovako:
#content {
}
Sadržaj unutar ovih elemenata zauzima što više prostora koliko može, odnosno 100 posto širine trenutne lokacije ili stranice. Da biste uticali na lokaciju sekcije bez prisiljavanja na fiksnu širinu, promenite padding ili svojstva margine.
Za ovaj izgled postavite dve kolone na fiksne širine a potom postavite njihovu poziciju apsolutno, tako da na njih ne bi uticali gde se nalaze u HTML-u.
# left-column {
pozicija: apsolutno;
lijevo: 0;
širina: 150px;
margin-left: 10px;
margin-top: 20px;
boja: # 000000;
padding: 3px;
}
# desno kolona {
pozicija: apsolutno;
levo: 80%;
vrh: 20px;
širina: 140px;
padding-left: 10px;
z-indeks: 3;
boja: # 000000;
padding: 3px;
}
Zatim za oblast sadržaja postavite granice s desne i leve strane tako da se sadržaj ne bi preklapao dva spoljna stupca.
#content {
vrh: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
boja: # 000000;
}
Definisanje vaše stranice pomoću CSS-a umjesto HTML tablice zahtijeva malo više tehničke vještine, ali isplata ide dalje od fleksibilnijih i odgovarajućih dizajnera i lakše u donošenju strukturnih prilagođavanja na vašoj stranici.