Mengatur Height dan Width Suatu Elemen

Oleh Unknown

Thursday, October 22, 2015

Mengatur Height dan Width Suatu Elemen - Konco sinahu semua pasti sudah tahu bahwa properti height dan width digunakan untuk mengatur tinggi dan lebar suatu elemen pada halaman web. Height dan Width tersebut bisa diatur sebagai auto, atau bisa juga dengan nilai tertentu menggunakan ukuran pixel, cm, percent, dan sebagainya.

Sebagai catatan, bahwa properti height dan width ini hanya mengatur tinggi dan lebar bagian dalam elemen, tidak mencakup padding, border, dan margin.

sebagai contoh:


<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}
</style>
</head>
<body>

<div>
elemen div ini mempunyai height sebesar 100px dan width sebesar 500px. seperti ini jadinya.
</div>

</body>
</html>

maka hasilnya :

Mengontrol Width Suatu Elemen

Saat kita mengatur width atau lebar suatu elemen, hasil yang akan dilihat pastinya sesuai dengan ukuran yang kita tentukan. Sebagai ilustrasi, misal suatu elemen <div> kita atur lebarnya sebesar 500px, maka selebar itulah elemen <div> yang akan ditampilkan browser. Sehingga, ketika kita mengaksesnya melalui perangkat yang resolusinya lebih kecil dari 500px, maka akan muncul horizontal scrollbar yang bisa digeser ke kanan dan ke kiri untuk melihat tampilan secara keseluruhan.

Nah, bagaimana caranya agar tampilan lebarnya bisa menyesuaikan (responsive) saat diakses melalui perangkat yang resolusinya lebih kecil -misalnya melalui ponsel-, sehingga tidak akan muncul scroolbar? kita bisa mengontrolnya menggunakan properti max-width.

sebagai contoh konco sinahu bisa coba menggunakan script di atas, ganti bagian width menjadi max-width. Sehingga menjadi seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}
</style>
</head>
<body>

<div>
elemen div ini mempunyai height sebesar 100px dan width sebesar 500px. seperti ini jadinya.
</div>

</body>
</html>

script coding tersebut berarti bahwa elemen div akan tampil dengan lebar maksimal sebesar 500px. Sementara tampilan akan menyesuaikan saat dibuka melalui perangkat yang resolusinya lebih kecil dari 500px.

Untuk mengujinya, copas script tersebut ke notepad kemudian beri nama filenya dengan ekstensi (.html), misal nama filenya cobawidth.html, Save dan bukalah menggunakan browser. Kemudian minimize browser ke ukuran semau kamu. Maka lebar akan menyesuaikan. Ini juga bisa kamu terapkan untuk mengatur lebar elemen-elemen pada blog kamu agar tampilannya responsive.

Mengatur Height dan Width Suatu Elemen

Mengontrol Width Suatu Elemen

1 Komentar untuk "Mengatur Height dan Width Suatu Elemen"