Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

css ile div sabitleme ve sayfa küçültme problem

yarım kalan bi sitem vardı, div leri güzelce sabitledim, sağ,sol yukarı ve aşağıdaki 4 adet kutucuk şeklindeki div'leri sabitledim, sayfayı küçülttüğümde yukarıdaki ve aşağıdaki divler kendi ekseninde çıkıyor,daha öncede sağ ve sol divde yaşamıştım bu problemi ,yardımlarınız sayesinde düzelttik , ama bu sefer yukarıdaki ve aşağıdaki div'ler,,yani sarı ve yeşil alandaki divler küçülttüğümde sol'a kayıyor, sayfayı büyüttüğümde ise sağ' tarafa kayıyor,, bunun önüne nasıl geçebilirim, defalarca denedim, ayarları fazlasıyla kurcalamama rağmen yinede yapamadım,
arkadaşlar biraz yeniyim beni mazur görün lütfen,

safyanın boş hali aşağıdaki gibi arkadaşlar,,

http://b1206.hizliresim.com/y/l/86484.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


</style>
<style type="text/css">
</style>
</head>
<style type="text/css">
body {
background-color: #099;
}


#yavarlakkenardiv {
width: 1000px;
background-color: #333;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
color: #FFF;
border:solid 1px;
border-top-color: #F0F;
border-right-color: #F00;
border-bottom-color: #309;
border-left-color: #0F9;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
padding: 5px;
height: 2000px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
clip: rect(0px,0px,0px,0px);
}



#soldiv {
height: 1200px;
width: 200px;
background-color: #03F;
1px solid #000;
border-radius:20px;
position: fixed;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-top: -1px;
}



#sagdiv {
height: 800px;
width: 200px;
background-color: #03F;
1px solid #000;
border-radius:20px;
position: fixed;
margin-top: -1px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 790px;
}

#footerdivtaban {
height: 100px;
width: 550px;
background-color: #FF3;
bottom:97px;
1px solid #000;
border-radius:20px;
overflow: hidden;
color: #000;
position:fixed;
left:355px;
padding-top: 0px;
}

#ortabannerdiv {
background-color: #0F3;
height: 100px;
1px solid #000;
border-radius:20px;
margin-left: auto;
width: 550px;
margin-right: auto;
position:fixed;
left:355px;
}


#icerikdiv {
background-color: #F00;
width: 550px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
1px solid #000;
border-radius:20px;
}


</style>
</body>
<div id="yavarlakkenardiv">




<center>ana orta div siyah durum ok </center>



<div id="soldiv"> sol div fixed durum ok</div>
<div id="sagdiv"> fixed durum ok</div>

<div id="ortabannerdiv"><center><p><h2>sabit kalmıyor yerinde</h2></p></center></div>

<div id="icerikdiv"><center>içerik div bağımsız auto </center>
<p>durum ok </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="footerdivtaban"><center><p><h2>sabit kalmıyor yerinde</h2></p></center></div>



</div>
<div style="clear:both;"></div>
</html>
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • maydanoz adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    13 cevap - 0 soru
    Kardeş ne yapmaya çalıştığını tam anlayamadım ne istediğini tam olarak yazarsan yardımcı olmaya çalışayım... Birde buraya yazdığın kodlara baktığımda html kodlarını ve css kodlarınıda yanlış yere yazmışsın... html kodlarını <body> ve </body> arasına css kodlarını iste <title></title> kodlarının hemen altından yazmaya başlamalısın...
    • sami- adlı üyenin fotoğrafı sami-
      cevap için teşekkürler..
      abi ben şöyle izah edeyim. evet aynı yerdeler ama ben şimdilik böyle yaptım böyle uyguluyorum, çok fazla tecrüben yok yani,,
      abi kodları bi kopyalayıp çalıştırırsan yukarıda ve aşağıda 2 tane dikdörtgen div görecen, sorun şu ;;

      sayfayı küçülttüğünde yukarıdaki ve aşağıdaki 2 tane dikdörtgen div sola kayıyor ve çok kötü bi görüntü oluyor, umarım anlatabilmişimdir..
      9 yıl önce yazılmış
    • maydanoz adlı üyenin fotoğrafı maydanoz
      Kardeş senin kodlarını düzenledim ben seninkilerle bi karşılaştır bak eğer anlamadığın bi yer olursa gene haberleşiriz... Kolay Gelsin..
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      	body { 
      background-color: #099; 
      } 
      
      
      #yavarlakkenardiv { 
      width: 1000px; 
      background-color: #333; 
      border-radius:25px; 
      box-shadow: 10px 10px 5px #888888; 
      color: #FFF; 
      border:solid 1px; 
      border-top-color: #F0F; 
      border-right-color: #F00; 
      border-bottom-color: #309; 
      border-left-color: #0F9; 
      margin-top: 10px; 
      margin-right: auto; 
      margin-bottom: 10px; 
      margin-left: auto; 
      padding: 5px; 
      height: 2000px; 
      left: 0px; 
      top: 0px; 
      right: 0px; 
      bottom: 0px; 
      clip: rect(0px,0px,0px,0px); 
      } 
      
      
      
      #soldiv { 
      height: 1200px; 
      width: 200px; 
      background-color: #03F; 
      1px solid #000; 
      border-radius:20px; 
      position: fixed; 
      margin-right: 10px; 
      margin-bottom: 10px; 
      margin-left: 10px; 
      margin-top: -1px; 
      } 
      
      
      
      #sagdiv { 
      height: 800px; 
      width: 200px; 
      background-color: #03F; 
      1px solid #000; 
      border-radius:20px; 
      position: fixed; 
      margin-top: -1px; 
      margin-right: 10px; 
      margin-bottom: 10px; 
      margin-left: 790px; 
      } 
      
      #footerdivtaban { 
      height: 100px; 
      width: 550px; 
      background-color: #FF3; 
      bottom:97px; 
      border:1px solid #000; 
      border-radius:20px; 
      overflow: hidden; 
      color: #000; 
      position:fixed; 
      
      padding-top: 0px; 
      } 
      
      #ortabannerdiv { 
      background-color: #0F3; 
      height: 100px; 
      border:1px solid #000; 
      border-radius:20px; 
      margin-left: auto; 
      width: 550px; 
      margin-right: auto; 
      position:fixed; 
      
      } 
      
      
      #icerikdiv { 
      background-color: #F00; 
      width: 550px; 
      margin-top: 5px; 
      margin-right: auto; 
      margin-bottom: 5px; 
      margin-left: auto; 
      1px solid #000; 
      border-radius:20px; 
      position: relative;
      } 
      </style>
      </head>
      <body>
      <div id="yavarlakkenardiv"> 
      <center>ana orta div siyah durum ok </center> 
      <div id="soldiv"> sol div fixed durum oky</div> 
      <div id="sagdiv"> fixed durum okkkkkkkkkkk</div> 
      <div id="icerikdiv"><center>içerik div bağımsız autos </center> 
      <div id="ortabannerdiv"><center><p><h2>sabitle yeşil</h2></p></center></div> 
      <p>durum ok </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <p> </p> 
      <div id="footerdivtaban"><center><p><h2>sabitle sarı</h2></p></center></div> 
      </div> 
      </div> 
      <div style="clear:both;"></div> 
      </body>
      
      9 yıl önce yazılmış 9 yıl önce güncellenmiş
    • sami- adlı üyenin fotoğrafı sami-
      ABİ OLAY TAMA GİBİ AMA YİNE OLMADI ,, NEDENİ ŞU ; BU SEFER ALTTAKİ SARI RENKLİ DİV, SAYFA KÜÇÜLDÜKÇE AŞAĞIYA , SAYFA BÜDÜKÇE YUKARIYA UZANIYOR,,
      9 yıl önce yazılmış
    • maydanoz adlı üyenin fotoğrafı maydanoz
      ozanan kardeş sarı div e bottom yerine top verip istediğin yüksekliği verdiğinde olacaktır bir dene... şu anda ben deneyemiyorum...
      9 yıl önce yazılmış
  • b4d3k35 adlı üyenin fotoğrafı
    9 yıl önce yazılmış
    10 cevap - 18 soru
    Yeşil olan yerin divine

    position:fixed;
    left:0;
    top:0;

    Yaparak denermisin.
    top:expression(eval(document.body.scrollTop)); yaparsan scrollbar indikce reklamında inmesi lazım.
    • sami- adlı üyenin fotoğrafı sami-
      sayın arkadaşlar, problem sabit kalması değil,,sabit kalmaya kalıyor artık ,,
      PROBLEM ŞU ; SAYFAYI KÜÇÜLTTÜKÇE DİVLER SOL TARAFA KAUIYOR,, SAYFA BÜDÜKÇEDE SAĞ TARAFA KAYIYORLAR,, İNŞALLAH ANLATABİLMİŞİMDİR,,
      9 yıl önce yazılmış