Css ile yuvarlak köşeli kutular yapmanın yöntemleri birden fazla. Daha önce 4 tane resimle esnek kutular yapmayı anlatmıştım. Bu derste ise 3 resimle sabit genişlikli kutular yapmayı anlatacağım. Öncelikle 3 tane, bu şekillerde resimlere ihtiyacımız var:

Bunlar benim Photoshop’da 800px geniÅŸlik için hazırladığım resimlerin nasıl hazırlandığını görmek isterseniz PSD’yi buraya tıklayarakindirebilirsiniz.

Şimdi de örnek sayfamızın kodlarını verelim:

<!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=iso-8859-9" />
<title>3 Resimle Yuvarlak Köşeli Kutular</title>
<style type="text/css">

	body {
	background:#000000;
	}

	.ust {
	height: 10px;
	width: 800px;
	background: url(ust.gif) no-repeat;
	text-align:center;
	margin:auto;
	}

	.ic {
	width: 800px;
	background: url(orta.gif) repeat-y;
	text-align:center;
	margin:auto;
	}

	.alt {
	height: 10px;
	width: 800px;
	background: url(alt.gif) no-repeat;
	text-align:center;
	margin:auto;
	}

</style>
</head>
<body>

<div class="ust"></div>

<div class="ic">
İçerik buraya
</div>

<div class="alt"></div>

</body>
</html>

Sayfamla resimlerim aynı dizinde olduÄŸu için url’leri direkt resim adları olarak verdim. Kendinize göre düzenleyebilirsiniz. Sayfanızın içeriÄŸini “İçerik buraya” yazan kısma koyun. Ust ve alt divlerinin arasına hiçbirÅŸey koymayın çünkü sayfanın kaymasına yol açabilir. 

Hoşçakalın…