คุยกะป๋าในเอ็มแล้วไม่ถนัดครับ
เพราะเป็นคนที่ไม่ถนัดในการตอบเร็ว ก็เลยปั่นเอาง่ายกว่า
ทีนี้มาว่ากันด้วยเรื่อง
การจัดคอนเทนต์เอาไว้กลางหน้าจากโจทย์นี้นะครับ
ถ้าเคยชินกับระบบ Table ก็ต้องสร้างตารางเต็มจอ
แล้วค่อยซอย แล้ว fixed ตรงกลางใช่มะ
แต่นี่ยุค css ก็ให้ใช้ (ต่อไปนี้ขอเรียกว่า) wrapper เลยครับ
wrap แปลว่าห่อ: ในที่นี้คือห่อเนื้อหาทั้งหมดไว้ในนั้น
(เข้าใจตรงกันนะ เผื่อไปแกะโค้ดฝรั่งเจอคำนี้จะได้ไม่งง)
ก่อนอื่นให้ใช้สูตรเต็มจอ (อย่างโพสต์ก่อนของตูนู่น) ให้กับ tag html + body ก่อน
html, body {height: 100%;}
แล้วตามด้วยบอกให้จัดหน้าไว้ตรงกลาง
body { margin: 0; padding: 0; text-align: center;}
เสร็จถึงตรงนี้ลองพิมพ์เนื้อหามั่วๆ ดู จะเห็นว่าเนื้อหาชิดกลางแล้ว
ทีนี้ก็เอาถุงมาห่อไม่ให้หกเลอะเทอะ ถุงนี้จะกว้าง 800px ครับ
#wrapper { margin: 0 auto; text-align: left; width: 800px; min-height: 100%; height: auto; background: #ffcc00;}
- text-align: left; คือทำให้ตัวอักษรชิดซ้ายในห่อนี้ (ถ้าไม่มีจะชิดกลาง)
- background: #ffcc00; อันนี้ใส่ให้มันมีสีเฉยๆ
พอดีไปเจอฝรั่งท่านสอนมา (ขโมยโค้ดเขามา)
บอกว่าไอ้ IE
เนี่ย (พิมพ์ทีไรติดนิ้วกลางทุกที) มันแสดงผลไม่ตรงชาวบ้าน
ต้องใส่ไอ้นี่เข้าไปหน่อยเพื่อดัดนิสัยมัน
* html #wrapper { height: 100%;}
ซึ่งทำให้เวลาเราใส่เนื้อหาเข้าไปแล้วมันเกินหน้าขึ้นมาเนี่ย
มันจะมี Scrollbar ลงมาด้วยครับ
ส่วนเรื่อง Footer นั่นก็เอาไปใส่เอาต่อเองนะครับ ยัดใส่ห่อใหญ่อีกทีนึง
เสร็จแล้วลองโหลดอันนี้ไปดู