CSS position problemi

Kodla Büyü

defall

Aktif Üye
Mesajlar
160
css kodum aşağıdaki gibi. HTML de ise conte divinin içinde k1 k2 k3 div leri yer alıyor.
#conte nin içine position:absolute yazmadığımda ekteki resimdeki gibi bir görüntü çıkıyor tarayıcıda, sebebini çözemedim, bir açıklaması olan var mı?
Kod:
#conte{
	margin:20px;
	width:350px;
	height:500px;
	background-color:#0F0;
	//position:absolute;
	}
	#k1{	
	margin:130px;
	width:70px;
	height:70px;
	background-color:#F00;
	}
	#k2{
	margin:10px;
	width:50px;
	height:50px;
	background-color:#FF0;
	}
	#k3{
	margin:10px;
	width:35px;
	height:35px;
	background-color:#F69;
	}
 

Ekli dosyalar

  • 2015-01-02 16-20-35 Ekran görüntüsü.png
    2015-01-02 16-20-35 Ekran görüntüsü.png
    3.2 KB · Görüntüleme: 1,519
İlginç bir problem sanırım bir kapsayamama problemi ile karşı karşıyasınız.
Yapacak bir şey yok, position:absolute; ifadesini kullanacaksınız.
 
Ben de işin içinden çıkamadım bir mantıksızlık var, conte ile k1 arasındaki üstten mesafe 120 olması gerekirken sadece soldan bırakıyor.
 
Sanırım deneme amaçlı cssler yazıyorsunuz.
En dıştaki divin padding-top una 130px derseniz k1i aşağıya itmiş olursunuz. Başka bir çözüm yöntemi...
Cssin yapısında bu tarz bişey var sanırım. iki margin üst üste bindiğinde bir tanesini değerlendiriyor gibi.
http://www.sitepoint.com/web-foundation ... g-margins/
şurada bununla ilgili bir açıklama var.
 
Hocam conte div'inin içerideki elemanların margin özelliğinden etkilenmemesi icin padding 1 px verin. Sorun çözülecektir
 
CSS te bu sorunu görünce karnım ağrıyor. Hep deneme-yamulma ile çözüyorum. :puhaha:
 
Aceylan28' Alıntı:
Sanırım deneme amaçlı cssler yazıyorsunuz.
En dıştaki divin padding-top una 130px derseniz k1i aşağıya itmiş olursunuz. Başka bir çözüm yöntemi...
Cssin yapısında bu tarz bişey var sanırım. iki margin üst üste bindiğinde bir tanesini değerlendiriyor gibi.
http://www.sitepoint.com/web-foundation ... g-margins/
şurada bununla ilgili bir açıklama var.


arkadaşın dediği doğru. margin collapsing denen olay gerçekleşiyor.
eğer conte divinde herhangi bir border veya içerik türünden bir şey yoksa conte'nin margin değeri gidiyor ve k1'in margin değeri geçerli oluyor. tabi bunlar margin-top veya margin-bottom için geçerli

neden k1'in margin değeri geçerli oluyor? çünkü k1'in margin değeri conte'ninkinden fazla da ondan. az olsaydı bu seferde konumlandırma conte divinin marginine göre gerçekleşirdi.

edit: css'in pis bir konusu
 
Çok teşekkür ederim arkadaşlar. Dediğiniz gibi denemeler yapıyorum CSS yi daha iyi anlayabilmek için, ilk denemelerimde böyle bir problem ile karşılaşınca margin padding bilgimi sorgulamaya başladım :) gerçekten pis bir konuymuş, saatlerce uğraştım. Ama bu sayede kavramlar tam oturuyor.
Sonuç olarak bu problemi:
  • en dış div e border ekleyerek,
    overflow:hidden kullanarak,
    padding değeri ekleyerek
aşabiliyoruz.
Sıra float lar da ve clear div inin kullanımında, bakalım bunda bir problem ile karşılaşacak mıyız.
Verdiğiniz bilgiler, linkler çok faydalı oldu, tekrar teşekkür ederim.
 
Evet hocam bu tarz siteler güzel. Libraryleri fln da kullanabiliyosun direkt. library bölümünden eklenebiliyor. Kaydedilebiliyor. Siteye kayıt olup önceki kayıtlara erişilebiliyor vs.
Bu tarz site çok. Ben jsfiddle ile liveweaveyi kullanıyorum genelde.
http://jsbin.com/?html,js,output
http://jsfiddle.net/
http://codepen.io/pen/
http://dabblet.com/
alternatif bikaç tanesi. iyi çalışmalar.
defall' Alıntı:
Aceylan28' Alıntı:
başka bir yöntem de conteinere overflow:hidden vermek.
http://liveweave.com/nJSkSs
:+1: bu site de harikaymış, bunun gibi uygulama yapabileceğimiz birkaç site daha görmüştüm sanki doğru mudur?
 
Geri
Üst