css float sorunu

yunusm · 06.12.2006

2 kutuyu yan yana koymak için uğraş veriyorum Firefox da doğru çalışan kod ie 6 da sorun çıkarıyor çok kafa patlatmama rağmen sorun nerde bir türlü bulamadım

CSS fakiri arkadaşınıza yardımlarınız için şimdiden teşekkürler

site :

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<title>site</title>
<style type="text/CSS">
<!--
body {
	margin:0;
	background:url(../Images/bg_site.png);
	background-repeat: repeat-x;
}
#Container {
	margin:0 auto;
	width: 700px;
	height:600px;
	background-image:url(../Images/MasterSite.png);
	background-repeat:no-repeat;
	background-position:left top;
}
#top{
	width:700px;
	margin:0;
	padding:0;
}
#solkolon {
	width:200px;
	margin-left:250px;
	margin-top:40px;
	float: left;
	background-color:#333333;

} 
#sagkolon {
	width:235px;
	height: 237px;
	margin-top: 10px;
	margin-left: 15px;
	float:left;
	background-color:#ccc;

}
-->
</style></head>
<body>
<div id="Container">
  <div id="top">
    <div id="solkolon">&nbsp;</div>
    <div id="sagkolon"></div>
  </div>
</div>
</body>
</HTML>

cgencer · 06.12.2006

float:left arkasına bir de clear:none eklersen sanırım çözümlenecektir.
ama unutma ki IE marjinleri ve bordürleri toplam genişlikten negatif yönde alır. yani büyük ihtimalle bu CSS'i IE ve FF'de aynı gözükmesi için biraz ayarlaman gerekebilir.

Anticapital · 06.12.2006

<div id="solkolon"> </div>
<div id="sagkolon"></div>
<div style="clear: both;"></div>

bunu o kısma eklediğinde sorun duzeliyor mu ?

yunusm · 06.12.2006

zannedersem ie 6 ' nın kutu modellerinde render etmesi Firefox ile aynı. ie 5 de negatif yönde almıyormu?

yunusm · 06.12.2006

Alıntı:

Anticapital tarafından gönderilen mesaj:

<div id="solkolon"> </div>
<div id="sagkolon"></div>
<div style="clear: both;"></div>

bunu o kısma eklediğinde sorun duzeliyor mu ?

Düzelmedi sağol

metsatöll · 06.12.2006

Kutulari saga yaslayip solda bosluk birakmak istiyorsun, o halde float left yerine float right kullanman daha mantikli. Asagidaki kod hem ie 6, hem de firefoxta normal calisiyor.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<title>site</title>
<style type="text/CSS">
<!--
body {
  margin: 0;
  padding: 0;
  background: url(../Images/bg_site.png)  repeat-x;
}
#container {
  margin:0 auto;
  width: 700px;
  background: url(../Images/MasterSite.png) no-repeat left top;
}
#top{
  width:700px;
}

#solkolon {
  width:200px;
  float:right;
  background-color:#333333;
} 

#sagkolon {
  width:235px;
  height: 237px;
  float:right;
  background:#ccc;
  margin: 40px 0 0 15px;
}
-->
</style></head>

<body>
<div id="container">
  <div id="top">
    <div id="sagkolon">&nbsp;</div>
    <div id="solkolon">&nbsp;</div>
  </div>
<div style="clear: both;"></div>
</div>
</body>
</HTML>

yunusm · 06.12.2006

Ellerine sağlık istediğim sonucu elde etmişsin.

Peki benim izlediğim yolda yanlış yaptığım sola yaslamakmıydı? sonuçta 2 farklı yoldan yapılmış ve kısmen de olsa aynı sonuç elde edilmiş

ie 6 nın azizliğinemi uğradım?

Teşekkürler

metsatöll · 07.12.2006

Padding yardimiyla sola yaslayarakta ayni islem yapilabilirdi. Asagidaki kodun nasil calistigini kavrarsan, bu gibi durumlarda neyi nasil yapmak gerektigi konusunda az cok fikir sahibi olursun.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>deneme sayfam</title>
<meta http-equiv="content-type" content="text/HTML; charset=CHARSET" />
<meta http-equiv="content-style-type" content="text/CSS" />

<style type="text/CSS">
<!--
/* varsayilan tüm ayarlari sifirla */
body { margin: 0; padding: 0;}
img { margin: 0; padding: 0; border: 0; }

#container {
  width: 702px;
  margin: 10px auto;
  position: relative;
  }

		/* structure of =header */
		  #header {
		  width: 702px;
		  border: 1px solid #000;
		  padding: 0 0 0 250px;
		  /*padding veya border kullanimi halinde IE, Firefox ve Operada ayni görüntüyü yakalamak icin Tantek Celikin box modeli; */
		  voice-family: "\"}\"";  /* IE için */
		  voice-family:inherit;
		  width:450px;  
		  }
		  HTML>body #header { width:450px;  /* OPERA için */
		  }
			#header .sagkolon {
			  width: 200px;
			  margin: 40px 0 0 15px; 
			  background: #ccc;
			  float: left;
			  }
			#header .solkolon {
			  width:235px;
			  float: left;
			  background: #000;
			  }
-->
</style>
</head> 

<body>

<!-- =Header -->
<div id="container">
  <div id="header">
    <div class="solkolon">&nbsp;</div>
    <div class="sagkolon">&nbsp;</div>
  <div style="clear:both;" />
  </div>

</div>
<!-- // =Header -->

</body>
</HTML>

yunusm · 07.12.2006

sorun

ie nin sol margin ve float kullanımda margin-left değerini iki kere uygulaması

Çözüm

#solkolon {
width:200px;
margin-left:250px;
display:inline;
margin-top:40px;
float: left;
background-color:#333333;
}

display:inline; eklemek yeterli oldu

yardımları için www.fatihhayrioglu.com a teşekkürlerimi sunarım

06.12.2006	#2 (permalink)
cgencer Üyelik Tarihi: 02.08.2001 Yer: istanbul Yaş: 38 Mesaj: 1,539	Re: css float sorunu float:left arkasına bir de clear:none eklersen sanırım çözümlenecektir. ama unutma ki IE marjinleri ve bordürleri toplam genişlikten negatif yönde alır. yani büyük ihtimalle bu CSS'i IE ve FF'de aynı gözükmesi için biraz ayarlaman gerekebilir. __________________ obsesif v2 + daha iyi net + uçuca + facebook + linkedin

06.12.2006	#3 (permalink)
Anticapital Üyelik Tarihi: 15.04.2006 Yer: Ankara Yaş: 20 Mesaj: 74	Re: css float sorunu <div id="solkolon"> </div> <div id="sagkolon"></div> <div style="clear: both;"></div> bunu o kısma eklediğinde sorun duzeliyor mu ? __________________ www.karsidurus.net - Karşı Duruş!

06.12.2006	#4 (permalink)
yunusm Üyelik Tarihi: 10.11.2006 Yer: İstanbul Yaş: 23 Mesaj: 32	Re: css float sorunu zannedersem ie 6 ' nın kutu modellerinde render etmesi Firefox ile aynı. ie 5 de negatif yönde almıyormu?

06.12.2006	#7 (permalink)
yunusm Üyelik Tarihi: 10.11.2006 Yer: İstanbul Yaş: 23 Mesaj: 32	Re: css float sorunu Ellerine sağlık istediğim sonucu elde etmişsin. Peki benim izlediğim yolda yanlış yaptığım sola yaslamakmıydı? sonuçta 2 farklı yoldan yapılmış ve kısmen de olsa aynı sonuç elde edilmiş ie 6 nın azizliğinemi uğradım? Teşekkürler

07.12.2006	#9 (permalink)
yunusm Üyelik Tarihi: 10.11.2006 Yer: İstanbul Yaş: 23 Mesaj: 32	Re: css float sorunu sorun ie nin sol margin ve float kullanımda margin-left değerini iki kere uygulaması Çözüm #solkolon { width:200px; margin-left:250px; display:inline; margin-top:40px; float: left; background-color:#333333; } display:inline; eklemek yeterli oldu yardımları için www.fatihhayrioglu.com a teşekkürlerimi sunarım