การจัดหน้าเว้บให้อยู่กึ่งกลางหน้า ตลอดเวลา เหมือนใน Blog ต่าง ๆ ทำได้ไม่ยาก
ความละเอียดของหน้าจอเพิ่มขึ้นเรื่อย ๆ ทุกปี จากข้อมูลของ W3C พบว่า ในเดือนมกราคม ปี 2553 คอมพิวเตอร์ส่วนใหญ่ (ร้อยละ 76 )มีความละเอียดหน้าจอ สูงกว่า 1024X768 มีเพียงร้อยละ 20 เท่านั้น ที่ใช้ความละเอียดหน้าจอที่ 1024X768 รายละเอียดดังภาพ
ข้อมูลข้างต้น สอดคล้องกับการรายงานสถิติประจำวันของ truhits พบว่า วันที่ 12 กันยายน 2553 คอมพิวเตอร์ ร้อยละ 36.71 ใช้ความละเอียดที่ 1024*768 ร้อยละ 16.03 ช้ความละเอียดที่ 1280*800 และ ร้อยละ 7.23
ใช้ความละเอียดที่ 1280*1024 สำหรับแนวโน้ม ความละเอียดหน้าจอ 800*600 ลดลงเกือบไม่มีเหลือ ดังภาพ
เนื่องจากหน้าจอปัจจุบันกว้างมาก เว็บเดิมที่จัดให้มีความกว้างของหน้าเว็บเป็น 100% หรือขยายเต็มหน้าจอที่มีอยู่ ทำให้ดูยาวเกินไป สำหรับเครื่องคอมพิวเตอร์ที่ตั้งค่าความละเอียดมาก ๆ
ในหน้าเว็บทุกเว็บจะมีขอบและ scroll bar แนวตั้ง (ถ้าเว็บมีความยากเกินหน้า) สำหรับความละเอียดหน้าจอที่ 800X600 จะมีความกว้างหน้าจอที่เป้นพื้นที่สำหรับเว็บ ประมาณ 740 pixels และ หน้าจอ 1024×768 จะมีความกว้างประมาณ 980 pixels
ดังนั้นจึงควรกำหนดหน้าจอให้มีความกว้างที่ตายตัว อย่างไรก้ตาม ถ้ากำหนดไว้กว้างเกินไป จะทำให้เกิด Scroll bar ในแนวนอน ซึ่งไม่ดี ความกว้างประมาณ 980 น่าจะกำลังดี เพราะความละเอียดหน้าจอที่ต่ำกว่า 1024X768 ในปัจจุบัน มีน้อยแล้ว
เมื่อกำหนดความกว้างที่ตายตัว จำเป็นต้องจัดกึ่งกลางให้หน้าเว็บเพจ อยู่กึ่งกลางเสมอ
การจัดหน้าเว็บให้อยู่กึ่งกลาง ด้วย CSS ทำได้โดย กำหนดส่วนที่ เป็น body และสร้าง div ใน body โดยกำหนดให้ margin-left และ margin-right เป็น auto จะได้ในส่วนนี้ จัดอยู่กึ่งกลางหน้าพอดี ดังนี้
<!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″>
<STYLE type=text/css>
<!–
body {
text-align: center;
width:100%;
background-color:#FFFFCC;
margin:0,0,0,0;
}
#wrapper {
text-align: left;
width: 980px;
height:100%;
margin-left: auto;
margin-right: auto;
background-color:#99CC00;
padding:20px;
}
–>
</STYLE>
</HEAD>
<BODY>
<div id=”wrapper”>
<H2>นี่เป็นการทดสอบ</H2>
</DIV>
</BODY>
</HTML>
ภาพที่ได้ จะเป็นดังนี้
จากภาพ จะเห็นว่า เว็บจะเต็มหน้าจอเสมอ แต่ส่วนที่เป้นเนื้อหาหลัก จะกว้าง 740 pixels และอยู่กึ่งกลางเสมอ
เราสามารถสร้างหัวเว็บให้เต็มหน้าตลอดเวลาได้ โดยนำภาพที่เป็นส่วนหัวไว้ในส่วนของ body และเนื้อหาหลัก อยู่ในส่วน wrapper เช่นตัวอย่างข้างล่าง
โพสต์โดย tjkh 
