Page Layout แบบ 3 คอลัมน์ เต็มจอ

3 คอลัมน์ คือ เส้นคั่นด้านซ้ายและด้านขวาที่เป็นขอบ และพื้นที่ตรงกลางสำหรับใช้งานครับ
เหมือนเดิมครับ ถูกกำหนดโดย CSS ดูโค้ดทั้งหมดได้จาก [uel=ex/xhtml/pagelayout3.php]ตัวอย่าง

div#leftcol{
  width:12px; /* ความกว้างของกรอบ ซ้าย */
  background:url("../images/l.gif"); /* พื้นหลังของกรอบ */
  
  left:0;
  float:left;
  position:absolute;
  height:auto !important;
  height:100%;
  min-height:100%;
}
div#rightcol {
  width:12px; /* ความกว้างของกรอบ ขวา*/
  background:url("../images/r.gif"); /* พื้นหลังของกรอบ */
  
  right:0;
  float:right;
  position:absolute;
  height:auto !important;
  height:100%;
  min-height:100%;
}
div#content {
  width:95%; /* ความกว้าง การกำหนดขึ้นอยู่กับความกว้างของ กรอบ ซ้าย-ขวา ด้วย */
  background:url("../images/f_bkg.jpg"); /* พื้นหลังของส่วนแสดงผล */

  position:relative;
  float:none;
  margin:0 auto;
  height:auto !important;
  height:100%;
  min-height:100%;
}
ผู้เขียน goragod โพสต์เมื่อ 02 เม.ย. 2551 เปิดดู 8,416 ป้ายกำกับ XHTMLCSS
^