วันเสาร์ที่ 30 กรกฎาคม พ.ศ. 2554

การจัดหน้าเว็บให้อยู่กึ่งกลางเสมอ ด้วย div ของ css

การจัดหน้าเว็บให้อยู่กึ่งกลางเสมอ ด้วย div จะทำให้หน้าเว็บของเราอยู่กึงกลางเสมอ ไม่ว่าความละเอียดของหน้าจอจะเป็นเท่าไรก็ตาม ตัวอย่างดังภาพข้างล่างนี้


ถ้าใช้ Dreamweaver ก็สบาย เพราะมีตัวช่วยเยอะ แต่ถ้าจะทำเอง ก็ไม่ยากเย็นอะไร

เราจะทำไฟล์ CSS จำนวน 1 ไฟล์ และทำไฟล์ html ที่เรียกใช้การจัดหน้า

วิธีการสร้างไฟล์ CSS
  1. เปิดโปรแกรม Notepad ที่มีอยู่แล้วในคอมพิวเตอร์ทุกเครื่อง หรือ Text editor ที่ท่านถนัด ผมชอบ EditPlus
  2. คัดลอก โค้ดต่อไปนี้ไปวาง
    body {
    text-align: center;
    width:100%;
    background-color:#FFFFCC;
    margin:0,0,0,0;
    }
    #wrapper {
    text-align: left;
    width: 640px;
    height:480px;
    margin-left: auto;
    margin-right: auto;
    background-color:#99CC00;
    padding:20px;
    }
  3. บันทึกเป็นไฟล์ ชื่อว่า myCenter.css
ต่อไปเราจะสร้างไฟล์ hml เพื่อเรียกใช้งาน css ที่สร้างขึ้น วิธีสร้าง html
  1. เปิดโปรแกรม Notepad หรือ Text editor
  2. คัดลอกโค้ดต่อไปนี้ไปวาง
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> ทดสอบการจัดกึ่งกลาง </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=tis-620">
    <link rel="stylesheet" type="text/css" href="myCenter.css" />
    </HEAD>
    <BODY>
    <div id="wrapper">
    <H2>นี่เป็นการทดสอบ </H2>
    </DIV>
    </BODY>
    </HTML>
  3. บันทึกไฟล์นี้ ใช้ชื่อว่า myCenter.html หรือชื่อทีชอบ แต่ขอให้เป็นนามสกุล html ก็แล้วกัน
  4. เปิดไฟล์นี้ โดยใช้ Browser ของท่าน
  5. หน้าตาที่ออกมา จะเป็นดังนี้



ลองปรับใช้ดูนะครับ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น