Bagi seorang web designer, tampilan merupakan hal nomor satu yang harus diperhatikan. Bukan hanya karena seorang web designer di bayar untuk itu semua, namun seorang web designer pun bertanggung jawab bagaimana mendatangkan visitor yang banyak karena ketertarikan visitor akan interface website yang begitu ringan, akses yang cepat, menarik enak dipandang, dinamis, dan harmonis. Harmonis… ya harmonis… memang terdengar seperti rumah tangga. Tapi sekali lagi, web designer lah yang memiliki tanggung jawab bagus tidaknya suatu tampilan, bukan yang lain.
Masih dalam poin pembahasan yang sama, disini penulis akan coba membawakan satu buat tutorial css memanfaatkan jquery, bagaimana menyamakan tinggi atau height dari beberapa div berbeda kolom. Sebenarnya apa sih maksud yang ingin disampaikan penulis? Baik-baik, penulis akan coba Ilustrasikan.
Misalkan anda membuat tampilan sebuah interface dengan 3 kolom seperti ini, dengan letak div yang berbeda, artinya div body itu berada diluar dari sidebar,.
apabila content itu diisi, maka terlihat seperti ini …
di sini terlihat div contentnya panjang, sedangkan sidebarnya tetap pendek, bagi beberapa desain hal ini tidak bermasalah, namun bagaimana jika seorang webdesigner ingin memanfaatkan border, desain ini terlihat aneh, karena sidebar terlihat terpotong, tidak sampai ke bawah.
begitu juga jika ketika contentnya itu berisi sedikit, misalnya hanya terdiri satu atau dua kalimat, sedangkan sidebarnya itu panjang ke bawah penuh dengan menu atau iklan, seperti ini …
hal ini terlihat jelek bukan, membuat desain menjadi aneh, apalagi jika sidebarnya itu menggunakan style float:left; benar-benar merusak desain. Desain yang rusak seperti ini pun akan anda temui jika anda meletakkan content didalam sidebar, sidebar yang panjang tidak mempengaruhi kepada content, seperti gambar di bawah ini …
content tidak memiliki tinggi yang sama dengan sidebar
sedangkan semua designer menginginkan kondisi sidebar dan content yang sama tingginya, meskipun div nya itu berbeda, artinya satu div tidak berada didalam div lainnya, dan hasilnya adalah div nya memiliki tinggi yang sama. Seperti pada gambar ini :
Bagaimana melakukan ini semua?? Sebenarnya hal ini bisa di manipulasi oleh JQuery, JQuery memungkinkan perubahan height/tinggi dari suatu div itu bisa dikontrol menggunakan script.
Misalkan struktur dari layoutnya seperti ini
…
<div id=”wrap”>
<div id=”sidebarkanan”></div>
<div id=”content”>div>
</div>
…
anda cukup menyisipkan jquery di bagian header
…
<head>
<script src=”jquery-1.4.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
if ($(‘#content’).height() >= $(‘#sidebarkanan’).height())? {
$(‘#sidebarkanan’).height($(‘#content’).height());
} else {
$(‘#content’).height($(‘#sidebarkanan’).height());
}
});
</script>
…
Contoh implementasi dari script di atas, bisa anda lihat disini. Script racikan penulis ini bisa anda kembangkan lagi, atau mungkin anda memiliki script yang lebih baik, silahkan gunakan.
Apa yang sebenarnya terjadi pada script tersebut? Ketika div content lebih tinggi dari sidebar, maka lakukan penyamaan tinggi, begitu juga ketika sidebar lebih tinggi dari content maka samakan tingginya. Cukup mudah bukan??
Silahkan download script di sini
Cara Membuat Website dengan Adobe DreamweaverIngin tau lebih jelas, lebih cerdas, tentang cara pembuatan website? Store Ilmuwebsite menyediakan CD Tutorial Interaktif dengan harga murah, mengantar Anda menjadi seorang web designer yang handal
Mahir PHP MySQL Membuat Aplikasi Dinamis Berbasis WebIngin tau lebih jelas, lebih cerdas, tentang cara pembuatan website dinamis atau aplikasi berbasis web? Kami punya solusi yang sangat sangat murah! Lebih ampuh dari hanya sekedar membaca buku, interaktif layaknya kursus PHP biasa
No related posts.
