Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Css clear

Merhaba arkadaşlar css'in clear:left,clear:right ve en kafamı karıştıran clear:both özelliklerini nerelerde ve nasıl kullanacağımı açıklarsanız çok sevineceğim.Birde Kaynak Kod tarafında
Örneğin bu tagı "<div class="temizle"></div>" nasıl yerleştireceğimi hakkında bilgi verebilirmisiniz...
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • UmutYerebakmaz adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    11 cevap - 0 soru
    Bir XHTML elemanını, sola veya sağa konumlandırmak için kullanılır. Eğer eleman sola konumlandırılırsa elemandan sonra gelen içerik elemanın sağında akacak, eğer eleman sağa konumlandırılırsa elemandan sonra gelen içerik elemanın solundan akacaktır. İki durum da da içerik elemanın etrafını saracaktır.

    Float özelliği atanmış elemana özel bir konum tanımlaması yapıldığında sayfanın normal akışından çıkartılır. Float uygulanmış elemandan sonra gelen elemanlar bu elemanı sayfada yok sayarak sayfaya konumlandırılırlar fakat içerikleri bu elemana göre yerleştirilir.Blok seviyesindeki elemana bir genişlik değeri atanmalıdır.

    Float uygulanmış elemanın üstündeki eleman kapsayıcı bir eleman değilse bu durumda bu elemanda float uygulanmış elemana göre sayfaya yerleştirilir.

    Bu özellik tüm elemanlara uygulanır.

    Clear komutu ise bir elemana float uygulanmışsa bu elemandan sonra gelen elemanların üzerindeki float etkisini kaldırmak için kullanılır.

    <div class=""temizle"></div>
    .temizle
    {
    clear:both;
    }

    Yukarıdaki gibi bir div ve ona bağlı css class yapısı oluşturulur. kod yazarken hızlıca pratik bir şekilde clear özelliği bu şekilde kullanılır. Hızlı kod yazmanın bir yöntemidir.

Cevaplar

  • Raporsuz_Deli adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    8 cevap - 4 soru
    Float Özelliği
    float özelligi bir elemanı(img, table, div vd.) konumunu belirlemek(saga veya sola ) için kullanılır. Siz bir elemana flaot:left degeri verirseniz diger elemanlar o elemanın sagından akar. Bu HTML3,2 deki resme(img) uygulanan align="left" ve align="right" ile özdes bir özelliktir. Ancak CSS 1 tüm elemanlara float özelligi vermeyi desteklemiyordu. HTML 3,2 sadece img ve table için bu özelligi kullanmamıza izin veriyordu. float özelligi CSS ile tablosuz web sitesi olusturma metodunun en önemli ögelerinden biridir.

    ------------------------------------------------------------------------------------------------------------
    Clear Özelliği
    Resim ve metin elemanları diger elemanlara göre floting eleman olarak tanımlanır. clear özelligi floating uygulanmayan elemana köse tanımı yapar. left degeri uygulandıgı elemanı floating elemanın bir alt soluna atar, right özelligi benzer sekilde saga atar, none özelligi elemanın baslangıç degerini geri döndürür ve both degeride iki floating elemanın asagısına atar. clear özelligi CSS ile tablosuz web sitesi olusturma metodunun en önemli ögelerinden biridir.

    Kullanım Şekli :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Clear</title>
    <style type="text/css">
    #sol {
    width: 100px;
    float: left;
    background: #A2E7D7;
    padding: 1px;
    margin:0;
    }
    #temizle {
    clear: left;
    border: 1px solid #000;
    }
    </style>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu
    nisi at sapien semper tincidunt. Maecenas vel leo. Phasellus
    condimentum, felis eget rutrum aliquam, augue dolor commodo enim, eu
    vestibulum lacus tellus vitae ante. Praesent accumsan elit ac elit. </p>
    <p id="sol">Cras sagittis sagittis elit. Duis odio metus, aliquam et,
    feugiat vel, interdum eu, nisl. Vestibulum ut velit. Nulla placerat. Vivamus
    eleifend placerat neque. </p>
    <p>Nam risus massa, interdum ut, vulputate mattis, sagittis non, dolor.
    Vivamus pretium justo quis nunc. Nullam molestie, nisi quis aliquet
    vulputate, elit metus porta libero, vel laoreet ante massa suscipit justo.
    Nullam hendrerit scelerisque tellus. </p>
    <p id="temizle"><code>clear: left</code> uygulanan eleman.</p>
    <p>Nulla porta, est sed imperdiet consectetuer, dui urna laoreet nibh, a
    varius sapien nisi vel nisl. Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Morbi eu libero ut lectus tempor lacinia. Nulla facilisi.</p>
    </body>
    
    </html>
    ------------------------------------------------------------------------------------------------------------
    Fatih Hayrioğlunun Kitabından Alıntıdır YUkardaki Bilgiler Kendi Yorumumu Yapayım..
    biz bunları divlerde uyguladımızdan genelde en son </div> tagından önce işte classa class, id ise id şeklinde mesela <div class="temizle"></div> şeklinde en son kapanan div tagından önce yazarız.. o yüzden Fatih Beyin Acıklamaları zaten acıklayıcı olacağına inanıyorum.. iyi çalışmalar
  • ontedi adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    39 cevap - 2 soru
    İki tane yan yana div düşün.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
    <meta name="author" content="Serkan TOGAL - www.ontedi.com" />

    <title>
    CSS Örneği
    </title>
    </head>
    <body>
    <div style="width:200px; border: 1px solid red">
    <div style="width:20px; border: 1px solid blue; height: 30px; float: left;">

    </div>
    <div style="width:59px; border: 1px solid green; height: 50px; float: left;">

    </div>
    <div style="clear: both;"></div>
    merhaba
    </div>
    </body>
    </html>

    Bu örneği kendi bilgisayarında yapmaya çalış. Merhaba yazısını clear both un üstüne aldığında nedenini anlayacaksındır.
    • ontedi adlı üyenin fotoğrafı ontedi
      Unuttuğum bir kısa not: İki tane sola dayalı divden sonra gelen herhangi bir (element, yazı..) vs için alta geçmesini sağlar.
      10 yıl önce yazılmış