Blog / Arkib / Cara menghasilkan border pada elemen body

Cara menghasilkan border pada elemen body

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~ :D



6 respon untuk entri “Cara menghasilkan border pada elemen body”

  1. Affuan (#)

    susahnya aku nak drop komen. sakit mata aku memandang theme nih. hehe.


  2. Bat (#)

    @Affuan: Sakit mata kat bahagian mana tu?huhu..Cakap la, nanti boleh aku ubahkan.. hehe


  3. Azhar Ahmad (#)

    Huhuhuhuhu, aku plak, sejuk mata manda theme nih, laju juga kotak komen nih… hahhahaha… Dasar rebeller!

    Bat TQ pasal info CSS tuhhh… Hummm… adalah benda saya nak buat nanti…


  4. megat (#)

    Info bagus!

    Aku masih keliru dengan koding utk hack IE. Memandangkan statistik visitor ke blog aku kebanyakkan mengunakan IE, aku perlu hack supaya friendly dengan IE.


  5. azwanhadzree (#)

    berserabut kepala aku nak coding-coding ni, silap-silap nanti .. terletak coding abap pulak


  6. Wizurai (#)

    megat, kebanyakkan yg guna IE sebab diorang surf dari CC… CC ni pun satu hal, Firefox pun tak mau install..


Panduan untuk memberi komen

  • Sekiranya ingin bertanya soalan, sila spesifikkan soalan anda.
  • Jangan terasa hati sekiranya komen anda tidak terjawab. Ada kalanya penulis entri ini terpaksa mengutamakan komitmen masing-masing.
  • Perdebatan secara sihat dialu-alukan. Tapi sila gunakan bahasa yang sopan dan sedap dibaca.
  • Komen yang berbentuk spam akan dipadam serta merta tanpa notis 24 jam(hehe).
  • Dan, terima kasih kerana sudi memberikan komen. ^_^

Tinggalkan komen