U ovom tutorijalu napravit ćemo CSS za HTML stranicu fiksne širine. Ovo je ujedno i najčešći oblik web stranice koja se samo visinom prilagođava sadržaju, a širinu uvijek zadržava. Ovdje ćete vidjeti i veliku prednost korištenja CSS-a za izradu layouta stranice nad tablicama. CSS kod je puno pregledniji i jednostavniji za izmjenu i ispravke kao i za samu promjenu izgleda cijele web stranice. Za početak uzet ćemo "standardni" izgled koji sačinjava:
- Naslov/baner stranice
- Tijelo stranice sa tri stupca
- Podnožje stranice
Body dio
Za početak napišimo body dio HTML stranice.
<![CDATA[
<div id="okvir">
<div id="zaglavlje">
Baner
</div>
<div id="izbornik">
Izbornik
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj
</div>
<div id="reklame">
Reklame
</div>
<div id="podnozje">
Podnozje
</div>
</div>
]]>
Veoma jednostavan i pregledan dio koda. Ovaj kod ujedno predstavlja i sve dijelove naše stranice koje ćemo naknadno nadopuniti sadržajem tako da naša stranice dobije krajnji izgled.
Head dio
Body dio koda koji smo gore napisali sada zahtijeva CSS koji će posložiti DIV elemente na njihove pozicije.
<![CDATA[
#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}
#zaglavlje {
background: #dddddd;
}
#izbornik {
float: left;
width: 200px;
background: #ebebeb;
}
#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
}
#reklama{
float:right;
width: 150px;
background: #ebebeb;
}
#podnozje {
clear:both;
background:#dddddd;
}
]]>
Pogledajmo gornji CSS kod. Klasom okvir definirali smo marginu od 10px i ukupnu dužinu stranice od 800px. Svi drugi elementi će se posložiti unutar ovog div elementa i unutar ovih 800px. Zaglavlju smo samo promijenili boju u #dddddd.
Sljedeće tri klase moramo posložiti jednu do druge. U tu svrhu koristit ćemo atribut float. DIV izbornik i glavnisadrzaj će imati vrijednost float-a left, a div reklama će imati vrijednost right. Vrijednost width ovih div elemenata možete postaviti na bilo koju vrijednost, ali pripazite da njihov zbroj iznosi 800px koje smo postavili kao maksimalnu širinu stranice.
Upravo smo završili cjelokupan kostur stranice. Ako ste sve dobro napravili trebali bi u web pregledniku vidjeti sljedeće:
Ostaje nam samo da ubacimo sadržaj u stranicu. Stranica bi se sama trebala prilagoditi sadržaju. Ovaj sadržaj jednostavno ćemo postaviti unutar odgovarajućeg div elementa.
Gornja stranica će se prilagođavati sadržaju bez obzira koliki tekst postavite u Glavni sadržaj. Zaglavlje i podnožje će uvijek biti na svome mjestu. Cjelokupan kod stranice se nalazi ispod. Jednostavno sve kopirajte i napravite novi HTML dokument. U ovom kodu je, radi jednostavnosti, u jedan dokument postavljen cjelokupan CSS za stranicu. Preporuka je da se CSS odvoji u poseban dokument te tako omogući jednostavnije i robusnije uređivanje i mijenjanje stranice.
<![CDATA[
<html>
<head>
<style>
#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}
#z
aglavlje {
background: #dddddd;
padding:10px
}
#izbornik {
float: left;
width: 150px;
background: #ebebeb;
padding:10px;
}
#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
padding:10px;
}
#reklama{
float:right;
width: 160px;
background: #ebebeb;
padding:10px;
}
#podnozje {
clear:both;
background:#dddddd;
text-align: center;
}
</style>
</head>
<body>
<div id="okvir">
<div id="zaglavlje">
<font style="font-face:arial; font-size:80px; color:#FF0000">
<b>@</b>
</font>
<font style="font-face:arial; font-size:30px; color:#FF0000">
CSS fiksna širina
</font>
</div>
<div id="izbornik">
Poèetna<br>
O nama<br>
Kontakt<br>
Proizvodi<br>
Download<br>
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj<br><br>
Lorem ipsum at doctus postulant consetetur usu, duo solum equidem
detracto ex. Choro legendos facilisis vis ut, in eum alii noster
graeco. Invenire cotidieque appellantur vis at, zzril primis
habemus nam te, ad choro iudico virtute nec. Quo invidunt incorrupte
no, nulla doming rationibus ut eam. Aliquando urbanitas
conclusionemque ea nec, ex duo munere legere, per tota apeirian eu.
Duo no gloriatur intellegam, quo an quodsi epicuri sapientem. Nec ne
dico fabellas detraxit, solum clita reformidans pri te, est an
vitae disputando consequuntur. Has elit prompta conclusionemque ei,
porro meliore nec ad. Duis tempor commodo qui ad, eligendi
sententiae philosophia et sea. Virtute takimata argumentum
id nec, ex eum vitae partem convenire, quem detracto mandamus
vim ex. Deleniti expetenda salutatus cu nec, alii veniam
persequeris has id. Nibh phaedrum laboramus has at, has odio omnesque
ut. His no oratio vivendum definitiones, brute nostrud theophrastus
an mel. Nam possit sadipscing ei. An tamquam invenire complectitur
vim, an sea assum recusabo scribentur.
Sonet exerci offendit et sea, per accommodare ullamcorper
consequuntur eu, has no harum decore. Pri in timeam nonummy, in
falli doming persecuti vis, pro id meis ubique epicuri. An vim
scripta efficiantur, ut sed nostro efficiendi scriptorem, vel
habeo sanctus mediocritatem id.
Nostro aliquam ancillae ex vis, in solum facer accusamus eam.
</div>
<div id="reklame">
<font style="font-face:arial; font-size:20px; color:#FF0000">
Reklamni prostor
<br>
za Vas
</font>
</div>
<div id="podnozje">
Copyright: osvemu.com
</div>
</div>
</body>
</html>
]]>
