หน้าเว็บแบบ 1 คอลัมน์ เลย์เอ้าท์

กำหนดความกว้าง คืออย่างแรกที่ผมนึกถึง ในการคิดวางโครงสร้าง เลยย์เอ้าท์ ให้กับหน้าเว็บ  ในเรื่องแรกสุดนี้ จะเริ่มจากง่ายๆ ก่อนครับกับ 1 คอลัมน์ เลย์เอ้าท์ จัดตรงกลาง

ส่วนใหญ่แล้วความกว้างของหน้าเว็บนั้นจะขึ้นอยู่กับคนเขียนแหละครับว่า คิดว่ากลุ่มเป้าหมายของเว็บที่เรากำลังทำนั้นหน้าจออยู่ที่ขนาดเท่าไหร่ หรือแล้วแต่ความชอบใจ แต่ผมจะยกตัวอย่างกรณี ที่ความกว้าง 800px

ถ้าไอเดียเริ่มแรกของเราคิดออกมาได้ประมาณว่า หน้าเว็บกว้าง 800px พื้นหลังสีเทา พื้นที่ของข้อมูลสีขาว ตัวหนังสือสีน้ำเงิน มีเส้นขอบบางๆ ทั้งซ้ายและขวาข้างละสัก 1px กำลังพอเหมาะ เว้นระยะห่างระหว่าง เส้นขอบสัก 4px กำลังดี

css code

/*1 คอลัมน์เลย์เอ้าท์*/

/*1.กำหนดภาพรวมของหน้าเว็บให้กับ body ของ html*/

body {
margin: 0 auto;
padding: 0;
background-color:#cccccc;
font-family: Tahoma, Verdana, sans-serif; 
font-size: 0.8em; 
color: #003399;
}

/*2. สร้าง div tag ขึ้นมาเพื่อใส่ข้อมูลที่เราต้องการ */
#one_c {
width: 794px;
position: relative;
float: none;
margin: 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 0 4px;
background-color: #FFFFFF;
}

ตัวอย่าง หน้าเว็บแบบ 1 คอลัมน์ เลย์เอ้าท์