Membuat floating elemen HTML dengan CSS - Desain responsive.
Oleh:
Pada:
Atribut CSS float (mengambang)
Membuat elemen mengambang (floating element)
Salah satu teknik membuat tampilan responsive adalah dengan membuat elemen mengambang. Contoh dibawah ini terdiri dari 3 elemen dalam satu kontainer yang disetting dengan CSS float:left
Dimensi halaman pada perangkat Anda adalah : ( ) Elemen "DEMO" akan berposisi berjajar kebawah pada ukuran layar maksimal 800px. Elemen "DEMO" akan berposisi sejajar pada ukuran layar minimal 800px keatas.
Elemen float berdampak pada tata-letak elemen dibawahnya, sehingga pada kontainer elemen ditambahkan clearfix untuk mencegah perubahan tata-letak tersebut. Lihat di CSS untuk pengaturan atribut clearfix.
Membuat desain responsif dengan elemen float
Dengan bermodalkan 3 elemen float diatas, bisa menghasilkan desain responsive. Perhatikan demo desain responsif dibawah ini.
Halaman web umumnya terdiri dari 3 bagian, yaitu Header, Body dan Footer, maka jika diatas terdapat 3 elemen dalam satu kontainer, maka untuk memenuhi 3 bagian halaman akan dicloning menjadi 3 kontainer.
Catatan : Kode HTML diatas masih sama dengan elemen demo pertama, hanya sedikit ditambahkan atribut untuk identitas (ID) dari masing-masing elemen. Tujuannya agar proses kustomisasi dengan CSS tidak mengganggu tata letak setiap elemen.
Ada yang salah dengan koneksi internet Anda. Silakan sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Pemblokir iklan terdeteksi!. Pendapatan yang kami peroleh dari iklan digunakan untuk mengelola situs web ini, harap memasukkan situs ini ke daftar putih (whitelist) di pengaturan pemblokir iklan Anda.
Site is Blocked
Sorry! This site is not available in your country.