http://codepen.io/muhammedburak/pen/repPew
Başlıksız Belge
Css
body {
margin:0; /* sayfamızın kenarlarındaki boşluğu aldık*/
}
#cerceve {
width:980px;
margin:0 auto; /* yatay olarak ortaladık */
}
#ust {
height:120px;
background:Blue;
}
#menu {
height:39px;
background:Gray;
}
#logo {
width:130px;
height:100px;
background:Yellow;
margin-top:20px;
}
#sag {
float:left; /* katmanı sola yasladık */
width:200px;
height:600px;
background:Blue;
}
#sol {
float:left; /* katmanı sola yasladık */
width:200px;
height:600px;
background:Red;
}
#orta {
float:left;
width:580px;
height:600px;
background:Green;
}
.kutu {
width:180px;
height:180px;
background:Yellow;
margin:10px; /* kutunun çevresine 10px boşluk verdik */
}
#alt {
height:60px;
background:Purple;
}
/*Menü css kodu*/
#stylefour {
position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(img/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
}
#stylefour ul {
margin:0;
padding:0;
list-style-type:none;
width:auto;
}
#stylefour ul li {
display:block;
float:left;
margin:0;
}
#stylefour ul li a {
display:block;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(img/bgDIVIDER.gif) no-repeat top right;
}
#stylefour ul li a:hover,#stylefour ul li a.current {
color:#B30000;
background:#fff url(img/bgON.gif) no-repeat top right;
} 
