CSS layouting - float

-

CSS layouting - float

Float adalah properti pada CSS untuk Mengatur posisi sebuah elemen. Sebuah elemen dapat dipaksa untuk berada disebelah Kiri atau sebelah Kanan dari parent/pembungkus nya dengan menggunakan properti ini.

Value dari properti ini Ada 3 yaitu none,left, right secara default jika kalian tidak mengasih Nilai float itu none. Kita bisa ngasih Nilai left untuk Element nya ke Kiri Dan right untuk Element nya ke Kanan

Sebelum ke pembahasan Cara menggunakan properti float ini . Ada sesiatu yang harus kalian Tau yaitu

Normal flow Dan out-of flow,jadi kedua ini adalah prilaku dari element element ketika Kita kasih css .yang sudah Kita buat sampai saat ini adalah yang normal flow Kaya block element nya baris me bawah ,inline element nya baris pinggir nanti float ini masuk nya akan ke out of flow.

Untuk mengetahui Cara kerja float ini saya akan meminta kalian untuk membuat sebuah 3 div kosong di html ,Lalu kasih style dengan lebar 200px Dan tinggi 200px Lalu masing masing div kasih background color dengan berbeda beda warna .

Setelah itu pasti div tersebut akan menjadi kotak warna yang berjejer ke bawah saya minta di div urutan ke Dua kasih properti float :left;
Contoh:
#div2 {
width:200px;
height:200px;
background-color:red;
float:left;
}

Maka kotak div yang dibawah kotak yang kalian kasih float left itu akan berada dibawah nya ,kenapa karena si kotak yang kalian kasih float ini sudah keluar dari flow normal nya Dan menjadi out of flow ,untuk melihat nya coba kalian ganti value float: left; menjadi float: right; maka dia akan berada di sebelah Kanan body .

Lalu apa yang bisa dilakukan oleh properti float ini

1.text wrapping
Membuat text mengelilingi gambar atau element lain

2.image gallery
Membuat serangkaian gambar menjadi gallery

3.multi column layout
Membuat halaman memiliki beberapa kolom

Dan masih banyak lagi yang bisa dilakukan float.

Jika Ada bug atau sesuatu yang tidak kalian inginkan terjadi saat membuat float ,maka cobalah belajar teknik clear untuk menghentikan atau membersihkan float.




Komentar

Posting Komentar

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

-
Gambar
ethical hacking part 14 membuat malware Trojan Di tutorial Kali ini Kita akan belajar membuat virus Trojan , apa itu Trojan ,Trojan ini adalah sebuah malicious software (malware) Yang merupakan file exe Yang berbahaya Yang dimana didalam file exe tersebut Kita memasukan payloads Yang Kita gunakan untuk memperoleh akses pada target mesin Untuk menggunakan Trojan ini Kita harus memasukan sendiri Trojan kedalam target mesin ,caranya bisa saja Kita gunakan USB,kirim melalui email apapun caranya Yang penting Trojan ini bisa masuk kedalam target  mesin Dan user dari target mesin nya harus menjalankan Trojan tersebut ,Cara nya bisa saja Kita masukan Trojan nya kedalam sebuah program Dan ketika user mendownload,menginstall Dan menjalan program tersebut Trojan nya akan memberi Kita akses ataupun Kita sisipkan kedalam sebuah gambar (image) Dan ketika usernya membuka gambarnya maka Kita Akan memperoleh akses ,membutuhkan skill sosial engineering tinggi untuk melakukan exploit i...
Baca selengkapnya

CSS layouting - box model: CSS reset

-
Gambar
CSS layouting -  box model: CSS reset Ketika kalian membuat sebuah box itu terkadang terdapat ruang kosong di sisi Kiri element nya ,padahal Kita belum tidak atau belum menambahkan style padding/margin . Supaya Kita dapat kendali penuh untuk styling element nya itu Kita gunakan yang namanya CSS reset. Metode CSS reset sederhana * { padding:0; margin:0; } Atau jika ingin lebih komplek bisa search di browser CSS reset nanti akan banyak CSS reset yang sudah dibuat oleh orang lain Dan Kita tinggal copy Dan paste .
Baca selengkapnya

ethical hacking part 3 reconnaissance & information gethering

-
Gambar
  ethical hacking part 3 reconnaissance &    information gethering Saya sudah sampaikan tentang reconnaissance Dan information gethering ini sebelum nya Dan sekarang Kita akan mempraktekan nya Ada 2 Cara untuk melakukan information gethering ini Yang ke satu active information gethering Dan Yang kedua passive information gethering Active information gethering ini adalah Kita mengumpulkan informasi dengan Cara berinteraksi langsung dengan si target. Passive information gethering ini adalah Kita mengumpulkan informasi tentang si target dengan melalui pihak ketiga atau melalui middle source  misal nya Kita browser di internet dengan Google untuk mencari informasi tentang si target. Apapun Cara nya tujuan nya Sama yaitu mencari informasi tentang target Tools tools Yang bisa Kita pakai untuk melakukan information gethering ini ada banyak yaitu ping,whois,nslookup,whatweb,theHarvester, Hunter.io Dan Sherlock. Kita akan mulai dengan melakukan active...
Baca selengkapnya