Css ile Web Tasarım Dersleri: float:left

float:left etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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.

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>