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:
maka hasilnya :
<!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 :
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.
<!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.
1 Komentar untuk "Mengatur Height dan Width Suatu Elemen"
Akan saya coba soalnya tampilan blog saya tidak sesuai lebar perangkat yakni kalau di lihat oleh hp