div'in yüksekliği

Dhilgul · 25.12.2006

Arkadaşlar sizden bir ricam olacak. Bu kadar basit kodların neresinde nasıl bir hata var bir türlü bulamadım. FF2 kullanıyorum ve onunla bir derdim yok zaten.

IE6 ise beni çıldırtmak üzere. Her div'in yüksekliğini ayrı ayrı %25 olarak belirliyorum. Bu şekilde 4 tane div'im var ama bunların toplamı %100 edeceğine IE6 her div için 60px yükseklik veriyor.

Sebebini bulan beri gelsin.

http://www.clickevi.com/hammer/index.html

http://www.clickevi.com/hammer/style.css

Şimdiden teşekkürler..

cgencer · 26.12.2006

IE6yı bırak derim... şaka bir yana, ölçü sistemlerinde IE her zaman div'leri ve diğer ölçülü objeleri (border, margin, padding) yanlış değerlerle render ediyor. ama soruna çözüm bilemiyorum, araştırmak lazım...

fatihunal · 26.12.2006

Tarayıcılar "DOCTYPE" seçimine göre render yapabiliyor. (Özellikle IE)
Denemek isteyenler Transitional ve Strict yapıda hem xhtml hemde HTML olarak 4 sayfada deneme yaparlarsa sonucu görebilirler

Gönderdiğiniz sayfaya DOCTYPE eklediğimiz de Firefox taki görünümününde IE deki ile aynı hal aldığını göreceksiniz.

<!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=windows-1254" />
<title>bla bla bla</title>
<style media="all" type="text/CSS">
@import url("style.CSS");
</style>
</head>
<body>

<div id="yesil"><a onfocus="this.blur()" href="yesil/index.HTML">do-wear </a></div>
<div id="kirmizi"><a onfocus="this.blur()" href="kirmizi/index.HTML">Istanbul </a></div>
<div id="siyah"><a onfocus="this.blur()" href="siyah/index.HTML">street-style </a></div>
<div id="mavi"><a onfocus="this.blur()" href="mavi/index.HTML">metropole </a></div>

</body>
</HTML>

hozkara · 26.12.2006

İstediklerinizi doctype kullanmadan yamak istrseniz

Kod:

<HTML>
<head>
<title>HAMMER Tekstil</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=windows-1254">
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
<meta http-equiv="Content-type" content="text/HTML; charset=iso-8859-1">
<meta http-equiv="reply-to" content="www.hammertekstil.com">
<meta name="resource-type" content="document">
<meta name="description" content="HAMMER Tekstil">
<meta name="keywords" content="hammer, tekstil, hammer tekstil, hammer müzik, müzik, do-wear, Istanbul, street, style, street style">
<meta name="robots" content="index follow">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="copyright" content="admin@hammertekstil.com">
<meta name="author" content="admin@hammertekstil.com">
<meta name="language" content="tr, Türkçe">
<meta name="doc-type" content="web Page">
<meta name="doc-class" content="Completed">
<meta name="doc-rights" content="Copywritten Work">
<style type="text/CSS">	
@import "style.CSS"; 
</style>
</head>
<body>
<div id="menu">
  <div id="yesil"> <a onFocus="this.blur()" href="http://www.clickevi.com/hammer/yesil/index.HTML"> do-wear </a> </div>
  <div id="kirmizi"> <a onFocus="this.blur()" href="http://www.clickevi.com/hammer/kirmizi/index.HTML"> Istanbul </a> </div>
  <div id="siyah"> <a onFocus="this.blur()" href="http://www.clickevi.com/hammer/siyah/index.HTML"> street-style </a> </div>
  <div id="mavi"> <a onFocus="this.blur()" href="http://www.clickevi.com/hammer/mavi/index.HTML"> metropole </a> </div>
</div>
</body>
</HTML>

CSS Dosyası

Kod:

body {
	height: 100%;
	margin:0px;
	background: #fff;
}
#menu {
	height: 100%;
	width:			100%;
}
#yesil {
			height: 		25%;
}
#yesil a{
	display: 		block;
	width:			100%;
		height: 		100%;
	padding: 		0px;
	text-align: 		center;
	border: 		0px;
	font-weight:		bold;
	text-decoration:	none;
	background-color:	#99CC00;
	color: 			#FFF;
	font-family: 		Verdana, Arial, Sanf-Serif;
	font-size: 		50px;
}

#yesil a:hover {
	border:			0px;
	background: 		#99CC00;
	color: 			#99CC00;
}

#mavi {
	width: 			100%;
	margin: 		0px;
		height: 		25%;
	text-align: 		center;
	font-family: 		Verdana;
	font-size: 		40px;
}

#mavi a, a:link, a:visited {
	display: 		block;
	width:			100%;
	height: 		100%;
	padding: 		0px;
	border: 		0px;
	font-weight: 		bold;
	text-decoration:	none;
	background-color: 	#3300CC;
	font-family: 		Verdana, Arial, Sanf-Serif;
	font-size: 		50px;
}

#mavi a:hover {
	border: 		0px;
	background: 		#3300CC;
	color: 			#3300CC;
}

#kirmizi {
	width: 			100%;
			height: 		25%;
	margin: 		0px;
	text-align: 		center;
	font-family: 		Verdana;
	font-size: 		40px;
}

#kirmizi a, a:link, a:visited {
	display: 		block;
	width:			100%;
	height: 		100%;
	padding: 		0px;
	border: 		0px;
	font-weight: 		bold;
	text-decoration:	none;
	background-color: 	#CC0033;
	font-family: 		Verdana, Arial, Sanf-Serif;
	font-size: 		50px;
}

#kirmizi a:hover {
	border: 		0px;
	background: 		#CC0033;
	color: 			#CC0033;
}

#siyah {
	width: 			100%;
	height: 		25%;
	margin: 		0px;
	text-align: 		center;
	font-family: 		Verdana;
	font-size: 		40px;
}

#siyah a, a:link, a:visited {
	display: 		block;
	height: 		100%;
	width:			100%;
	padding: 		0px;
	border: 		0px;
	font-weight: 		bold;
	text-decoration:	none;
	background-color: 	#1F1F1F;
	font-family: 		Verdana, Arial, Sanf-Serif;
	font-size: 		50px;
}

#siyah a:hover {
	border: 		0px;
	background: 		#1F1F1F;
	color: 			#1F1F1F;
}

fatihunal · 26.12.2006

Transitional XHTML olarak Firefox 2 ve ie 6 da gayet düzgün çalışıyor. Scrit te denemedim.

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=windows-1254" />
<title>bla bla bla</title>
<style media="all" type="text/CSS">
@import url("style.CSS");
</style>
</head>
<body>

<div id="dis">
<div id="yesil"><a onfocus="this.blur()" href="yesil/index.HTML">do-wear </a></div>
<div id="kirmizi"><a onfocus="this.blur()" href="kirmizi/index.HTML">Istanbul </a></div>
<div id="siyah"><a onfocus="this.blur()" href="siyah/index.HTML">street-style </a></div>
<div id="mavi"><a onfocus="this.blur()" href="mavi/index.HTML">metropole </a></div>
</div>

</body>
</HTML>

Sitil Dosyası

HTML Code:

body
{
background-color:#fff;
position:relative;
margin:0;
padding:0;
}

HTML,body,#dis
{
height:100%;
width:100%;
}

#yesil
{
width:100%;
height:25%;
background-color:#9c0;
}

#yesil a,#yesil a:link,#yesil a:visited
{
display:block;
text-align:center;
text-decoration:none;
color:#fff;
background-color:#9c0;
font:700 50px verdana, arial, sanf-serif;
}

#mavi
{
width:100%;
height:25%;
background-color:#30c;
}

#mavi a,#mavi a:link,#mavi a:visited
{
display:block;
text-align:center;
text-decoration:none;
color:#fff;
background-color:#30c;
font:700 50px verdana, arial, sanf-serif;
}

#kirmizi
{
width:100%;
height:25%;
background-color:#c03;
}

#kirmizi a,#kirmizi a:link,#kirmizi a:visited
{
display:block;
text-align:center;
text-decoration:none;
color:#fff;
background-color:#c03;
font:700 50px verdana, arial, sanf-serif;
}

#siyah
{
width:100%;
height:25%;
background-color:#1f1f1f;
}

#siyah a,#siyah a:link,#siyah a:visited
{
display:block;
text-align:center;
text-decoration:none;
color:#fff;
background-color:#1f1f1f;
font:700 50px verdana, arial, sanf-serif;
}

Kodları incelerken, fazladan yazıldığını düşündüğüm şeyler için yazmış olduğunuz sitili bayağı sadeleştirdim

Dhilgul · 26.12.2006

sorun çözülmüştür. Herkese çok teşekkürler..

25.12.2006	#1 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	div'in yüksekliği Arkadaşlar sizden bir ricam olacak. Bu kadar basit kodların neresinde nasıl bir hata var bir türlü bulamadım. FF2 kullanıyorum ve onunla bir derdim yok zaten. IE6 ise beni çıldırtmak üzere. Her div'in yüksekliğini ayrı ayrı %25 olarak belirliyorum. Bu şekilde 4 tane div'im var ama bunların toplamı %100 edeceğine IE6 her div için 60px yükseklik veriyor. Sebebini bulan beri gelsin. http://www.clickevi.com/hammer/index.html http://www.clickevi.com/hammer/style.css Şimdiden teşekkürler.. __________________ \| Yazım Kuralları \| İmla Kuralları \| Türk Dil Kurumu \| Dahi anlamındaki "de" ayrı yazılır. \|

26.12.2006	#2 (permalink)
cgencer Üyelik Tarihi: 02.08.2001 Yer: istanbul Yaş: 38 Mesaj: 1,545	Re: div'in yüksekliği IE6yı bırak derim... şaka bir yana, ölçü sistemlerinde IE her zaman div'leri ve diğer ölçülü objeleri (border, margin, padding) yanlış değerlerle render ediyor. ama soruna çözüm bilemiyorum, araştırmak lazım... __________________ obsesif v2 + daha iyi net + uçuca + facebook + linkedin

26.12.2006	#3 (permalink)
fatihunal Üyelik Tarihi: 14.06.2004 Yer: Ege'nin en büyük köyü Yaş: 26 Mesaj: 577	Re: div'in yüksekliği Tarayıcılar "DOCTYPE" seçimine göre render yapabiliyor. (Özellikle IE) Denemek isteyenler Transitional ve Strict yapıda hem xhtml hemde HTML olarak 4 sayfada deneme yaparlarsa sonucu görebilirler Gönderdiğiniz sayfaya DOCTYPE eklediğimiz de Firefox taki görünümününde IE deki ile aynı hal aldığını göreceksiniz. <!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=windows-1254" /> <title>bla bla bla</title> <style media="all" type="text/CSS"> @import url("style.CSS"); </style> </head> <body> <div id="yesil"><a onfocus="this.blur()" href="yesil/index.HTML">do-wear </a></div> <div id="kirmizi"><a onfocus="this.blur()" href="kirmizi/index.HTML">Istanbul </a></div> <div id="siyah"><a onfocus="this.blur()" href="siyah/index.HTML">street-style </a></div> <div id="mavi"><a onfocus="this.blur()" href="mavi/index.HTML">metropole </a></div> </body> </HTML> __________________ Aza sormuşlar nereye gidiyorsun diye. Çoğun yanına demiş. :confused:

26.12.2006	#6 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	Re: div'in yüksekliği sorun çözülmüştür. Herkese çok teşekkürler.. __________________ \| Yazım Kuralları \| İmla Kuralları \| Türk Dil Kurumu \| Dahi anlamındaki "de" ayrı yazılır. \|

Sponsorlu Bağlantılar
Zoque.Forum Reklam