1 คอลัมน์ พร้อม Header และ Footer

โดยทั่วไปแล้ว เราจะเห็นเว็บในลักษณะ 3 ส่วนแบบนี้คือ มีส่วนหัว คือส่วนบนสุด ส่วนเนื้อหา และส่วนล่างสุดคือส่วนรายละเอียด เกี่ยวกับเว็บไซท์ ลิขสิทธิ์ เบอร์โทรติดต่อ ฯลฯ

ในเมื่อ เลิกใช้ TABLE แล้ว จะมา DIV ต้องทำไง ลุย…

โค้ด

CSS Code

body {
margin: 0 auto;
padding: 0;
background-color:#F5F5F5;
font-family: Tahoma, Verdana, sans-serif;
font-size: 0.8em;
color: #000000;
}
#header {
position: relative;
float: none;
width: 798px;
height: 100px;
margin: 0 auto;
padding: 1px;
background-color: #cccccc;
}

#contents {
width: 798px;
position: relative;
margin: 0 auto;
padding: 1px;
background-color: #FFFFFF;
}
#footer {
position: relative;
width: 798px;
height: 80px;
margin: 0 auto;
padding: 1px;
background-color: #FF9900;
color: #FFFFFF;}

XHTML Code

<div id="header">
<h1>หน้าเว็บแบบ 1 คอลัมน์ เลย์เอ้าท์ พร้อม HEADER และ FOOTER</h1>
</div>
<div id="contents">
<p>ใส่ข้อมูลเองนะครับ<p>
</div>
<div id="footer">
<h1>ส่วนของ Footer</h1>
</div>

สำหรับ ตัวอย่าง สามารถ Save จากหน้าเว็บ ไปดูได้เลยครับ