ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 5)

จัดการ CSS ในส่วนของ Containner และ Main เป็นส่วนที่บรรจุเนื้อหา และ Navigation ต่างๆเอาไว้

ขั้นตอนในการเขียน CSS สำหรับส่วน Containner มีดังนี้

1.จะข้ามขั้นตอนการเพิ่ม CSS ไปที่การใส่รายละเอียดเลยดังรูป

กำหนดความกว้างของ containner ให้เท่ากับ 800px และให้มีระยะห่างด้านบนจาก head เท่ากับ 5px



2.กำหนดให้มีเส้นขอบบนสี #CBC2A5 ขนาด 5px



3.กำหนดให้ตัวอักษรทั้งหมดใน containner อยู่ชิดซ้ายให้หมด

---

ขั้นตอนในการเขียน CSS สำหรับส่วน Main มีดังนี้

1.กำหนดพื้นหลังให้กับ Main โดยใช้รูป bg.jpg และให้แสดงผลซ้ำในแนวตั้งเท่านั้น



2.กำหนดให้ Main กว้าง 800px และ Float : left จัดชิดด้านซ้ายของหน้าจอ

หลายคนอาจสงสัยว่า

1.ชิดซ้ายหน้าจอแล้วทำไมยังอยู่ตรงกลาง ก็เพราะว่า Main นั้นอยู่ใน Containner ซึ่งตัวของ Containner นั้นอยู่ตรงกลางอยู่แล้วจึงบังคับให้ Main อยู่ตรงกลางด้วย

2.ในเมื่อ Main อยู่ตรงกลางอยู่แล้ว แล้วทำไมต้องสั่งให้ชิดซ้าย เพราะว่าเราได้สั่งให้มีพื้นหลังในส่วนของ Main ด้วย ซึ่งถ้าเราไม่สั่งให้ Float : left พื้นหลังจะไม่แสดงผลในส่วนของ Firefox browser



เมื่อสร้าง CSS เสร็จแล้วจะแสดงผลตามด้านล่าง

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจ

คลิกที่นี่เพื่อดูตัวอย่าง CSS