Malo sam ti izmenio html, i nisam stavio tvoj spike slicicu
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>very titled document</title>
<link rel="stylesheet" type="text/css" href="./first.css" media="screen" title="fixed" />
</head>
<body>
<div id="container">
<div id="meni" >
<ul>
<li><img src="btn.png" width="87" height="23" /></li>
<li><img src="btn.png" width="87" height="23" /></li>
<li><img src="btn.png" width="87" height="23" /></li>
<li><img src="btn.png" width="87" height="23" /></li>
<li><a href="http://www.google.com">www.google.com</a></li>
</ul>
</div><!-- end of meni -->
<div id="mainpic"><img src="nicecar.jpg" height="200" />
</div><!-- end of mainpic -->
<div id="prozor1">
<img src="nicecar.jpg" /><p> Prozor 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare semper lorem, sed malesuada mauris posuere ac.
Maecenas bibendum dapibus sapien, nec aliquam tellus gravida ac. Proin pretium ligula sit amet nisl interdum rhoncus sit amet id risus. Phasellus fringilla augue vitae
dui sollicitudin commodo. Morbi ut orci orci. Ut rutrum eleifend pulvinar. Ut non justo nunc. Aenean ut est arcu, a ultricies turpis. Sed lectus velit, laoreet vel viverra
accumsan, dapibus vel ante. Mauris mauris purus, molestie sit amet pretium eget, volutpat in tellus. Nulla orci felis, semper eget mattis id, imperdiet ac augue.
Vivamus viverra vehicula condimentum.</p>
</div><!-- end of prozor1 -->
<div id="prozor2"><p>Prozor 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare semper lorem, sed malesuada mauris posuere ac.
Maecenas bibendum dapibus sapien, nec aliquam tellus gravida ac. Proin pretium ligula sit amet nisl interdum rhoncus sit amet id risus. Phasellus fringilla augue vitae
dui sollicitudin commodo. Morbi ut orci orci. Ut rutrum eleifend pulvinar. Ut non justo nunc. Aenean ut est arcu, a ultricies turpis. Sed lectus velit, laoreet vel viverra
accumsan, dapibus vel ante. Mauris mauris purus, molestie sit amet pretium eget, volutpat in tellus. Nulla orci felis, semper eget mattis id, imperdiet ac augue.
Vivamus viverra vehicula condimentum. </p>
</div><!-- end of prozor2 -->
<div class="clear"></div>
<div id="prozor3"><p> Prozor 3</p>
</div><!-- end of prozor3 -->
<div id="prozor4"> <p> Prozor 4</p>
</div> <!-- end of prozor4 -->
</div><!-- end of container -->
</body>
</html>
Dodao sam vise texta da bi video kako duzina texta utice na float
Code:
#container {
width: 960px; /*nemaju svi widescreen */
margin: 50px auto;
padding:10px;
background-image:url('BgPic.jpg');
}
#mainpic{
margin: 15px auto;
width: 288px;
padding:10px;
}
#meni {
margin: 15px 10px;
padding: 5px;
border: 1px dotted brown;
float: right;
}
#meni ul {
list-style: none;
}
#meni a{
background-color: white;
}
#prozor1 {
border: 1px dotted brown;
width: 400px;
margin: 20px 20px;
float: left;
}
#prozor1 img { /*nemoj da stavljas align sa img tagom, zasto onda koristis css */
float: right;
padding: 3px;
}
#prozor2{
border: 1px dotted brown;
width: 400px;
margin: 20px 20px;
float: right;
}
div.clear { clear: both; }
#prozor3 {
border: 1px dotted brown;
width: 400px;
margin: 20px 20px;
float: right;
}
#prozor4 {
border: 1px dotted brown;
width: 400px;
margin: 20px 20px;
}
Bez width neki elementi css ne mogu da rade kako treba. div.clear je malo nakaradan ali radi, resetuje float tako da mozes da uradis sledecu liniju.
Ti sada dodaj ostale elemente, pokusaj da uradis menu u horizontali ako hoces.
Pokusaj kod pozicranja da radis sa float, margin ( sta radi auto), pre nego sto pocnes na relative i absolute position.