Yana Yaslama (Float ve Clear)
Günümüzde modern web sayfalarında float özelliği bir çok yerde kullanılmaktadır. Örnek vermek gerekirse navbar yapımında genellikle listeler sola veya sağa yaslanmış durumda kullanılır. Resimli bir makalenin içinde paragraflar ve resimler ile ilgili olarak birçok yerde kullanılır. Float özelliğinin en çok left veya right hizalaması kullanılır.
Aldığı değerler;
Float: left | right | top | bottom | inside | outside | start | end | none
Clear: left | right | top | bottom | both | none
Yan yana yaslanan elementlerin içinden bazı elementleri clear özelliği ile hizalanmadan ayırmak mümkündür. Aşağıdaki örneği görmek için tıklayınız.
See the Pen float ve clear by Emre (@esencan) on CodePen.
Yukarıdaki örnek incelendiğinde <div> etiketi içerisinde resim <img> etiketleri ve paragraf <p> etiketleri bulunmakta. <div> etiketi için genişlik ve border özellikleri tanımlanmıştır. <div> etiketinin 3px boyutunda açık gri renginde bir çerçevesi oluşmuştur. Resim <img> etiketi için genişlik ve her yönden 10px’lik margin etiketi tanımlanarak resimlerin her yönden 10px boşluk verilmesi sağlanmış. Örnekte geçen resim <img> etiketlerine sırasıyla resim1, resim2, resim3 sınıf (class) isleri atanarak CSS özellikleri bu sınıflara tanımlanmıştır. Resim1 ve Resim3 sınıfına float özelliği eklenmiş, sol (left) değeri verilerek resim1 ve resim2’nin sola yaslanması sağlanmıştır. Sola yaslama özelliğinden sonra blok (block) element durumunda bulunan paragraflar resmin yanında sola yaslanmış şekilde konumlanmıştır. Resim2 sınıfına ait <img> etiketi sağa yaslanarak (float:right) paragrafın sağ tarafında yer alması sağlanmıştır. <hr> (ayırma çizgisi) etiketinden sonraki elementler resim3 sola yaslı vaziyette olmasına rağmen sonra gelen paragraf <p> etiketine clear:left özelliği tanımlanarak resim2’den koparılarak alt satırda gözükmesi sağlanmıştır.
Navmenu örneğini görmek için tıklayınız…
Saçıntılar (Overflow)
Elementlerin sınırlarına bağlı olarak sınır dışına çıkabilecek içerikleri bulunabilir, böyle bir durum görüntüyü kötü etkileyebilmektedir. Sınırların içinde içeriğin taşan kısımlarını gizlemek veya görülebilmesi için bir scroll eklenmesi mümkün olacaktır.
Aldığı değerler;
Overflow: visible (varsayılan) | hidden | scroll | auto |
See the Pen overflow saçıtınlar by Emre (@esencan) on CodePen.
Yukarıdaki örnekte <div> etiketlerine kırmızı renkte border eklenmiştir. Saçıntılar ilk örnekte kırmızı sınırın dışına çıktığı görülmektedir. İkinci <div> etiketinde “hidden” değeri ile saklanmıştır. Üçüncü örnekte ise overflow: auto; değeri ile sınırlarından taşan, gözükmeyen içerik için sağ tarafa scroll oluşmuş, taşan içerilere ulaşılabilmektedir.
Konu anlatım videosu
Sıfırdan Temel CSS Dersleri Oynatma Listesi #cssdersleri
https://www.youtube.com/watch?v=tj0tEhaE3cY&list=PLGgCXWTaAx64w_xjGFpc8MYvEujWtrMq_
Temel HTML Dersleri Oynatma Listesi #htmldersleri
https://www.youtube.com/watch?v=71zqwXY93Eg&list=PLGgCXWTaAx658ixB20FC-XmOtPwBXWZow
Son Yorumlar