Doğru Cevap
-
içerideki ikinci divin bittiği yere <div style="clear:both"></div> koyarak deneyin
-
sami-
fayda yok şef olmadı11 yıl önce yazılmış
-
Cevaplar
-
css'i bu şekilde ayarlayabildim..
#sagdiv {
height: 800px;
width: 200px;
overflow: hidden;
background-color: #9FC;
position: fixed;
right: 0px;
clip: rect(auto,auto,auto,auto);
margin-top: 10px;
margin-bottom: 10px;
margin-right: 40px;
padding-left: 10px;
float: right;
}-
reelmg
position:fixed divin bulunduğu yeri sabitler absolute olarak değiştirin böylece içinde bulunduğu dive göre hareket eder11 yıl önce yazılmış -
sami-
position;absolute diyorsan ,, yaptım ama bu sefer sabit kalmadığı gibi yine dışa kayma devam ediyor11 yıl önce yazılmış
-
reelmg
3 divinde cssini yazarsan düzenlerim11 yıl önce yazılmış
-
reelmg
başka birşeylerle uğraşıyordum elim değimişken bunuda aradan çıkarim dedim ben sadece yerleştirmelerini yaptım sen kalanını istediğin gibi düzenleyebilirsin
İyi çalışmalar
<style> body { margin: 0px; padding:0px; } #anadiv { height: 800px; width: 1200px; overflow: hidden; background-color: red; position: relative; margin: auto; padding:0px; } #soldiv { height: 800px; width: 200px; background-color: green; position: relative; left: 0px; margin:0px; padding: 0px; float: left; } #sagdiv { height: 800px; width: 200px; background-color: blue; position: relative; right: 0px; margin: 0px; padding: 0px; float: right; } </style> <div id="anadiv"> <div id="soldiv"> SOL DIV </div> <div id="sagdiv">SAG DIV</div> </div>11 yıl önce yazılmış -
sami-
css
<style type="text/css">
body {
background-color: #099;
}
#yavarlakkenardiv {
width: 1200px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
background-color: #333;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
color: #FFF;
padding-right: 10px;
padding-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #F0F;
border-right-color: #F00;
border-bottom-color: #309;
border-left-color: #0F9;
}
#yavarlakkenardiv #soldiv {
margin: 10px;
height: 800px;
width: 200px;
background-color: #03F;
float: left;
1px solid #000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
position: fixed;
}
#sagdiv {
height: 800px;
width: 200px;
overflow: hidden;
background-color: #9FC;
1px solid #000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
position: fixed;
right: 0px;
clip: rect(auto,auto,auto,auto);
margin-top: 10px;
margin-bottom: 10px;
margin-right: 40px;
padding-left: 10px;
float: right;
}
</style>
<div id="yavarlakkenardiv">ana orta div
<div id="sagdiv">sağ div yani sayfa küçüldüğünde sağ dışa kayan bozuk div yani</div>
<div id="soldiv"> sol div
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
üstad şu css üzerinde denesen daha iyi anlıycan beni,,aslında herşey normal, sadece sayfa küçüldüğünde sağ div giderek içine bulunduğu ana div ekseninden çıkıp sağ dışa kayması,, problem budur,,11 yıl önce yazılmış -
reelmg
anladığım kadari ile sol sag div sabit dursun ama ana div aşağı yukarı kaysın istiyorsunuz pozisyona fixed dediğininiz anda div in referans nokatası sol üst köşe oluyor float ilede değiştirilemiyor bu yüzden sağ div için margin left tanımlamak yeterli oluyor tarayıcılar arası yorum farkını engellemek içinde ilk satırda bulunan doctype ı kullanabilirsiniz
iyi çalışmalar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> body { background-color: #099; } #yavarlakkenardiv { width: 1200px; margin: 10px auto 10px auto; background-color: #333; border-radius:25px; box-shadow: 10px 10px 5px #888888; color: #FFF; padding-right: 10px; padding-left: 10px; border:solid 1px; border-top-color: #F0F; border-right-color: #F00; border-bottom-color: #309; border-left-color: #0F9; } #soldiv { height: 800px; width: 200px; background-color: #03F; 1px solid #000; border-radius:20px; position: fixed; margin: 10px 10px 10px 10px; } #sagdiv { height: 800px; width: 200px; background-color: #03F; margin: 10px 10px 10px 980px; 1px solid #000; border-radius:20px; position: fixed; } </style> <div id="yavarlakkenardiv">ana orta div <div id="soldiv"> sol div <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="sagdiv"><p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> sağ div yani sayfa küçüldüğünde sağ dışa kayan bozuk div yani</div> <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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div style="clear:both;"></div>11 yıl önce yazılmış -
sami-
bravo , tamamdır dediğin gibi oldu, , saol kardeşim tekrardan teşekkürler..11 yıl önce yazılmış
-