Tips mengatur letak Element blog ( CSS Float,Clear ) `

Bagaimanakah Cara Mengatur Letak Element div , img , p dan lainnya pada Blog ,, ( CSS FLOAT , CLEAR PROPERTY )
Sebetulnya saya masih perlu belajar banyak mengenai CSS ini , Tpi rasanya sangat pusing Alias mumet dengan RATUSAN bahkan RIBUAN Property dan Value pada css ini .Oke!! Topik kita kali ini yaitu Cara menempatkan / mengatur letak suatu Element div , img , p di blog Anda menggunakan property clear dan float . oy,pada artikel sebelumnya mastony sudah membahas mengenai cara mengatur posisi Element ( CSS POSITION PROPERTY ) Silahkan Baca disini Dan untuk property Value selengkapnya silahkan anda lihat pada tabel di bawah ini :

PROPERTYVALUEKETERANGAN
floatleftElement akan menempel ke kiri element induk dan Element lainnya berada disebelah kanannya .
rightElement akan menempel ke kanan element induk dan Element lainnya berada disebelah kirinya
noneElement akan tidak menempel ke kiri ataupun ke kanan element akan menempel ke atas element induk element lainnya berada di bawahnya
inheritElement akan mengikuti aturan css sebelumnya
clearleftElement Akan Menempel ke kiri Element induk dan Element lain akan selalu berada dibawahnya
rightElement Akan Menempel ke kanan Element induk dan Element lain akan selalu berada dibawahnya
bothElement Akan Menempel ke Atas Element induk dan Element lain akan selalu berada dibawahnya
inheritElement akan mengikuti aturan css sebelumnya
klick button dibawah ini untuk melihat letak gambar mengikuti aturan CSS float , beserta kode penulisannya ,,

Source Code
#FloatLeft img{width:60px;height:60px;display:block;margin:5px;float:left;}

Float Property







KETERANGAN : code di atas hanya beberapa kode css saja , sedangkan untuk penerapan keseluruhan seperti code dibawah ini:

<style>#FLOAT {margin:5px;padding:0;width:500px;height:400px;border:1px solid black;}
#FLOAT  img{width:60px;height:60px;display:block;margin:5px;float:left;padding:0;}
</style>
<div id="FLOAT">
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
</div>

dan saya rasa cukup sekian Tutorial mengenai CSS float , untuk property CLEAR silahkan anda mencobanya sendiri .. dan semoga artikelnya bermanfaat ...




Terima kasih Anda telah membaca Artikel mengenai Tips mengatur letak Element blog ( CSS Float,Clear ) dan Kata kunci untuk Artikel ini yaitu Tips mengatur letak Element blog ( CSS Float,Clear )

7 komentar:

  1. bingung ane gan... nyari di blog ini tetep buat ane bingung,, mohon bantuannya dan segera meluncur ke blog saya gan,, di utnggu yach gan :D

    dengan bookmark akan membantu kalau ada balasan.. :D
    jadi di tunggu lho gan...

    BalasHapus
  2. maksum@ iy Q kn segera meluncur ke blog mas bro . . Okay , makasih bgt komenx . .

    BalasHapus
  3. bang ane masih bingung ngatur2 letak gadget :(
    tolong ya bantu blog ane yaa bang :)
    thanx

    BalasHapus
  4. wahyu @ gagget yang dimna SIDEBAR,DIBAWAH HEADER , DIBAWAH POSTING , kalau gadget biasa pake div

    BalasHapus
  5. terima kasih gan dah berbagi ilmunya, share trus ilmunya gan biar blog ini jadi sarana tempat belajar.

    BalasHapus
  6. SBOKU99
    Situs Bola Online Dan Bandar Bola Online
    Dengan Sistem Bonus Terbesar Dan Terpercaya.
    Bonus New Member 30%
    Bonus Depo Harian 10%
    Sponsor Resmi Piala Eropa 2020
    Proses Depo Dan Witdraw Cepat Dengan Sistem Perbankan ONLINE 24 Jam
    https://sboku99.com

    BalasHapus

Silahkan Anda Komentarkan Tentang Post ini yang baik dan sopan,
Jangan sampai komentar anda dianggap spam . . .