headerphoto

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
  1. Float: untuk menentukan di mana posisi suatu elemen (tulisan, gambar, script, kotak pemberitahuan, atau box informasi) relatif terhadap elemen lain
  2. Height: untuk menentukan tinggi elemen
  3. 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:

Next→
←Prev

Terkait

Share: FB-share Twitter-share

Join dan Dapatkan Info Terbaru via Email

1 komentar

  1. untuk atribut over flow, gimana caranya supaya gak nampil scrolbarnya, atau setidaknya merubah ukuran scrollbar tersebut sob?

    BalasHapus