Multi-Column Layout Design

ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ 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 มันมีอยู่ว่า

“ถ้าเราสามารถนำ div ทีเราต้องการทำเป็น sidebar หรือ rail เนี่ยมา float อยู่ border ของ div ที่ใช้ใส่ content หลัก ๆ ได้แล้วล่ะก็ เราก็จะสามารถจำลองความสูงเสมือนให้กับ column ที่ต้องการได้ไม่ว่า content ใน column ใดจะสูงกว่าก็ตาม”

วิธีคิดแบบนี้เคยถูกนำเสนอมาแล้วโดย Douglas Livingstone และ Holly และ John Bergeven จาก position is everything จากการอาศัยทฤษฎีเดียวกันนี้ แนวคิดที่ Pearce นำมาเสนอในที่นี้ได้พัฒนามาจาก One-True-Layout โดยทำให้เป็นรูปแบบ elastic two-column มาดูกันว่ามันทำงานอย่างไร ให้สังเกตุจากบรรทัดที่ผม comment ไว้นะครับ

HTML Code:

CSS Code:

ให้ลองนำ code ไปทดลองทำดูครับว่าได้ผลตรงตามแนวคิดของ Pearce หรือไม่ ทีนี้ลองมาดูตัวอย่างการทำ three-column layouts ดูบ้างว่าจะได้ผลออกมาอย่างไร

Three-Column
ในส่วนนี้จะแตกต่างจากการทำแบบ Two-column ตรงที่เราจะใส่ border ให้กับ div ที่เป็น container โดยตรงพิจารณาจาก code

HTML Code:

CSS Code:

จาก code จะเห็นว่า center column มี right margin -500px ซึ่งจะเอื้อให้เจ้า leftRail เนี่ย float อยู่บนระยะ margin นี้ Pearce บอกว่ามีหลายวิธีที่จะทำให้การแสดงผลออกมาในลักษณะนี้แต่วิธีนี้น่าจะเป็นวิธีที่ดีที่สุดที่จะสามารถสนับสนุนแนวคิดของเขา เมื่อเรานำไปประยุกต์ใช้กับ layout แบบ liquid

เมื่อเราต้องการที่จะประยุกต์ใช้แนวคิดนี้กับ liquid layout เราจะต้องใส่ overflow: hidden เพิ่มเข้าไปให้กับ container เพราะเมื่อ container นั้นสามารถยืดหยุ่นได้เจ้า rail เนี่ยมันจะ float ออกไปนอก container เพราะฉะนั้นเราจะต้องใส่ overflow: hidden กำกับเข้าไปไว้ด้วย เพราะอะไร? เพราะว่า modern browser ที่ไม่ใช่ตระกูล IE นั้นจะแสดงผลส่วนที่ overflow ออกไปให้เราเห็นด้วย ดังนั้นด้วยเหตุนี้เราจึงจำเป็นต้องใส่ overflow: hidden ให้กับเจ้า container มาลองดูตัวอย่าง code ของ liquid layout Two-Column กันครับขออนุญาติใช้ HTML Code เดิมจากด้านบนนะครับ เปลี่ยนเฉพาะ CSS Code ดังนี้ครับ

CSS code:

จะเห็นได้ว่า CSS ไม่ต่างกันมากจะมีเปลี่ยนไปเพียงบางส่วนตามที่อธิบายข้างต้นไว้แล้ว คือ เพิ่ม overflow: hidden สำหรับ modern browser ต่าง ๆ และความกว้างของเจ้า container จากที่ fix ไว้ก็กลายเป็น 100% อีกที่หนึ่งคือ *html#container {height: 1%;} ใช้ร่วมกับ IE ซึ่ง IE จะตีความหมายเหมือนกับ overflow: hidden (คุณสามารถเขียนไว้ใน style sheet file หรือแยกไว้ที่หน้านั้น ๆ ด้วย condition comment ก็ได้ แล้วแต่สะดวกครับ)

Pearce ยังคงค่า margin ไว้เพื่อทำให้เกิดช่องว่าง สิ่งนี้จำเป็นมาก padding-right จะบีบให้ความกว้างของcontent นั้นแคบลง เพราะตอนนี้เราเปลี่ยนให้มันมีความกว้างเป็น 100% แล้ว ถ้าไม่มีการกำหนด padding แล้วเจ้า rail ของเราก็จะกระเด็นออกไปอยู่นอกกรอบที่ต้องการให้แสดงผลทันที และก็จะมองไม่เห็นด้วยถึงแม้จะมี overflow: hidden อยู่ก็ตาม ทีนี้เรามาดู liquid layout ที่เป็น Three-Column กันบ้าง เช่นกันครับขอยกตัวอย่างเฉพาะ CSS Code

CSS Code:

จาก code คุณจะเห็นว่า margin และ padding นั้นไปอยู่ที่ body แทนแล้วในตอนนี้ margin จะเป็นตัวผลักให้ layout นั้นเขยิบเข้ามาจากขอบหน้าจอของ browser และ padding ก็คือความกว้างของเจ้า rail พื้นที่ที่เหลือก็จะเป็นพื้นที่ที่ความกว้างของ container นั้นสามารถยืดมาให้เต็ม 100% (ตามความพยายามของมัน) หักลบจาก margin และ padding ที่เรากำหนด

มาดูที่ container กัน จะเห็นว่า Pearce นั้น ยังคงใส่ border และ margin ไว้เหมือนเดิมอย่างที่เคยทำ เพราะว่าจะทำให้ border ไปแทนที่ padding ของ body พอดี พยายามทำให้ทุกอย่างอยู่ในที่ที่ควรจะอยู่ของมัน แล้วสุดท้ายค่อยมาจัดการกับ div

บทความนี้ คงทำให้หลาย ๆ คน ได้วิธีใหม่ ๆ ในการแก้ปัญหาได้บ้างนะครับ ขอบคุณความคิดนอกกรอบที่ดีดี และ มีประโยชน์ของ Alan Pearce สุดท้ายขอบคุณคุณนั่นแหละครับ ที่อ่านจนจบ

มีความสุขกับการคิดนอกกรอบอย่างสร้างสรรค์ครับ (เลียนแบบเจ้าสำนัก)

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0

Back to Top

0 Responses to Multi-Column Layout Design

  1. poklag

    บทความดีครับ แต่น่าจะมีรูปบ้าง ปกติอ่าน css code มันก็เข้าใจยากอยู่แล้ว กว่าจะรู้เรื่องได้ก็เล่นเอาท้อซะก่อน

    ยังไงก็เป็นกำลังใจให้นะครับ

    Reply

  2. radiz

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial