Page Layout แบบ footer ติดอยู่ข้างล่างตลอด

ส่วนสำคัญคือการกำหนด CSS ครับ สามารถดูโค้ดทั้งหมดได้ที่ ตัวอย่าง เลยครับ

<style type="text/css">
html,body {
  margin:0;
  padding:0;
  
  height:100%; /* needed for container min-height */

  background-color:white;
  font-size:8pt;
  font-family:Tahoma, "MS Sans Serif";
  color:black;
}

div#container { /* พื้นที่ทั้งหมดของ browser */
  position:relative; /* needed for footer positioning*/
  margin:0 auto; /* center, not in IE5 */
  width:100%;
  background:white;
  background:url("../images/f_bkg.jpg"); /* พื้นหลังของเว็บไซต์ */

  height:auto !important; /* real browsers */
  height:100%; /* IE6: treaded as min-height*/

  min-height:100%; /* real browsers */
}

div#header { /* ส่วนหัวสำหรับใส่ logo */
  background:url("../images/logo_bkg.gif"); /* พื้นหลังของ logo */
}

div#footer { /* ส่วนด้านล่าง */
  position:absolute;
  width:100%;
  bottom:0; /* stick to bottom */
  text-align:center;
  background:url("../images/bottom.gif"); /* พื้นหลังของ footer */
}

div#content { /* ส่วนเนื้อหาของเว็บ */
  padding:10px;
}
</style>
ผู้เขียน goragod โพสต์เมื่อ 02 เม.ย. 2551 เปิดดู 11,741 ป้ายกำกับ XHTMLCSS
^