CSS Layout

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

อาจจะเป็นเรื่องไม่สำคัญที่เราต้องมารู้เรื่องว่า CSS แต่ละอย่างมันเรียกว่าอะไร แต่ดูๆ ไป ดูๆ มา มันก็คงบอกว่าไม่สำคัญไม่ได้ เพราะมันเป็นเรื่องที่ต้องทำความเข้าใจ ถึงแม้ว่าเราไม่จำเป็นต้องเอาไปท่องจำ แล้วนำไปสอบเรียนต่อในสถาบันการศึกษาไหนก็ตาม แต่ว่าโครงสร้างหลักของ CSS ที่เรายึดว่าจะใช้ในงานแต่ละแบบ ถือเป็นข้อกำหนดการออกแบบหน้าเว็บที่สำคัญในระดับหนึ่งเลยทีเดียว

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

มาดูกันคร่าวๆ ว่าเลย์เอ้าท์ แต่ละแบบมีอะไรบ้าง ผมอาจจะเขียนเอาไว้ไม่ค่อยละเอียด แต่ก็อย่างว่าเรื่อง CSS มันเป็นแนวเฉพาะเจาะจงของใครของมัน เอาไปต่อยอดกันเองนะครับ

1. Liquid Layout (การวางหน้าเว็บแบบเต็มหน้า)

การเขียน css xhtml layout แบบแสดงผลตามความกว้างของหน้าจอ โดยกำหนดความกว้างแบบเปอร์เซ็นต์นี้ หมาะสำหรับเว็บที่มุ่งเสนอเนื้อหามากๆ เป็นสำคัญ เช่นเว็บที่นำเสนอข่าว โดยที่รูปแบบการนำเสนอถูกลดบทบาทลงไป แต่เนื้อหาจะถูกดันขึ้นมาทดแทน เราจึงไม่สามารถไปกำหนดการออกแบบได้มาก เพราะขนาดของความกว้างจะขึ้นอยู่กับหน้าจอผุ้ใช้เป็นสำคัญ การออกแบบจึงถูกจำกัดลงมาด้วย

การเขียน Liquid Layout ข้อจำกัดอีกรูปแบบหนึ่งที่มีคือ การวางโครงสร้างของ Element ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง

ข้อดี

ใช้พื้นที่หน้าจอได้ประโยชน์ อย่างเต็มที่กับการนำเสนอเนื้อหาของเว็บไซท์

ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือได้โดยที่หน้าเว็บไม่ผิดเพี้ยนไป

ข้อเสีย

ไม่สามารถใช้กราฟฟิคหวือหวา หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้

browser ทุกวันนี้ ต่างก็ถูกพัฒนาขึ้นเรื่อย ๆ ทำให้เราสร้าง layout จาก css ได้ง่ายมากขึ้นด้วย float เป็นทางเลือกหนึ่งที่นิยมนำมาใช้ในการวาง layout ด้วย css แต่มันก็ไม่ใช่ทางออกทางเดียวนะครับ เพียงแต่ว่ามันง่ายในการใช้งาน ง่ายในการควบคุม เลยทำให้เป็นที่นิยมกันแพร่หลายมากกว่าวิธีอื่น ๆ

จากที่โอ๊ตเขียนไปเมื่อหลายเดือนก่อน ในบทความ “แนวทาง ในการแก้ไขปัญหา Float Model” ในส่วนของ css hack นั้น วันนี้ผมจะพูดถึง float จาก basic ไม่รู้ว่าจะง่ายพอเข้าใจ หรือ ทำให้งงกันไปใหญ่ ไม่รู้นะ เพราะหลายอาทิตย์ที่ผ่านมานั้น ใน webboard กับหลายคำถามที่ผมได้เข้าไปอ่าน ตอบบ้างไม่ตอบบ้างไม่ว่ากันนะ ยังเห็นว่าเป็นปัญหาเดียวกันอยู่ ซึ่งหลาย ๆ คนเห็นเป็นสิ่งที่งอกง่อยควรมองข้ามไป แต่ฐางคนเข้าใจว่าสิ่งเหล่านี้เป็นพื้นฐานที่ดีในการปูพื้นเพื่อพัฒนาตนเองนะครับ (พออ่านถึงตอนนี้มีใครเดือดดาล ก็กด “9” หรือ ชื่นชอบกด “4” กด กด กด) จุดประสงค์จริง ๆ แล้ว คืออยากจะปูพื้นฐานให้แน่น ๆ กันมากกว่า ไม่อยากฝึกให้ทำอะไรฉาบฉวยพอเอาตัวรอด พอทำได้ ภาษาบ้านผมเรียก “พอก่ำก่า” “พอกะเทิน” “โชว์กล้ามดาก” หรือ คนกรุงเรียก “เกรียน” นั่นเอง แล้วไปบอกว่าเอ้ย กูทำได้ กูเก่ง …. (ช่าง “ตื๊ดดด” พวกเขาเถอะครับ) เข้าเรื่องดีกว่า

การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout โดยสิ่งที่จะเจออย่างแรกคือ ปัญหาการใช้ float กับ block element ซึ่งอยู่ใน block element ที่เป็น  container แล้วตัว container ไม่ยืดตามเนื้อหาของ  block element ที่ใช้ float

ดังตัวอย่าง: css ที่ใช้คือ

ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากันแม้ว่าจำนวน content ที่อยู่ด้านในนั้นจะไม่เท่ากันก็ตาม ถ้าเป็นเมื่อก่อนผมจะใช้วิธีทำ background picture มาหลอกเอาที่ block element หลัก หรือ ไม่ก็เขียน CSS hack ต่าง ๆ เท่าที่จะหาได้ หรือ เคย bookmark เก็บ ๆ เอาไว้ ถ้าจนปัญญาจริง ๆ ก็คงต้องพึ่งเจ้า czarft แห่ง thaiNUI.com เพื่อนสนิทคนนี้ ให้ช่วยเรื่อง Javascript แต่เมื่อเดือนที่แล้วผมได้ถูกเปิดหูเปิดตาด้วยการคิดนอกกรอบอย่างสร้างสรรค์ (จริง ๆ นะ ไม่เหมือนใครบางคน) ของ Alan Pearce ทำให้ผมได้เห็นว่าบางทีเราก็ควรจะมองจากมุมข้างนอกบ้างก็ดี อย่างน้อยชีวิตก็ไม่ได้อยู่ในกรอบแล้วกรอบอีก ไปซะหมด (ต้องปีนให้หลุดกรอบ แม้นมันจะมีหลาย ๆ กรอบ ก็ต้องพยายามข้ามออกไปบ้าง)

Pearce กล่าวว่าเขาได้พยายามใช้ idea จากที่ designer หลาย ๆ คนที่เขียนเกี่ยวกับเรื่องนี้ไว้แล้วตาม blog ต่าง ๆ แต่ก็ยังไม่ได้สิ่งที่เขานั้นต้องการอย่างแท้จริงเพราะบางวิธีนั้นก็เป็นวิธีที่ใช้กับ multi-column design แบบธรรมดา ๆ หรือ เป็น elastic อย่างที่เขาต้องก็จริงแต่ว่ามันยังคงมี bug ในหลาย ๆ browser เขาจึงเริ่มมานั่งทบทวนด้วยตัวเองแล้วลองมองต่างมุมจากหลาย ๆ บทความที่เขาได้อ่านผ่านมาดู สิ่งที่เขาคิดได้คือ การใช้ border ให้เป็นประโยชน์… อย่างไรล่ะ? มาลองคิดตาม concept ที่เขาคิดขึ้นมาในหัวดู concept มันมีอยู่ว่า

สวัสดีครับ หายไปนาน ต้องขอโทษเพื่อน ๆ พี่ ๆ น้อง ๆ ที่แวะเวียนเข้ามาด้วยนะครับ เข้าเรื่องกันเลยดีกว่า มีน้อง ๆ เพื่อน ๆ ใกล้ ๆ ตัวถามผมกันบ่อย ๆ ว่า property “position” กับ value ของมันแต่ละแบบนั้นทำงานกันอย่างไร เลยคิดว่าเอามาเขียนแนะนำไว้ที่นี่ด้วยเลยดีกว่า

ทีนี้เรามาทำความรู้จักกันก่อนว่าเจ้า property position เนี่ย มันมี value เป็นอะไรได้บ้าง

1. static
2. relative
3. absolute
4. fixed

ซึ่งแต่ละค่า value นั้น ก็จะให้ผลลัพธ์แตกต่างกันไป และ บาง value จะสามารถใช้ร่วมกับคำสั่ง top, bottom, left และ right ได้ เพื่อกำหนดจุดพิกัดในการแสดงผล ทีนี้ผมจะอธิบายคุณสมบัติของ value แต่ละตัวตามลำดับ ดังนี้ครับ

อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม

เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง