Ovo mi je prvi xHTML koji radim, pa se izvinjavam na greskama, ajmo ispocetka.
Kôd:
<body>
<div id="container">
<div class="stripe"><img src="images/header.jpg" alt="header" /></div>
<div class="stripe"><img src="images/kategorije.jpg" alt="kategorije" /></div>
<div id="left">
<div class="navigation">
:: <a href="magazin.php">Magazin</a><br />
:: <a href="pretplata.php">Pretplata</a><br />
:: <a href="redakcija.php">Redakcija</a><br />
:: <a href="onama.php">O nama</a><br />
:: <a href="marketing.php">Marketing</a>
</div>
</div>
<div id="right">
<div class="navigation">
:: <a href="vesti.php">Vesti</a><br />
:: <a href="linkovi.php">Linkovi</a><br />
:: <a href="oglasivaci.php">Oglašivači</a><br />
:: <a href="reportaze.php">Reportaže</a><br />
:: <a href="intervjui.php">Intervjui</a>
</div>
</div>
<br class="clearfloat" />
<div class="stripe"><img src="images/novonaforumu.jpg" alt="forum" /></div>
<div id="banner"><img src="images/baner.gif" alt="banner" /></div>
<div class="stripe"><img src="images/footer.jpg" alt="footer" /></div>
</div>
</body>
</html>
CSS
Kôd:
#container{
width: 320px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
text-align: left;
}
#stripe{
width: 320px;
height: 24px;
padding:0px;
margin: 10px auto;
}
#banner{
width: 300px;
height: 75px;
margin-left: auto;
margin-right: auto;
}
#navigation{
color: #2876c0;
margin-bottom: 10px;
padding:0px;
}
#left{
width: 150px;
float: left;
}
#right{
width: 150px;
float: right;
}
#magazin{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
A pokusavam da napravim prored iznad i ispod svih elemenata, da malo disu.
Evo sta pokusavam.