Mohd Huzairy Mohd Rezuan

Entri ini hasil dari komen saudara AzharAhmad, terima kasih kerana memberi idea. Hehe..

Baik, jangan buang masa lagi, moh kita mula. Setelah mencuba sendiri tutorial di laman web asal, aku lihat ada beberapa perkara yang boleh dipertingkatkan lagi. Tapi kudos kepada penulis asal tutorial tersebut kerana telah memberikan idea kasar.

Kita tidak boleh meletakkan border terus pada body dengan kaedah biasa kerana, errr..Cuba sendiri la guna body{border:10px solid #ccc;}, baru nampak..Hehe..Bak orang cakap, “Seeing is Believing“.

Ini kod CSSnya, sila masukkan dalam fail style.css:

/*=Body border*/
html>body #top, #bottom, #left, #right
{
background:#ccc; /* Sila ubah kod warna sesedap rasa / Nak guna background image pun boleh.*/
position:fixed;
}
html>body #left, #right
{
top:0;
bottom:0;
width:10px; /*Sila ubah saiz border secukup rasa sekiranya mahu*/
}
html>body #left
{
left:0;
}
html>body #right
{
right:0;
}
html>body #top, #bottom
{
left:0;
right:0;
height:10px; /*Sila ubah saiz border secukup rasa sekiranya mahu*/
}
html>body #top
{
top:0;
}
html>body #bottom
{
bottom:0;
}
*html>body merupakan child-selector properties dalam CSS, jadi kita dah tak perlu nak gunakan IE hacks untuk hilangkan styling ini di IE. Dalam IE6 benda ni tak menjadi.

Manakala markup untuk html pula:
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
*Sila letakkan di bahagian footer.php, betul-betul sebelum elemen penutup </body>.

Selamat mencuba~