Float, Clear ve Display CSS Özelliği

Float, Clear ve Display Özelliği 

Float özelliğini şu örnekle açıklayabiliriz: Bir su birikintisi üzerindeki kâğıt parçasının rüzgarla sağa sola doğru kaydığını (floating) düşünün, işte bu kâğıt parçasının sağa sola kayması gibi biz de nesnelerimizi float özelliğini kullanarak; sağa (float:right) ve sola (float:left) kaydırma işlemine tabi tutabiliriz.

Div ile yapılmış üç adet kutu bulunmaktadır; div blok-level bir elemandır ve normal akışı aşağıda olduğu gibidir. 

Clear: 

Float özelliğinin etkisinden kurtulmak, yani kaydırma işine son vermek için kullanılır. Dört farklı değer alabilir. Bunlar; 

None: Değişiklik yapma. 

Right: Sağa kaydırma işine son ver 

Left : Sola kaydırma işine son ver. 

Both : Her iki yönde de kaydırma işine son ver

Normal olarak bir web sayfasındaki nesnelerin akışı, o elemanın seviye (level) türüne göre değişir. Seviye (level) türüne göre iki tip eleman vardır;

Blok-level elemanlar : Blok şeklinde işlenirler. Sayfadaki normal akışları yukarıdan aşağı şekilde alt alta sıralanırlar. Blok-level elemanlar inline elemanları ve diğer blok-level elemanları içerebilirler. Tipik özellikleri, yeni bir satır başlangıcı yapmalarıdır. 

Inline-level elemanlar: Inline-level elemanlar aynı satırda işlenirler. Sayfadaki akışları soldan sağa doğrudur, başka bir inline elemanı içerebilirler. Yeni satır veya boşluk oluşturmazlar. 

Örtüşen Ögeler (Overlapping Elements) 

 

Normal akış dışında konumlandırılan ögeler bazen üst üste gelebilir. Bu durumlarda hangi ögenin üstte hangisinin altta olacağını belirlemek için “z-index” özelliğini kullanacağız. 

 z-index değeri en yüksek olan öge en üstte yer alır, z-index değeri en küçük olan öge ise en altta yer alır. Pratik olarak aşağıdaki şekliyle kullanacağız. 

z-index:1; Ögenin üstte kalması için kullanır. 

z-index:-1; Ögenin üstte kalması için kullanır. 

Örnek-1

p { 

position:absolute; 

right:10px; 

top:5px; 

z-index:1;}

Örnek-2  Aşağıdaki örtüşen ögeler uygulamasını yapıp sonucu gözlemleyiniz.

Madde İmi Olarak Resim Belirleme 

 

“list-style-image” özelliği sayesinde, istediğimiz herhangi bir görseli(tercihen gif, png) boyutları uygun olmak şartıyla madde imi olarak kullanabiliriz.

Örnek-1
ul { 
list-style-image:url("maddeimi.png"); 

} 
Örnek-2
Aşağıdaki uygulamayı yapıp sonucu gözlemleyiniz. 

Uygulamada kullanılan örnek maddeimi.png görseli,

Menü Yapımı Kodlama Biçimi

Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.