Css ile Web Tasarım Dersleri: float:right

13 Nisan 2013 Cumartesi

Birbiri Sonraki Yüzer Elemanları

Bir elemana float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya

diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir.

1.kutu float:right özelliği ile sağ tarafa kaymıştır.

float:left tanımlaması yapılarak 1.kutu kapsayıcı kutunun en soluna dayanmıştır.

p {float:left; width:200px; margin:0;}

img {float:left; margin:0 4px 4px 0;}

Burada her iki elemana da float uygulanarak metinin resmi sarmasına son verilmiştir. Bu çoklu kolon oluşturma tekniğinin basit bir örneğidir. Float uygulanan her eleman satır boyunca yan yana dizilecektir.

Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise yüksekliği düşük olan kutudan sonra gelen kutu bunun altında devam edecektir.

10 Nisan 2013 Çarşamba

Yüzen kutu ve Konumlandırma Özellikleri

CSS ile web sitesi kodlamanın en önemli özelliklerinden iki tanesidir float ve clear.

Float bir elemanı Normal Akısın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış elemanlara float uygulandığında elemanlar eğer yeterli alan varsa yan yana dizilirler. Float Dinamik Göreceli Konumlandırma gibidir ve bu amaçla kullanılabilir.

Clear özelliği ile float uygulanmış elemandan sonraki elemanlara float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elemanın yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu eleman float uygulanmış elemanın altında konumlanacaktır.

Örnek:

Aşağıdaki kural class="icon" öznitelikli bütün <img> çerçevelerini sola yanaştıracaktır (ve sol kenar dış boşluğunu '0‘ yapacaktır):

IMG.icon

{

float: left;

margin-left: 0;

}

<!DOCTYPE html>

<html>

<head>

<style>

span { float: left; border: thin solid; margin: 2px }

body, p, img { border: thin solid; margin: 2.35em }

p { background-color: #eee; padding: 5px }

</style>

</head>

<body>

<p><span><img src=k_1.jpg alt="Bu resim bir yüzen çerçeveyi simgeler"></span>Resim çerçevesi sola yanaştırılır. Devamındaki

içerik yüzen çerçeveyle aynı satırdan başlayarak yüzen çerçevenin

sağında biçimlenir. Yüzen çerçevenin sağındaki satır çerçeveleri

yüzen çerçevenin varlığından dolayı daraltılır fakat yüzen

çerçeveden sonra normal genişliklerine dönerler.

</body>

</html>