kako sve skupa razvući ovo preko cijelog ekranaovo je css:
/* CSS Document */
*{
margin:0px;
padding:0px
}
img{
border:0px
}
html{
width:100%;
height:100%;
background-color:#D5D5D5
}
body{
width:766px;
height:750px;
margin:auto;
}
#site{
width:616px;
height:750px;
padding:25px 75px 0 75px;
background-image:url(images/bg.gif);
background-position:top left;
background-repeat:no-repeat
}
.menu{
background-image:url(images/menubg.gif);
background-position:top left;
background-repeat:no-repeat;
width:616px;
height:53px;
margin:15px 0 28px 0
}
.menu ul{
float:left;
display:inline;
margin:9px 0 0 75px;
}
.menu li{
list-style-type:none;
float:left;
padding:0 11px 0 0;
background-image:url(images/line.gif);
background-position:top left;
background-repeat:repeat-x;
background-color:#D8D8D8
}
.menu img, .right img{
float:left
}
#site .style1{
padding:0px
}
#center{
background-image:url(images/main.gif);
background-position:top left;
background-repeat:no-repeat;
width:616px;
height:431px
}
.big{
float:left;
display:inline;
margin:9px 0 0 9px;
border-right:9px solid #F3F3F3
}
.right{
width:350px;
float:left;
padding:28px 0 0 34px;
font-family:Arial;
font-size:11px;
}
.text1{
color:#646464;
width:350px;
float:left;
padding:5px 0 12px 5px
}
.more{
font-family:Tahoma;
color:#646464;
font-weight:bold;
font-size:10px;
text-decoration:none;
display:block;
float:left;
display:inline;
width:100px;
padding:0 0 0 15px;
margin:0 0 15px 5px;
background-image:url(images/arrows.jpg);
background-position:0px 4px;
background-repeat:no-repeat
}
.dots{
background-image:url(images/dots.gif);
background-position:top left;
background-repeat:repeat-x;
float:left;
margin:0 0 0 5px
}
.dots2{
width:350px;
background-image:url(images/dots2.gif);
background-position:153px 0px;
background-repeat:repeat-y;
margin:20px 0 0 0;
float:left
}
.left{
width:136px;
height:185px;
float:left;
padding:0 38px 0 0;
}
.pic1{
float:left;
margin:10px 0 9px 2px
}
.pic2{
float:left;
margin:7px 0 9px 2px;
border-right:2px solid #B0AEAE
}
.left ul{
display:inline;
float:left;
margin:0 0 10px 5px
}
.left ul li{
background-image:url(images/ar.gif);
background-position:0px 5px;
background-repeat:no-repeat;
padding:0 0 0 16px;
list-style-type:none;
display:inline;
line-height:18px
}
.left ul li a{
color:#646464;
text-decoration:none
}
.second{
float:left;
width:176px;
font-family:Arial;
font-size:11px;
color:#646464;
}
.text2{
float:left;
width:97px;
padding:5px 0 15px 8px
}
.text2 a{
font-weight:bold;
color:#646464;
text-decoration:none;
font-size:10px;
font-family:Tahoma;
}
.text3{
float:left;
width:160px;
padding:15px 0 10px 5px
}
#footer{
background-color:#F3F3F3;
width:599px;
height:40px;
float:left;
display:inline;
margin:0 0 0 8px;
position:relative
}
#footer p{
float:left;
display:inline;
font-family:Arial;
font-size:10px;
color:#797979;
text-align:center;
margin:12px 0 0 16px
}
#footer p a{
color:#797979;
text-decoration:none
}
.sound{
position:absolute;
top:18px;
right:13px
}
ovo je html code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<a href="#"><img src="images/logo.gif" alt="" width="271" height="66" /></a>
<div class="menu">
<ul>
<li><a href="#"><img src="images/but1_a.gif" alt="" width="85" height="35" /></a></li>
<li><a href="#"><img src="images/but2.gif" alt="" width="83" height="35" /></a></li>
<li><a href="#"><img src="images/but3.gif" alt="" width="88" height="35" /></a></li>
<li><a href="#"><img src="images/but4.gif" alt="" width="74" height="35" /></a></li>
<li class="style1"><a href="#"><img src="images/but5.gif" alt="" width="90" height="35" /></a></li>
</ul>
</div>
<div id="center">
<div class="big"><img src="images/big.jpg" alt="" width="170" height="372" /></div>
<div class="right">
<img src="images/title1.gif" alt="" width="228" height="27" />
<p class="text1">
<strong>Lorem ipsum dolor.</strong> Sit amet, consectetuer adipiscing elit. Praese vestibulum molestie lacus. Aenean nonummy.<br />
Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penaibus magnis dis parturient montes, nascetur ridiculus mus.
</p>
<a href="#" class="more">more about us</a>
<div class="dots"><img src="images/spacer.gif" alt="" width="344" height="1" /></div>
<div class="dots2">
<div class="left">
<img src="images/title2.gif" alt="" width="136" height="19" />
<img src="images/pic1.jpg" alt="" width="122" height="58" class="pic1" />
<ul>
<li><a href="#"><strong>vestib</strong> ulum molesie</a></li>
<li><a href="#"><strong>hen drerit</strong> mauri as</a></li>
<li><a href="#"><strong>scusc</strong> ipit variu soq</a></li>
</ul>
<a href="#" class="more">more services</a>
</div>
<div class="second">
<img src="images/title3.gif" alt="" width="100" height="19" style="padding:0 50px 0 0 " />
<img src="images/pic2.gif" alt="" width="67" height="53" class="pic2" />
<p class="text2">
<strong>Mor nun.</strong> Duis er ultricie pharetra magec accum san <a href="#">read more</a>
</p>
<div class="dots"><img src="images/spacer.gif" alt="" width="160" height="1" /></div>
<p class="text3">
<strong>Sed laoreet.</strong> Aliquam leo. Ut tlus dolor, dapibus eget, elemenm vel, cursus eleifend, eliean auctor.
</p>
<a href="#" class="more">more services</a>
</div>
</div>
</div>
<div id="footer">
<p>
yourcompany.com © 2008<br />
<a href="#">privacy policy</a>
</p>
<img src="images/sound.gif" alt="" width="71" height="12" class="sound" />
</div>
</div>
</div>
</body>
</html>
Never
