[divemaster]

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ı

<!-- 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ı

/*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?