CSS Floating – Sabit Olmayan Nesneler | Zingocan | jQuery, CSS, Wordpress Dersleri

Merhaba arkadaşlar.. CSS Advanced kategorisinde CSS Floating adındaki WordPresste bir nevi Thumb olarak da adlandırılabilecek olan resimlerimizi yazılarımız ile bir kullanabileceğimiz ve bununla da sınırlı olmayan birkaç CSS float özelliğini göstereceğim.

CSS Float Nedir?

CSS Float özelliği ile birlikte, bir elemanı diğerlerinden bağımsız olarak sağ ya da solda gösterip, elemanın gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oaralarıda kullanabileceğimiz sayfalar yapabiliriz.

Elemanlar Nasıl Float Edilir?

Bir eleman yatay (horizontal) olarak kullanılır, eleman yalnız sağ ya da sol tarafta float edilebilir, aşağı ya da yukarı float kabul edilmez.Yukarıda da bahsettiğim gibi sayfanın içerisine bir resim gömmeyi planladığımız vakit resmin sağ ya da sol taraflarına tam olarak yazı sığdırılamamakta yalnızca resmin en alt bölgesinde bir satırlık yazı gösterilebilmekteydi. Float özelliği sayesinde yazıları resimlerin etrafını dolduracak şekilde gösterebiliriz.

Eğer bir eleman sağ tarafa float edilmişse, yazılar sol tarafta sağ tarafa float edilmişse yazılar sağ tarafta kalacaktır.Örnek olarak;


img
 {
 float:right;
 }

Yukarıda resmi sağ tarafta kullanıp ondan sonra gelecek yazılar ise sol tarafta kalacaktır.

Sonraki Elemanları Floatlamak

Eğer birden fazla float eleman kullanacaksanız art arda gelecek bütün resimleri floatlayabilirsiniz.

Örnek için;


.resimler
 {
 float:left;
 width:110px;
 height:90px;
 margin:5px;
 }

Floatı Kapatmak

Eğer daha önce bir float özelliği kullandıysanız ve bu float edilmiş öğeye etki eden ya da yakınlarında olan diğer elemanları floatın etkisinden kurtarmak isterseniz CSS clear özelliğini kullanabilirsiniz;


.yazilar
 {
 clear:both;
 }

Yukarıda verdiğim örneğin işleyebilmesi için bir üstteki örnekte bulunan CSS floatında CSS özellikleri içerisinde olması gerekir.. Yoksa birşey ifade etmeyecektir.. Daha geniş kapsamlı hem de daha önce öğrendiğimiz konuları işleyerek bir örnek kod oluşturacak olursak;

horizonral menu (float ile birlikte)


&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Mwnu 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;
Bu örnekte CSS Float özelliği ile birlikte henüz görmediğimiz hover efektini kullandık.
Yukarıda CSS float kullanılarak yatay menü yaptık..&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

Bu dersten sonraki yazılarımda bolca örnekleme yapmya çalışıp, daha önce gördüğümüz CSS özelliklerini birlikte kullanmayı öğreneceğiz.. Hepinizin ilgisi için çok teşekkür ederim.. Güneşli günler..

Zingocan | jQuery, CSS, Wordpress Dersleri

Bir Başkadır bu Wordpress Sitesi

CSS Floating – Sabit Olmayan Nesneler

CSS Float Nedir?

Elemanlar Nasıl Float Edilir?

Floatı Kapatmak

3 thoughts on “CSS Floating – Sabit Olmayan Nesneler”

Bir Cevap Yazın Cevabı iptal et