อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม
เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง
ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล
ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง
ตัวอย่างแสดงผลออกมาแบบนี้
12 กรกฎาคม 2549 ผมเดินดุ่มๆ ลงจากชั้น 15 อาคารฟอรั่มย่านห้วยขวาง ไปยังธนาคารไทยพานิชย์สาขาถนนรัชดา เพื่อชำระค่าบริการโดเมนเนม thaicss.com กว่าขวบปีที่ผ่านมา ล่วงเลยผ่านแห่งการเวลา ล้มลุกคลุกคลาน ผมจำได้ว่า ผมพักเว็บไปถึง 2 ครั้ง 2 คราแบบไร้เหตุผลด้วยกัน กระทั่งมาถึงวันนี้ ขอบคุณเพื่อนๆ ที่ค่อยกระตุ้นเตือนเป็นแรงใจ ผลักดันให้ thaicss.com คงอยู่มาจนถึงวันนี้ วันที่ thaicss.com จะครบขวบปี
หัวใจสำคัญของการวางเลเอาท์หน้าเว็บด้วย CSS อีกอย่างที่ถือว่าสำคัญ อันดับต้นๆ คือ การสั่ง positioning ของ วัตถุ ที่ลอยๆ อยู่บนหน้าเว็บ
หลักๆ คือ tag div(s) ของ xhtml นั่นเอง
จะเลือกใช้อันไหนระหว่าง static, relative, absolute
1. Static
สำหรับค่า ดีฟอลท์ หรือค่าพื้นฐานของ position คือ static ครับ หมายถึง ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และ ข้อสำคัญของการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่
2.relative
“จารย์ครับ ทำไมผมเอาโค้ด ที่เว็บไทยซีเอสมาลองใช้แล้ว มันไม่จัดกลางอย่างตัวอย่างในเว็บครับ” คำถามที่น้องคนนึง ทักถามมาทางเอ็มเอสเอ็น ผมสงสัยปนงงเล็กน้อย ว่าทำไมมันไม่จัดกลาง เพราะดูแล้วมันก็ไม่น่าจะมีปัญหาอะไร
ครู่ใหญ่ๆ ผ่านไป เขาได้ส่ง ลิงค์ให้ผมเข้าไปดู หลังจากที่ผมเปิดดู มันก็ไม่จัดกลางอย่างที่เขาว่า ผมเริ่มอยากจะหาสาเหตุ ต้อง วิวซอร์สดูก่อน
แม่เจ้า DOCTYPE หายไป!
เรื่องเล็กๆ ที่สามารถชี้ชะตาชีวิตได้เลยว่า คุณเหมาะที่จะเขียน XHTML CSS ในระดับไหน
ลบทิ้งทำไมครับ ลบไอ้ภาษาอังกฤษ ที่คุณไม่เข้าใจสองสามบรรทัดข้างบนนั้นทิ้งทำไม ไม่เคยคิดเอะใจ สงสัยว่ามันคืออะไรแล้วหาคำตอบให้กับชีวิตบ้างเลยหรือ
ไม่น่าเชื่อ ว่าหลายๆ คนที่ทำเว็บมายาวนาน จะไม่รู้จักว่า DOCTYPE หรือ ภาษาอังกฤษที่มีแถมมาในหน้าเพจจากเครื่องมือ XHTML Editor นั้นมันคืออะไร สำคัญขนาดไหน (รวมถึงผมตอนรู้จักและหัดทำเว็บใหม่ๆ เมื่อหลายปีก่อนด้วย)
Div หรือ Division อาจจะกำลังกลายเป็นชื่อเล่น ในการนำมาเรียกชื่อ การออกแบบเลย์เอ้าท์ หน้าเว็บด้วย XHTML + CSS แต่ทำไมผมจึงรู้สึก แปลกๆ พอได้ยินคนพูดถึงคำๆ นี้ เช่น เปลี่ยนจาก เทเบิล มาเป็น ดิฟ หรือเขียนดิฟ หรือเขียน ซีเอสเอสดิฟ มันวนเวียนอยู่ในหูตลอดเวลา ทำให้เกิดอาการสงสัยว่า แต่ละคนรวมทั้งผมด้วยเข้าใจหลักการอะไรผิดไปหรือเปล่า อย่า อย่าเพิ่งหาว่าคนอื่นเป็นจอมหลักการ ชีวิตมันต้องมีหลักการ บ้าง อย่าอาศัยอารมณ์ นำทางอย่างเดียวไม่ดี บางคนเห็นคนอื่น div แล้วก็อย่าง div บ้าง แต่ไม่รู้เลยว่าจริงๆ เขาพากัน div แบบไหน อันไหนควร div อันไหนไม่ควร ผมไม่ทราบว่าแต่ละคน ในขณะที่พูดกันอยู่นั้นว่า จะทำ ดิฟดีไซน์ แล้วเข้าใจคุณค่าและความหมายของคำว่า div กันอย่างไรบ้าง ลองมาดูกันเล่นๆ ครับ