Belajar CSS -4- tentang Float, Height, Overflow
Melanjutkan materi pembahasan CSS, kali ini bagian ke-4 tentang Float, Height, dan Overflow. Sebelumnya saya berharap kawan memahami sepuluh buah atribut CSS yang telah dijelaskan pada Belajar CSS -1- tentang Border, Margin, Padding (tiga atribut), Belajar CSS -2- tentang Background, Color, Width, Border-radius (empat atribut), dan Belajar CSS -3- tentang Font size, Text align, Text transform (tiga atribut).Fungsi dari masing-masing atribut CSS bagian ke-4 ini adalah
- Float: untuk menentukan di mana posisi suatu elemen (tulisan, gambar, script, kotak pemberitahuan, atau box informasi) relatif terhadap elemen lain
- Height: untuk menentukan tinggi elemen
- Overflow: untuk membuat scroll bar atau kotak gulir
Dibawah ini beberapa kode perintah sekaligus hasil yang ditampilkannya.
Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, dan TEXT TRANSFORM (sepuluh atribut)
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase;">Tulis disini</div>
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left;">Tulis disini</div>
Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, dan FLOAT-LEFT (sebelas atribut)
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: right;">Tulis disini</div>
Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, dan FLOAT-RIGHT (sebelas atribut)
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 180px;">Tulis disini</div>
Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, FLOAT, dan HEIGHT (duabelas atribut)
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 100px; overflow: auto;">Tulis disini</div>
Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, FLOAT, HEIGHT, dan OVER FLOW (tigabelas atribut)
Catatan:
- Atribut Overflow biasanya di barengi dengan atribut Height
- Kawan bisa mengganti angka-angka yang terdapat dalam kode CSS diatas, mengganti dengan warna yang lain, atau juga mengkombinasikannya
- Baca materi berikutnya Belajar CSS -5- tentang Kombinasi Atribut atau Property CSS
untuk atribut over flow, gimana caranya supaya gak nampil scrolbarnya, atau setidaknya merubah ukuran scrollbar tersebut sob?
BalasHapus