การทำ header และ footer ให้อยู่ลอยกับที่ (Div float on screen)

ทำให้ div ลอยอยู่ด้านบนและด้านล่าง โดยที่ไม่เลื่อนตาม Scroll Bar ครับ เหมาะสำหรับใครจะเอาไปประยุกต์ใช้เป็น Menu Bar

.pageheader
{
      width:100%;
      height:50px;
      background-image:url(images/topbar.png);
      position:fixed;
      top:0;
      z-index:99;
}


 .pagefooter
{
     width:100%;
     height:50px;
     background-color:#282828;
     position:fixed;
     bottom:0;

     z-index:99;
}

ตัวอย่างการใช้งาน

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <style>
       .pageheader
       {
          width:100%;
          height:50px;
          background-color:#282828;
          position:fixed;
          top:0;
          z-index:99;
       }
      .pagefooter
      {
          width:100%;
          height:50px;
          background-color:#282828;
          position:fixed;
          bottom:0;
       }
    </style>
</head>

<body>
  <div>
        <div class="pageheader"></div>
        <div style="width:300px;height:600px;margin-left:auto;margin-right:auto;background-color:#099;"></div>
        <div style="width:300px;height:600px;margin-left:auto;margin-right:auto;background-color:#9C0;"></div>
        <div class="pagefooter"></div>
   </div>
</body>
</html>

http://www.training.ami-solution.com/ami-knowledge/knowledge.php?cntid=81#.VX5PzOJr-Ls

การทำ header และ footer ให้อยู่ลอยกับที่ (Div float on screen)

😃 ซื้อผ่านเรา .. เราดูแลคุณ | เมูนูลัด

Cymiz.com Insurance Consult Broker