Css Defteri

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:

• ust-sol-yuvarlak.png
• ust-sag-yuvarlak.png
• alt-sol-yuvarlak.png
• alt-sag-yuvarlak.png

İ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