merhaba
kendim css den filan anlamam. bulduğum örneği deneme yanılma yöntemi ile istediğim şekle getirdim
olayım üst menü ve alt menüsü sabit olan bir ortada içerik olan tema idi. sağ sol boşlukları olan.
bu kodları 2 amaçla paylaşıyorum
a) ihtiyacı olana hazır kod
b) hatalarımın düzeltilmesi daha az kod ile daha kolay/seri nasıl çalışır ?
misal hatayı yazayım....
içerik arttıkça içerik kısmında kaydırma çubuğu çıkıyor. burda sorun yok. eğer ekran değerleri FHD vs olduğunda footer dipde sorunsuz kalıyor iken içerik kısmı için belirttiğim yükseklik ekran yüksekliğinden az olduğu için ister istemez footer ile içerik kısmı arasında boşluk oluşuyor..
burası için daha daha uzun yaptığımda ekranı çok geniş ama yüksek olmayan 768 gibi ekranlarda çok veri olmayan sayfalarda kaydırma çubuğu çıkıyor.
misal o kısmı ayarlayamadım. çünkü bilmiyorum.
html kodu
<!DOCTYPE html>
<html>
<head>
<title>Üst Sabit Menü2</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="tosun2.css">
</head>
<body>
<div id="anagovde">
<div id="menu">
<div class="sol"> sol </div>
<div class="orta"> orta </div>
<div class="sag"> sag </div>
</div>
<div id="icerik">
<div class="post">
ali
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
</div>
</div>
<div id="footer">Sabit Dip</div>
</div>
</body>
</html>css olarak
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0;
background:#FFECB3
}
#anagovde {
border: 0px solid;
max-width: 1000px;
//padding-left: 50px;
//padding-right: 50px;
margin: auto;
display: block;
overflow-x: hidden;
background-color: #FFFFCC;
}
#menu { //sabit üst menü
top: 0px;
position: fixed;
background-color: #F7ECA4;
width: 1000px;
z-index: 1;
text-align: center;
display: block;
height:50px;
}
.sol {
float: left;
width: 200px;
text-align: center;
background-color: #D5CFA7;
height:50px;
}
.orta {
float: left;
width: 600px;
text-align: center;
background-color: #FFCCCC;
height:50px;
}
.sag {
float: left;
width: 200px;
text-align: center;
background-color: #CCCCFF;
height:50px;
}
#icerik {
width: 100%;
overflow-x: hidden;
//clear: both;
//border: 1px solid;
margin-top: 50px;
background-color: #E5FFCC;
height:700px;
}
.post {
margin-bottom: 20px;
width: 100%;
//border: 1px solid;
margin-top: 20px;
text-align: center;
background-color: #CCE5FF;
}
#footer{
bottom: 0px;
position: fixed;
background-color: #FFCCE5;
width: 1000px;
z-index: 1;
text-align: center;
display: block;
}
not : orjinal linki yazmayı unutmuşum. herzaman herkese lazım olabilir
http://jsfiddle.net/yrbvw473/2/