Dİv & CSS ile Site Tasarımında Birkaç Soru

divemaster · 21.02.2007

Merhabalar,

div ve CSS ile site tasarımına yeni başladım, bir kaç noktada takıldım.

İlk olarak aşağıdaki örnekteki gibi siyah alanın beyaz alana eklenen içeriğe göre eş zamanlı uzamasını istiyorum ancak div & CSS ile bunu bir türlü başaramadım. Bunu nasıl yapabiliriz?

Diğer bir sorun ise padding ve margin değerlerinin Firefox ve IE de farklı yorumlanması. Sitedeki içerikte bariz kaymalar oluyor. Oysa ki tablolu tasarımdan kurtulmayı tüm tarayıcılara uymaı için istiyordum ancak bu oldukça sorun oluyor.

Ve bir de menü alanı ve altına arama motoru alanı yapıyorum. Ancak IE ve FF daki görüntüleri aşağıda:

div Kodları

Kod:

<!-- Menü Alanı Başladı -->
	<div class="menubar">
		<ul>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
			<li>Başlık</li>
		</ul>	
	</div>
<!-- Menü Alanı Bitti -->


<!-- Arama Kutusu Başladı -->
	<div class="aramakutusu">
		<h1>ARAMA</h1>
		<form action="" method="post">
			<input name="a" type="text" size="15">
			<input type="submit" name="ara" value=">>" class="onaybutton">
		</form>
	</div>
<!-- Arama Kutusu Bitti -->

CSS Kodları

Kod:

/*Menü Alanı*/
.menubar {
	width: 114px;
	height: 175px;
	border:#000000;
	border-style: solid;
	border-width: 0px;
}
.menubar ul {	
	color:#FFFFFF;
	list-style-type: none;
	margin:0px;
	padding:0px;
}	
.menubar li {
	font-size: 9px;
	font-weight: bold;
	height:22px;
	background: #97BFD4;
	padding-left: 24px;
	padding-top: 3px;
}


/*Arama Kutusu Alanı*/
.aramakutusu {
	height:60px;
	background:#ec5f03;
	width: 114px;
	display: block;
}
.aramakutusu h1{
	font-size: 11px;
	color:#ffffff;
	font-weight: bold;
	padding:5px 0 0 15px;
	margin:0;
}
.aramakutusu form	{
	margin:0px 0px 0px 15px;
	padding:0px;
}
.aramakutusu input	{
	border:0px;
	font-size: 11px;
	padding: 3px;
}
.onaybutton{
	background: #192974;
	color:#ffffff;
}

Bu konularda ne yapmam gerekir?

metsatöll · 21.02.2007

1.sorun icin;
Bir kutucuk olusturup onun icerisine icerigini yazmak istedigin ikinci bir kutucuk olustur. Mantiken iceride bulunan kutucuk büyüdükce cercevesinide uzatacaktir. [asagidaki kodlarda bunu görebilirsin]

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<head>
<style>

body {background:#c0c0c0;}

#siyahAlan {
	background: #000;
	width:600px;
	text-align:right;
	}

#beyazAlan {
	background:#fff;
	width:500px;
	padding:10px;

	voice-family: "\"}\""; /* ie için */
	voice-family:inherit;
	width:480px;  }
	HTML>body #beyazAlan { width:480px; /* OPERA için */
	}



}
</style>

</head>

<body>
<div id="siyahAlan">
	<div id="beyazAlan">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 

	dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 

	book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 	

unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 	more 

recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>
</div>

</body>
</HTML>

2. soruna gelince padding degerlerini ie ve firefoxta ayni gösterebilmek icin #beyazAlan'a atanan kodlari incele

Margin degerleri tüm browserlarda esit görünür. Yanliz hem float hem margin kullandigin bir kutucuk icin CSS icerisinde ayrica display:inline kodunu kullanman gerekir, aksi takdirde ie gercek margin degerinin iki katini ekrana yansitir.