Css ile Web Tasarım Dersleri: float

11 Nisan 2013 Perşembe

Float Özelliği

float özelliği bir elemanın (img, table, div vd.) konumunu belirlemek (sağa veya sola ) için kullanılır. Bir elemana flaot:left değeri verirseniz diğer elemanlar o elemanın sağından akar. (Bu HTML deki resme (img) uygulanan align="left" ve align="right" ile özdeş bir özelliktir.)

Float özelliği CSS ile tablosuz web sitesi oluşturma metodunun en önemli öğelerinden biridir.

Yapısı: float: <değer>

Aldığı Değerler: left | right | none |inherit

<title>Untitled Document</title>

<style>

p img {float: right;margin: 25px;}

</style>

</head>

<body>

<p><img src="http://lal38.files.wordpress.com/2010/12/156566_114760725257307_112145062185540_81836_3320160_n.jpg?w=523"

width="250" height="165" alt="Mevlana" />Hz. Mevlana Celaleddin-i Rumi is the great Anatolian mystic, poet and the father of the Mevlevi Order. He is known as Hz. Mevlana in the East and as Rumi in the West. At birth, his family named him Muhammed, though he came to be nicknamed Celaleddin. As for “Mevlana”, it connotes to “our master”, while “Rumi” relates to “the land of Rum” or “Anatolia”, where he lived. In his lifetime, he was also referred to as “Hudavendigar”, meaning “distinguished leader”, whereas his present internationally renowned title “Mevlana” was very seldom used. The name “Rumi” was added to the end, rather later on..</p>

</body>

</html>

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>