การเขียน Liquid Layouts 3 Columns

ผมค้างเอาไว้จากบทความก่อนหน้า เกี่ยวกับการเขียน CSS Layout แบบ เต็มหน้า ตอนนี้มาดูกันต่อว่า ถ้าจะทำเป็นแบบ สามคอลัมน์ต้องลดและเพิ่มตรงไหนบ้าง เพื่อที่จะจัดหน้าให้เข้าที่ได้ง่ายที่สุด

สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น

สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี

CSS ทั้งหมดในฝั่ง CSS

Code

CSS

XHTML

สามารถดูได้ที่ ตัวอย่างการเขียน 3 Column Liquid Layout

ถ้าเกิดไม่มี IE6 หรือ IE ทั้งหมดเข้าสู่มาตรฐานและสนใจชาวบ้านชาวช่องเขาบ้าง จะเกิดอะไรขึ้น

ผมมีตัวอย่างการเขียน css แบบ Child Selector และ Adjacent sibling selectors มากระตุ้นต่อมความน่าสนใจในความสามารถของ css กันสักเล็กน้อย แต่ยังไม่ได้มี Descendant selectors เข้ามาร่วม ก็เอาไว้โอกาสต่อไปครับ

กับการทำหน้าเว็บแบบ 3 Columns Liquid Layout เหมือนเดิม โครงสร้างของ XHTML ยังคงใช้เหมือนเดิม แต่สิ่งที่ถออดออกไปคือ Attribute Class และ ID ทั้งหมด คงรู้กันแล้วว่า ใน CSS3 Class Selector ของ CSS จะถูกนำมาใช้งานน้อยมาก ถ้าไม่จำเป็น ส่วน ID จะถูกปัดไปอยู่ในเรื่องของ Architecture Domain โดยเป็นส่วนย่อยในเรื่อง Naming และ Addressing โดยเฉพาะการทำ URI ให้มีความหมายในเรื่อง Semantic Web การเขียน CSS เพื่อควบคุมการแสดงผล XHTML จึงถือเป็นเรื่องเฉพาะทางมากยิ่งขึ้น

ก่อนที่จะไปดู CSS มาดู XHTML ที่เปลี่ยนไปกันก่อนครับ

XHTML

ส่วนเรื่องของ CSS ก็ตามข้างล่างเลยครับ

CSS

สามารถดูตัวอย่างได้ที่ ตัวอย่างการเขียน 3 Column Liquid Layout แบบ None Class หรือ ID (ไม่สามารถใช้ IE6 ดูได้ สาเหตุเพราะอะไร เรารู้ดี)

การเขียนหน้าเอกสารด้วย XHTML ที่ขาวสะอาดมากๆ ช่วยให้การเข้าถึงข้อมูลของ User Agents ต่างๆ สามารถทำได้ง่ายยิ่งขึ้น การตัด Attribute Class ออกไป หรือ ลดการใช้งาน ทำให้หน้าเอกสารเรามีขนาดเล็กลง ประหยัดไปอีกทาง คนที่กำลังอยากจะทำเว็บแบบ Hight Accessibility คงกำหลังศึกษาและทำเรื่องนี้กันอยู่

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

มีความสุขกับการเขียน XHTML CSS ครับ ผมขอตัวไปแกะเพลงต่อก่อนครับ เย็นนี้มีซ้อมดนตรี

Back to Top

One Response to การเขียน Liquid Layouts 3 Columns

  1. daclubb

    การเขียน css แบบ Child Selector และ Adjacent sibling selectors น่าหนุกเนอะ

    Reply

Leave a Reply

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

Connect with Facebook

Back to Top