กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

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

    September 15, 2018

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

    โค๊ด: [Select]

    .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;
    }

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

    โค๊ด: [Select]

    <!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


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized