CSS Kodlarına

Detaylı Bakış
 Diğer slaytlardaki css uygulamalarını
ASP.NET’te uygulayarak yapınız
Div etiketimizin genişliği 600px olup, sağdan ve soldan ortalayacaktır.
Width etiketinden farklı olarak, özellikle mobile cihazlar için site
oluştururken, küçük ekranlı cihazlar için kullanışlı bir özelliktir.

İE+ dahil, tüm tarayıcılar desteklemektedir. Rahatlıkla kullanılabilir.

 Bir önceki slaytta fancy ve smaller
divlerine bakarsanız, ikisinin de
widthlerinin 600px olmasına rağmen alttaki
divin genişliği daha fazladır. Neden?

 Çünkü padding ve border değerlerini de

hesaba katmamız gerekmektedir.
 Ben sadece divlerimin, olması gereken genişliklerini
vermek istiyorum. Padding ve border değerlerini
hesaplamadan bu işi çözemem mi diyorsanız, sizin için
güzel bir özellik, id özelliklerine önceki slaytta
gördüğünüz gibi

 Box-sizing özelliğine border-box değerini aktarmanız

gerekmektedir.

 Tüm tarayıcılarda da çalışabilmesi için –webkit- ve

-moz- önekleriyle de yazmanız gerekmektedir.

 Yalnız IE8+ (Internet Explorer için 8 ve sonrasında)

çalıştığını unutmayınız.
Sonuç
 İkisi de padding ve border özelliğklerine
rağmen aynı olacaktır.
 Statik varsayılan değerdir. Pozisyonu olan bir
eleman: statik olarak ayarlandıysa, herhangi bir
özel şekilde yerleştirilmemiş demektir.
 Relative özelliğine extra özellikler tanımlamadıysanız, aynen static özelliği
gibi davranmaktadır. Relative1 id’sinde gördüğümüz gibi.

 Relative2 id’sine baktığımızda top değerine -20 vermiş yani bulunduğu

noktadan 20px yukarıdan başla demektir. İkisinin de position özellikleri
relative olduğu için id’si relative1 olanın üzerine 20px kaydırmıştır. Soldan
da 20px değeri verdiği için içten başlamıştır.
 Tarayıcıda scroll özelliklerini kullansanız bile hep
aynı aynı noktada kalacağını belirtmektedir.
 Bunun için position özelliğine fixed değeri
aktarılmaktadır.
 Bottom 0, right 0 dediği için her zaman sağ alt
köşe de yer almaktadır.
Absolute
 Eğer divinize sadece position:absolute
komutunu verirseniz top ve left komutları
otomatik olarak 0 değeri alır ve bir üstteki div’i de
position:relative; olarak değerlendirir bu
yüzden bulunduğu div’in sol üst başlangıç
noktasına gider. Ama biz divimizi istediğimiz
yere koymak istiyoruz o yüzden left: ve top:
komutlarına değerler vermemiz gerekmektedir.
Sonuç
 Diviniz içerisine eklenmiş bir resim bulunmakta ve resminizin yüksekliği
divinizin yüksekliğinden geniş, bu durumda yukarıdaki gibi resim divin dışına
taşmış gibi görünmektedir.

 Bu duruma clearfix hack denilmektedir.

Çözüm için

 Eklemiş olduğunuz divinizin overflow özelliğine auto

değerini aktarmanız gerekmektedir.
Çözüm için
 IE6’nın da desteklemesi için zoom
özelliğine 1 değeri aktarılmalıdır.
Float Uygulaması

 Tüm divleri ayrıca kapsayıcı bir div içerisine

alınız.
 Yukarıdaki uygulama için toplamda 4 div
kullanmanız gerekmektedir.
Sonuç
Bu özellik sayesinde div içerisine yazılan metinler column-count:3
özelliği sayesinde 3 sütuna ayrılmış ve column-gap:1em; özelliği
sayesinde de sütunlar arasındaki boşluklar belirtilmiştir.

 Bu özelliği çok seveceğinizi düşünüyorum. Böylece iç içe divler oluşturmak

zorunda kalmayacaksınız 

 Fakat bu özellik IE9 ve opera Mini’de şimdilik çalışmamaktadır.

 Hazırlamış olduğunuz ödev sitenizde
yukarıda verilen css özelliklerini
uygulayarak, ödevlerinizi teslim ediniz.
Yararlanılan kaynaklar
 http://learnlayout.com