Bu tablonun aynısını nasıl css'de yapabilirim?

02-05-2009, 11:37:14

#1

Mike

Selam arkadaşlar,
Aşağıdaki tabloyu table kullanarak yapdım fakat css'de (ul/li/div/span/) bunu nasıl yapabilirim.

04-05-2009, 00:51:15

#2

Jotuxi

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;
}

04-05-2009, 05:04:28

#3

Tias

clear:left; ne işe yarıyor ?

04-05-2009, 08:59:15

#4

~~onlinerapmuzo~~

Üyeliği durduruldu

Tias adlı üyeden alıntı: mesajı görüntüle

clear:left; ne işe yarıyor ?

o verdiğinin alanının pozisyonu sola yanaşık olur

04-05-2009, 09:39:23

#5

Mike

saolun

oldu

04-05-2009, 10:39:42

#6

slacker

@Jotuxi sağol dostum benimde işime yaradı

04-05-2009, 11:51:39

#7

Jotuxi

Tias adlı üyeden alıntı: mesajı görüntüle

clear:left; ne işe yarıyor ?

Hocam float:left; ile sol'a dayalı bir yapılandırma yaptık ancak sonradan float'lardan kaynaklanan bir kayma olmaması için clear:left; komutu ile float'ımızı temizledik.

04-05-2009, 11:52:44

#8

Jotuxi

Mike adlı üyeden alıntı: mesajı görüntüle

saolun

oldu

@mike Rica ederim işine yaradıysa

slacker adlı üyeden alıntı: mesajı görüntüle

@Jotuxi sağol dostum benimde işime yaradı

@slacker ne demek hocam işinize yaradıysa ne mutlu