Sizede selamlar hocam..Sizin için basit bir uygulama yazmaya çalıştım.Birebir olmasa da mantık ve amaç olarak aynı birşey çıktı ortaya.Belki ben biraz fazladan kod yazıpta, kod hamallığı da yapmış olabilirim.Onu da saat'in geç olmasına verin siz ) Umarım işini görür ve mantığını anlarsın.



menü dosyası ( bkz : menu.html )

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<!-- Ana alan başladı -->
<div id="ana_alan">

	<div class="sol_alan">
		<div class="sol_alan_1"><p>Sol alan 1</p></div>
		<div class="sol_alan_2"><p>Sol alan 2</p></div>
	</div>	
	<div class="sag_alan">
		<div class="sag_alan_1">
			<ul>
				<li>Menü1</li>
				<li>Menü2</li>
				<li>Menü3</li>
				<li>Menü4</li>
				<li>Menü5</li>
				<li>Menü6</li>
				<li>Menü7</li>
				<li>Menü8</li>
				<li>Menü9</li>
				<li>Menü10</li>
			</ul>
		</div>
		<div class="sag_alan_2"><p>Sağ alan 2</p></div>
	</div>


</div>
<!-- Ana alan bitti -->
ve uygulunan html kodlarının düzenlendiği css dosyamız ( bkz : style.css )

/* Genel yapılandırmalar */
body
{
	font-size:16px;
	font-family:tahoma;
}

/* Ana alanımızı yapılandırıyoruz */
#ana_alan
{
	width:807px;
	height:75px;
	border:solid 2px; color:#DCDCDC;
}

/* Sol alanı yapılandırıyoruz */
.sol_alan
{
	width:400px;
	float:left;
	clear:left;
	border-right:solid 2px; color:#DCDCDC;
	height:75px;

}

	.sol_alan_1
	{
		width:120px;
		border-right:solid 2px; color:#DCDCDC;
		float:left;
		clear:left;
		height:75px;
	}
	
	.sol_alan_2
	{
		width:170px;
		float:right;
		clear:right;
		height:75px;
	}

/* Sağ alanı yapılandırıyoruz */
.sag_alan
{
	width:400px;
	height:75px;
	float:right;
	clear:right;

}

	.sag_alan_1
	{
		width:290px;
		border-right:solid 2px; color:#DCDCDC;
		float:left;
		clear:left;
		height:75px;
		padding:0px;
	}
	
	.sag_alan_1 li
	{
		display:inline;
		background-color:#F5F5F5;
	}
	
	.sag_alan_1 li:hover
	{
		background-color:black;
		color:white;
	}
	
	ul
	{
		padding:0px;
	}
	
	.sag_alan_2
	{
		width:100px;
		float:right;
		clear:right;
		height:75px;
	}

/* Yazı ve Paragraf (P) yapılandırması */
p
{
	color:black;
	font-family:trebuchet ms;
}