Css vam omogućava da klasičan layout izrađen tablicama zamijenite onim sastavljenim od divova. Div layout vam omogućava veću kontrolu nad sadržajem, ali i samim layoutom. Ovim ću vas tutorialom naučiti kako napraviti layout sastavljen od header, footera i 2 stupca.
Možete pogledati demo.
Najprije ćemo početi pisanjem html koda za layout. Html kod layouta nije ništa posebno, nekoliko divova uz dodatak sadržaja unutar njih.
<div id="main">
<div id="header"></div>
<div id="container">
<div id="left">
<ul class="navigacija">
<li><a href="#">neki link</a></li>
<li><a href="#">neki link</a></li>
<li><a href="#">neki link</a></li>
<li><a href="#">neki link</a></li>
<li><a href="#">neki link</a></li>
</ul>
</div>
<div id="right">
Lorem ipsum dolor sit amet ...
</div>
<div id="popravak"></div>
</div>
<div id="footer">copyright© tutoriali.biz</div>
</div>
Ono na što trebate potrošiti posebnu pažnju su tri diva, main, container, popravak. Div main sadrži sve divove i ostali sadržaj stranice, njime stranicu centriramo. U container stavljamo divove left, right i prethodno navedeni popravak. Popravak nam služi kako bismo spriječili raspadanje stranice nakon što divovima left i right dodijelimo svojstva float.
više na pcchip.hr