Css Defteri

gelismis-yuvarlak koseli kutular

Yuvarlak Köşeli Kutular

Basit yuvarlak köşeli kutular
Mustafa Enes
27 Haziran 2009 / 04:16
Bu ders ile web 2.0'ın nimetlerinden biri olan yuvarlak köşeli kutuların yapımını öğreneceğiz.
 

Konumuz, hem tüm tarayıcılarda sorunsuz çalışan hem basit kodlamalı hem de oldukça kullanışlı - yuvarlak köşeli kutular yaratmak. Bu örnekte ben 4 resim kullandım:

İsimlerinden anlayacağınız gibi bu resimler, kutumuzun köşelerinin yuvarlak görünmesini sağlayacak resimler. Bu resimlerden her biri 500px genişliğinde. Ben örnek olarak bu boyutta ayarladım. Kutumuz 400px genişliğinde ve boyutu 1000px'e kadar genişletildiğinde dahi herhangi bir bozulma meydana gelmiyor. Eğer siz kutunun genişliğinin 400px olarak kalmasını istiyorsanız, her bir resmin boyutunu 200px'e düşürebilirsiniz. Bunu yaparken dikkatli olun derim çünkü resimlerin köşelerine dokunmadan - düz olan taraftan resmi kısaltmanız gerekir.

Yapacağımız kutunun son ekran görüntüsü şöyle:

Evet, hazırsak anlatıma geçiyorum. Öncelikle hep yaptığımız gibi bir html dosyası oluşturuyoruz.

Şimdi kodlarımıza başlayabiliriz. İlk olarak kutunun temel kodları yazalım:

başlık metni vey boş bırakılabilir
kutunun içerik bölümü kutu kutu pense, elmamı yerse arkadaşım YeniMetinBelgesi arkasını dönseeeğ : )
footer metni veya boş bırakılabilir

Yukarıdaki kodda bir adet tüm içeriği kapsayan ve denge içerisinde tutma görevi olan kapsayıcı katmanımız var, bunu endiskutu olarak görebilirsiniz. Hemen bir satır altında ust_bolum kimliğine sahip bir katman görüyoruz. Bu katman bir diğer katman olan ust_bolum_ic'i içeriyor. Yani burada iç içe iki tane katmanımız söz konusu. Şu aşamada bu pek birşey ifade etmese de css'i eklerken neden iç içe iki katman mevcut olduğunu anlarsınız. Bu iki katmandan sonra yine iç içe geçmiş iki katman var. Bu katmanlar kutunun gövdesi yani içerik bölümünü oluşturuyor. Ve bunun altındaki alt_bolum ve alt_bolum_ic katmanları da başta bahsettiğim iç içe katmanlarla aynı mantıkta çalışıyor.

Css kodlarımıza geçebiliriz sanırım. Css kodlarını style tagleri arasına gireceğiz. Css girdikten sonra şu ana kadar pek bir şeye benzemeyen kutumuzun son halini görebilicez. Css kodlarımız şöyle:

#endiskutu {
	width: 400px;
	font-family: century gothic
}
#ust_bolum {
	height: 30px;
	background: url(ust-sol-yuvarlak.png) no-repeat left center;
}
#ust_bolum_ic {
	height: 30px;
	background: url(ust-sag-yuvarlak.png) no-repeat right center;	margin-left: 10px
}
#kutukutupense {
	overflow: auto;
	height: 240px;
	background: #d8d8d8
}
#penseic {
	margin: 5px
}
#alt_bolum {
	height: 30px;
	background: url(alt-sol-yuvarlak.png) no-repeat left center;
}
#alt_bolum_ic {
	height: 30px;
	background: url(alt-sag-yuvarlak.png) no-repeat right center;
	margin-left: 10px;
}

Yukarıdaki css kodlarını sayfamıza ekleyip kaydettikten sonra sonucu görebilirsiniz. Mantığını anlamanız için tüm div etiketlerine border: 1px solid #ff0080 özelliği girerek bir ekran görüntüsü aldım:

Resimde tüm katmanlarımızı daha net tanıyabiliriz sanırım. Header ve Footer bölümlerindeki iç içe geçmiş iki katmanı kavrayabilmek önemli. Temel mantık burada. Bu iki katmandan içeride olana margin-left: 10px verdik ki bu örnek için bu kod hayati örnek taşıyor. Bu kodla hem altında bulunan katmanın göstermeye çalıştığı sol yuvarlak köşenin üstünden çekilmesini söyledik hem de içerdeki metni 10px içeri kaydırıp düzene soktuk. İç içe geçmiş olan katmanlardan birine sağ yuvarlak köşeyi içeren resmi, diğerine sol köşeyi içeren resmi arkaplan olarak tanımladık. Bu örnekte sabit değeri ifade eden px formatı kullanıldı ama yüzdelik genişlik değerlerinde de kutunun genişliği 1000px i geçmediği sürece herhangi bir bozulma olması mümkün değil. Daha geniş bir kutu istiyorsanız, resimleri düz olan köşelerinden genişletip iki katı kutunuzun değerine eşit olacak şekle getirebilirsiniz. Daha açıklayıcı olursak: 500px genişliğinde bir kutu istiyorsanız her bir resmin 250px olması, 600px genişliğinde bir kutu istiyorsanız her bir resmin 300px olması işinizi görecektir.

Diğer çok önemli nokta ise iç içe olan katmanlardan birinin arkaplan resmi sola dayalıyken diğerinin arkaplan resmi mutlaka sağa dayalı olmalıdır. Bu sayede birisi sağ tarafı diğeri sol tarafı tutar. Ayrıca içerik bölümündeki iç içe geçmiş olan katmanların mantığı farklıdır. Orada içeri bir katman daha atmamızın sebebi, içerikteki düzeni daha rahat kontrol etmemize olanak sağlayacak bir katmana ihtiyacımız oluşudur. Örneğin padding değerini yani içerikteki metnin dışa olan mesafesini sağlıklı kullanmamızı sağladı. Bu kutu bir model olmakla beraber farklı yollarla bu sonuca ulaşılabilir. Daha da geliştirilerek, mesela overflow: auto eklenerek içeriğin yükseklik sınırını geçmesi durumunda kaydırma çubuğu çıkması sağlanabilir...

İlk dersimizin sonuna geldik xD Herkese kolaylıklar dilerim





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::14.10.2009, 15:01 (UTC)
webguardian
webguardian
Kapalı

çok teşekkürler

Yorumu gönderen::03.10.2009, 20:38 (UTC)
ownzstyle
ownzstyle
Kapalı

güzel teşekkürler peki şu syntax highlighter i nasıl uyguladın?

Yorumu gönderen::22.07.2009, 09:55 (UTC)
rapearth
rapearth
Kapalı

teşekkürler, işime yara

Yorumu gönderen::16.07.2009, 09:03 (UTC)
webuilder
webuilder
Kapalı

teşekkürler



Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Siten:
Mesajınız:

Copyright 2009 Yeni Metin Belgesi
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=