16 Maret 2010

Cara Menjaga Footer Agar Selalu Berada dibawah Halaman Web

Emm,,mungkin artikel ini bisa bantu temen2 kalo pengen  footer di halawan webnya selalu berada di bawah, berapa pun ukuran resolusi monitor. Oke,,awalnya saya juga berfikiran kalo ini sulit,tapi tenang,,ini gak sesulit yang di bayangkan ko..(banyak basa-basi deh,,). Ok kalo gitu langsung aja ke pembahasan,,,

Untuk melakukan hal seperti itu kita hanya bermain dengan teknik CSS,,emm,, tentunya sedikit banyak harus dah ngerti css donk,,tapi tenang ja kalo yang belum bisa css, banyak ko tutorial di inet yang nerangin tentang css,,(wah,,kayanya udah basa-basi lagi ni,,colongan.)
Emm,,,langsung aja ni,,tanpa basa-basi lagi..caranya yaitu : misalkan kita bikin  satu tampilan

Code HTML
<html>
<body>
<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>
</body>
</html>
Code CSS
(Code dibawah ini hanya sebagai tambahan untukm code yang telah anda bikin)
Html {
margin      : 0;
padding     : 0;
height      : 100%;
min-height  : 100%;
}

Body {
height      : auto;
max-height  : 100%;
overflow    : hidden;
}

#header {
/*atur sesuai dengan header yang diinginkan*/
}

#content{
bottom       : 23px; /*posisi bawah web*/
height       : auto;
overflow     : hidden;
position     : fixed; /*posisi: fixed,agar content berada dalam posisi yang fix(di tentukan)*/
top          : 91px; /*posisi atas web*/
}

#footer {
position     : absolute;
bottom       : 0px;
}
Yupz,,Cuma segitu doank ko tambahan kode cssnya,,gampangkan,,???hehe.
Semoga bisa membantu ya,,,^^,,kalo ada ilmu baru lagi putri bakalan sharing lagi.

Tidak ada komentar:

Posting Komentar