2 คอลัมน์เลย์เอ้าท์ พร้อม header และ footer

ก่อนหน้านี้เราได้รู้แล้วว่าการทำหน้าเว็บแบบ 1 คอลัมน์เลย์เอ้าท์ พร้อม หัวและท้ายนั้นทำยังไง คราวนี้ลองมาแยกคอลัมน์ สำหรับใส่ข้อมูลลทำเป็น คอลัมน์เมนูด้านซ้ายมือกันดูครับ ว่าจะทำยังไง และจะให้มันแสดงผลออกมายังไง

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

เช่น ผมนั่งหลับตานึกๆ แล้ว ได้ประมาณว่า อยากให้เว็บมี header มีตรงกลางแสดงผลข้อมูล แล้วก็ แบ่งพื้นที่ไว้ทำเมนูด้านซ้ายมือ เหมือนเว็บทั่วๆ ไป ส่วนฝั่งขวาเอาไว้แสดงผลข้อมูล แล้วก็มีไฟล์ footer เพื่อแสดงรายละเอียดเกี่ยวกับหน้าเว็บสักเล็กน้อย

ถ้าคิดอยากให้เป็นได้ลักษณะนี้แล้ว ต่อไปก็ลุยโค้ด css ได้เลยครับ หลักๆ สำหรับ หน้าเว็บแบบ 2 คอลัมน์และมีหัวท้ายนี่ จะใช้ DIV tag id 3 ตัว และ DIV class 2 ตัว

คือ

1. id แรก จัดให้เป็น div header

2. id ที่ สอง จะให้เป็น div wrapper (เพื่อไว้แสดงผลข้อมูลและเมนู)

3. id ที่สาม กำหนดให้เป็น div footer

**id ทั้ง 3 กว้าง 800px

สำหรับ class ทั้ง 2 ตัว ที่จะนำมาใช้ นั้น ใช้ควบคุม 2 คอลัมน์ที่ซ้อนอยู่ใน id wrapper นั่นเองครับ

1. กำหนดคลาสสำหรับ tag div ฝั่งซ้ายให้ชื่อ content-left (200px)

2. กำหนดคลาสสำหรับ tag div ฝั่งขวาชื่อ content-right (600px)

เมื่อได้รูปแบบแนวคิดการเขียนมาแล้ว เริ่มละเลง css กันได้เลยครับ

ตัวอย่าง และโค้ด สามารถ Save ได้จาก Link นี้ครับ

https://www.thaicss.com/lessons/layouts/2chf.php