Merhaba sevgili okurlar;Sizlerle bugün?!? Yasemin’in penceresi gibi bir program sunmaya başlamadım değil mi. Baştan alalım:Herkese selamlar,Yazı dizilerimin devamına biraz da css katmak istedim. Css’in verdiği o rahatlığı öğrenince, insan hiç tasarımı kasmıyor. 1 saatte yaptığı iş 10 dakikaya iniyor bazen. Onun için css önemli bir konu.Bugün sizlere anlatacağım konular :* float ve clear’ın kullanımı
* overflow nedir?
* CSS 3’le beraber gelenler ve nerelerde işe yarayacağı
* CSS’i IE de kullanırken bize az da olsa kolaylık bir yöntem.
Bugünlük bu kadar konu yeter sanıyorum. Hemen girişimizi yapalım :Float ve Clear’ın Kullanımı :
Float : Bir elementin yaslanma şeklini belirler. left, right, inherit ve none seçeneklerini alabilir. Varsayılan değeri “none” dur. Float ile bir satır kaplayan divleri yan yana dizebiliriz, Listeleri yan yana dizebiliriz. Daha birçok yerde işimize yarıyor.
Clear : Floatla bağlı olan bu css özelliğimiz, float’ın yaptığı sola veya sağa kaydırma işlemini sonlandırır. 5 değeri vardır : left, right, both, inherit, none. Varsayılan değeri “none” dur.
Bunları açıkladığımıza göre örnek bir sayfa geliştirelim :
Bir listemiz olsun. Listeminizin içerisinde ise float verilmiş 2 adet div olsun. Bir div solda bir div sağda gözüksün. Listemizin her elemanında border olsun( kaymayı görebilmemiz için ).Örnek uygulamamızın kısa kodlarını yayınlıyorum. ( Arkadaşlar satır satır anlatmaya gerek görmüyorum, çünkü zaten her şey besbelli. )
-
Ürün Adı1500 $
-
Ürün Adı 210 €
-
Ürün Adı 210 €
Sonuç( Dikkat edin, ul elementimiz div’in içinde gözükmüyor. ) :
Css Örnek 1 – Float Sorunu
Şimdi altında bir clear olunca sonuca bakalım. ( Lütfen </div> den önceki satıra dikkat ediniz. )
-
Ürün Adı1500 $
-
Ürün Adı 210 €
-
Ürün Adı 210 €
Sonuç :
Css Örnek 1 – Float Sorununun Clearla sona erdirilmesi
Gördüğünüz gibi clear verdiğimizde floatlı öğeler kutunun içinde gibi gözükmeye başladı. Clearda 3 adet kullanılır değer var : left, right ve both.Left = “float:left;” leri temizler.
Right = “float:right;” ları temizler.
Both = İkisini de temizler
Floatta ise float:right; dediğinizde nesne sağa dayalı olacaktır. Bunu deneyiniz.Sıra geldi “overflow nedir?” sorumuza. Ben bu işlerde henüz yeniyken scrollbarın sadece IFrame kullanılarak koyulabileceğini düşünürdüm. Tabi o zaman ne javascript bilgim var, ne de css. Sonralarda öğrendim ki, bunun için overflow diye bir özellik varmış. Bunu öğrendiğimde öyle sevinmiştim ki 🙂 Gelelim overflow’un ne olduğuna :Css referansı olarak overflow’un W3 standartlarına göre 5 adet değeri vardır :# auto# hidden# inherit# scroll# visiblevarsayılan değeri auto’dur. Örneğin bir dive belirli bir widht ve height vermişseniz ve overflow auto ise sadece yazılar bu width veya height’i geçtiğinde scrollbar görünür olacaktır.Css 3 ile birlikte overflow-x ve overflow-y de eklenmiştir. Bu özellikler sayesinde artık sadece x eksenini ve y eksenini ayarlayabileceksiniz.Şimdi sizlere birkaç tane overflow örneği göstereyim( Lorem ipsum yazıları için teşekkürler www.lipsum.com ) :
Çıktısı :
Css Örnek 2 – Overflow
Overflow kullanarak uzun yazılarda çok büyük alan kazanabilirsiniz.CSS 3’le beraber gelenler ve nerelerde işe yarayacağı :
CSS3 ün bize tasarımsal anlamda bir çok kolaylık kattı. Fakat tarayıcı uyumluluğu çok az. Yine de kullanımdan zevk aldıran özellikler bunlar. Yanlız bir çok özellik barındırdığı için bunlardan sadece şimdilik işinize yarayacak bir kaç tanesini örneklendireceğim.Referans :http://www.css3.info/preview/1. border-radius :
Bu özellik sayesinde artık bir dolu tablo ya da div kullanmak zorunda değilsiniz. Kısaca özetlemek gerekirse tablonun kenarlarını istediğiniz kadar ovalleştirir :
Örnek :
Örnek Çıktısı :
Css Örnek 3 – Border Radius
Diğer özellikleri gösterdiğim referanstan rahatlıkla öğrenebilirsiniz. Boşuna ekstradan kaynak yazmaya gerek yok.CSS’i IE de kullanırken bize az da olsa kolaylık bir yöntem :
“_” karakterini style içerisinde css koduna uyguladığınızda sadece IE5 ve 6 da olmak üzere “_” ile yazdığınız kod çalışacaktır( Aynı zamanda W3 standartları buna izin vermektedir ). Örneğin :
Kodunun IE 5 ve 6 tarayıcıları dışındaki çıktısı :
Css Örnek 4 – IE Fix1
IE 5 ve 6 tarayacılarındaki çıktısı :
Css Örnek 4 – IE Fix2
Cssle ilgili bu yazımız burada sonlanıyor. Umarım herkese yararlı bir döküman olmuştur. Bir dahaki yazılarımızda görüşmek üzere…Hoşçakalın.
