Monster Notebook
 
Şimdi Üye Ol | Şifremi Unuttum
Ana SayfaSanalkurs.netProgramlarSanalkurs.netÖnemli SitelerSanalkurs.netYazarlarSanalkurs.netDers EkleSanalkurs.netE-DergiSanalkurs.netBlog Sanalkurs.netİletişimSanalkurs.netForum
 
Anasayfa » CSS (77 ders)
 
CSS ile 3 Resimli Yuvarlak Köşeli Kutular

Yazar: Emir Savranoğulları  
Eklenme: 12.08.2008   Okunma: 2596    Puan: 3.2   Seviyesi:  Başlangıç
 
Merhaba,

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ıklayarak indirebilirsiniz.

Ş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...
 

 

CSS ile 3 Resimli Yuvarlak Köşeli Kutular Dersini Yazdirin YAZDIR

"CSS ile 3 Resimli Yuvarlak Köşeli Kutular" dersi için 4 yorum var

26.08.2008 streetw1se diyor ki:
çok güzel bir anlatım fakat kaynak dosyayıda nasıl hazırladığını anlatan bi kısım yapsaydın çok daha faydalı olurdu bence hazır şeyler beklemektense kendileri yaparlardı bence..

19.10.2008 cannurbey diyor ki:
teşekkürler çok güzel bir yazı, işime yarayacak bu

13.11.2008 KBNB diyor ki:
PSD dosyası silinmiş. Yenidne eklemeniz mümkün mü?

04.01.2009 yilmaz_ars diyor ki:
Öncelikle paylaşım için teşekkürler. Benim bir sıkıntım var. Bu oval köşeli kutuların sabit genişliği var. Ben kutuların duruma göre boyutlarının değişmesini istersem nasıl bir şey yapmam gerekir. O zaman Köşeler için ayrı orta kısımlar için ayrı resimler hazırlayıp (örneğin üst kısmı) 3 parçada mı hazırlamam gerekir. Yada daha kısa bir yolu varmıdır? Şimdiden tşkkrlr.

  BU DERSE YORUM EKLEYİN

Üye olmadan yorum ekleyemezsiniz !


UYARI: SANALKURS.net'te yer alan materyaller ile ilgili her türlü sorumluluk hazırlayan veya gönderene aittir. Yazarlar, gönderdikleri makale ve derslerle başkalarını yanıltıcı bilgi veremezler. SANALKURS.net bilgilerin kullanımı sonucunda doğacak hata ve zararlardan sorumlu tutulamaz. SANALKURS.net'te yer alan bir makale link vermek ve kaynak göstermek şartıyla başka bir sitede yayınlanabilir. SANALKURS.net kullanıcıları ve üyeleri, üçüncü kişilerin telif hakkı sahibi bulunduğu hiçbir yazı, fotoğraf, resim vb. materyal ve ürünü kullanamazlar. SANALKURS.net kullanıcı ve yazarlarının, üçüncü kişilerin telif hakkı sahibi olduğu yazı, resim vb. ürünleri izinsiz kullanması durumunda, her türlü hukuki ve cezai sorumluluk kendilerine aittir.
 İSTATİSTİKLER
XML Kaynağımızdan yararlanarak sitemizdeki derslerimizi masaüstünüzden yada web sitenizden takip edebilirsiniz
ÇEVRİMİÇİ 170 Ziyaretçi, 13 Üye
ramones1982, sanalusta, Keremel, s-R-c, Charisma_47, ertughaskan, deliler, hacoban, kerasus, mocaco3, siracel, BuRRaK, mhmt35
Bugün: 611, Dün: 10154, Bu Ay: 20978, Toplam Ziyaret: 7226790, Toplam Üye: 216260, Son Üye: nur_cihan
Yazılı Dersler: 2459, Video Dersler: 407, Toplam Yazar: 64, Toplam Dosya: 53, Toplam Link: 26
   
RSS Kaynağımızdan yararlanarak sitemizdeki derslerimizi masaüstünüzden yada web sitenizden takip edebilirsiniz