Predpostavljam, da je za naš praktični projekt značilna postavitev stolpcev. Preden pa ta projekt predstavim v živo in v barvah, bi vam rad pokazal, kako lahko sami izvedete postavitev stolpcev. Pri tem se bom osredotočil na postavitve z dvema in tremi stolpci, saj te še vedno predstavljajo osnovo za večino spletnih mest.
Dvoslojna postavitev je verjetno klasična postavitev spletnega oblikovanja par excellence. Navigacija je običajno predstavljena v levem oknu, medtem ko je dejanska vsebina vidna v desnem stolpcu. Mimogrede, to vedenje se je nekoliko spremenilo v povezavi z blogi. V številnih blogih so navigacija ali oglasi prikazani na desni strani, medtem ko je dejanska vsebina predstavljena na levi strani.
Takšne aplikacije je razmeroma enostavno izvajati v CSS. Dva stolpca sta pravzaprav najpreprostejša oblika postavitve.
V naslednjem primeru bom prikazal postavitev z dvema stolpcema, ki se spopada z absolutnimi odstotnimi vrednostmi.
Tukaj je celoten primer:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.sl</title> <style> #nav { position: absolute; left: 0; margin: 0; width: 20%; background-color:#66CCCC; } #main { margin: 0; margin-left: 20%; width: 80%; background-color:<div id="header">Razporeditev z absolutnim pozicioniranjem</div> <div id="nav">Navigacija</div> <div id="main">To je območje vsebine</div> <div id="footer">Tole so informacije o avtorskih pravicah.</div> </body> </html>In tako je videti v brskalniku:
Levi stolpec lahko preprosto premaknete na desno. Prilagodite naslednja navodila:
- Za #nav spremenite levo: 0 v desno: 0.
- Za #main preprosto spremenite margin-left v margin-right.
Ko so spremembe shranjene, je viden želeni rezultat.
Vendar ima prikazana postavitev, ki temelji na absolutnem pozicioniranju, eno težavo: če vsebina levega stolpca postane obsežnejša, teče čez območje noge.
To je preprosto posledica dejstva, da za absolutno umeščene elemente ni "prostega prostora". Težavi se lahko izognete tako, da v glavno območje vstavite vsebino, ki je daljša od vsebine v levem stolpcu.
To obliko postavitve zato uporabite le, če ste prepričani, da je glavno območje dejansko višje od levega (ali desnega) stolpca.
Postavitev z dvema stolpcema s plavajočim elementom
Težavo, ki se je pojavila v prejšnjem primeru s prekrivanjem območja noge, lahko rešite z uporabo lastnosti float. Spremenjena sintaksa je videti takole:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.sl</title> <style> #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#66CCCC; width: 80%; } #footer { clear: <styl> </head> <body> <div id="header">Razporeditev z absolutnim pozicioniranjem</div> <div id="nav">Območje za navigacijo</div> <div id="main">To je območje vsebine</div> <div id="footer">Tudi so informacije o avtorskih pravicah.</div> </body> </html>V tem primeru je bila obema stolpcema dodeljena lastnost float. Zaradi tega sta stolpca zdaj razporejena drug ob drugem.
Levemu stolpcu je dodeljena širina 20 odstotkov. Posebej bodite pozorni na dejstvo, da element, umeščen z uporabo lastnosti float, resnično vedno pričakuje navedbo širine.
Širina dejanskega območja vsebine je 80 odstotkov. Tudi to območje je postavljeno s float: left. Zato je to območje prikazano ob levem stolpcu.
Naslednja sintaksa je uporabljena tako, da je območje noge dejansko vedno vidno v spodnjem delu okna - tj. pod stolpci:
#footer { clear: both; }
Opozoril sem že na možnost opredelitve ločenega razreda za to različico.
Trije stolpci s plavajočim
Postavitev s tremi stolpci je prav tako priljubljena različica v spletnem oblikovanju. Tipična postavitev je videti takole:
- Levi stolpec vsebuje navigacijo.
- Srednji stolpec vsebuje dejansko vsebino.
- Dodatne informacije ali oglasi so prikazani na desni strani.
Spodaj najdete primer, v katerem je ustvarjena prilagodljiva postavitev s tremi stolpci. Sintaksa je - kot boste kmalu ugotovili - precej podobna zgoraj prikazanemu primeru z dvema stolpcema. Vendar pa je zdaj dodano območje div z desno, ki na koncu predstavlja desni stolpec okna.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.sl</title> <style> #main, #right { margin: 0; border: 0; padding:0; } #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#6666CCCC; width: 60%; } #right { float: right; width: 20%; background-color:#6699FF; } #footer { clear: both; } </style> </head> <body> <div id="header">Razporeditev z absolutnim pozicioniranjem</div> <div id="nav">Območje za navigacijo</div> <div id="main">To je območje za vsebino</div> <div id="right">To je desni stolpec</div> <div id="footer">Tudi so podatki o avtorskih pravicah.</div> </body> </html>
Novemu področju je bila dodeljena širina 20 odstotkov. Postavitev je torej naslednja:
- Levi in desni stolpec zavzemata vsak po 20 odstotkov razpoložljivega prikaznega območja.
- Srednji stolpec je širok 60 odstotkov.
Zaradi prikazane sintakse je desno območje dejansko prikazano na desni strani.
Vendar je sintaksa v tem pogledu prilagodljiva. Glavno območje lahko prilagodite tudi na naslednji način:
#main { margin: 0; float: right; border: 0; background-color:#6666CC; width: 60 %; }
Tukaj je bila vrednost float nastavljena na desno. To premakne desno območje na levo.
V tem učbeniku ste videli, kako enostavno je opredeliti osnovne postavitve na podlagi floata. To znanje je zdaj osnova za izdelavo spletnega mesta. V naslednjih učbenikih bomo spletno mesto ustvarjali korak za korakom, začenši z osnovno strukturo.
