การเขียน CSS Elastic Layout

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

การเขียนหน้าเว็บแบบ Elastic Layout มีสูตรที่ผมคิดขึ้นมาง่ายจากปกติ ฟ้อนท์ไซท์ 16px ซึ่งเป็นค่ามาตรฐานของบราวเซอร์ทั่วไป กับค่าเฉลี่ยนความกว้างหน้าเว็บที่ 950px ถ้าตั้งค่า body ให้ฟ้อนท์ขนาด 80% ของ 16px หรือ 0.8em ค่าความกว้างของ div หลักจะอยู่ที่ประมาณ 74em ค่าความกว้างเบื้องต้น ถ้าเรายึดเอาไว้ว่าจะใช้เท่าไหร่แล้ว อย่าพยายามเปลี่ยน เช่น ถ้ามีคนมาบอกว่า ตัวหนังสือในหน้ามันเล็กไป ขยายขึ้นอีกได้ไหม คำตอบคือได้ แต่ ขนาดหน้าเว็บจะขยายตาม เช่น ถ้าเราเปลี่ยน ขนาดตัวหนังสือจาก 80% หรือ 0.8em ไปเป็น 85% หรือ 0.85em หน้าเว็บจะยายกลายเป็นกว้างประมาณ 1008px ทันที ไม่ใช่ 950px อย่างที่เป็นตอนแรก จึงให้พึงระวังตรงนี้ไว้ด้วยนะครับ ถ้าเปลี่ยนไปแล้วอย่าลืมไปลดขนาดความกว้างของ div หลักลงไปด้วย

สำหรับใครที่จะหด ย่อ หรือขยายหน้าให้กว้างกว่านี้ก็เลือกปรับแต่งลองเล่นตามสบาย

เมื่อตัดสินใจเขียน Elastic Layout แล้ว อย่ากลับไปใช้หน่วยของตัวหนังสือเป็น px นะครับ ให้เลือกใช้ em หรือ % แทน แต่ถ้าใครใช้ ฟ้อนท์ หลักของเว็บเป็นตระกูล Times New Roman แนะนำให้ใช้เป็น ex ซึ่งขนาดฟอนท์จะเตี้ยและผอมกว่าฟ้อนในตระกูล ไร้ตีน อย่าง Verdana หรือ Tahoma

กลับเข้ามาดู code กันครับ จากโค้ดเดิมเมื่อตอนที่แล้ว

CSS

Code

สิ่งที่ผมปรับเปลี่ยนไปจาก Liquid Layout เดิมก็คือ กำหนดขนาดตัวหนังสือ font-size: 0.80em; และ margin: 0 auto; width: 74em; สำหรับ margin: 0 auto ก็เพื่อจัดให้ div ลอยอยู่ตรงกลางนั่นแหละครับ

XHTML

ตัวอย่างการแสดงผลสามารถดูได้ที่ ตัวอย่างการเขียน Elastic Layout

การเขียน Elastic Layout 2 Columns

ในการเขียน Elastic Layout มีความแตกต่างจาก Liquid ออกไป คือการเรียงลำดับโครงสร้าง XHTML ซึ่งถือเอาว่า ตามสไตล์ใคร สไตล์มัน คุณจะ ลอยไปทางซ้าย ลอยมาทางขวาก็ตามสะดวก ส่วนตัวอย่างที่ผมเขียนไว้คือ float: left ซึ่งสั่งให้ class หลักที่แยกเอาไว้เป็นสองคอลลัมน์นั้น ลอยติดกันไปทางซ้าย ส่วนการ clear content element ก็ยังต้องเคลียร์เหมือนเดิม ตราบใดที่เรายังใช้ float แต่ ย้ายการเคลียร์ไปแปะไว้ที่ #container แทน

CSS

ส่วนโค้ด XHTML ก็ประมาณนี้ครับ

ตัวอย่างการแสดงผลสามารถดูได้ที่ ตัวอย่างการเขียน Elastic Layout

เอาหละ นั่งอ่านมาตั้งนาน งงก็งง แล้วมัน Elastic ตรงไหนวะ?

ตัวอย่างการเขียน Elastic Layout อยากจะดูว่ามันเป็นอย่างไร ให้เลื่อนเม้าส์ ไปที่

  1. ผู้ใช้ Firefox

  2. ผู้ใช้ IE6

  3. ผู้ใช้ IE7

  4. ผู้ใช้ Opera 9.5

  5. ผู้ใช้ Safari (Windows)

…… อืมมม ใช่แล้วครับ หน้าเว็บมันขยายตามขนาดตัวหนังสือของบราวเซอร์!

ปล. สำหรับแบบ สามคอลัมน์ เดี๋ยวตามมาครับ

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

Back to Top

One Response to การเขียน CSS Elastic Layout

  1. sheeping_sheep

    เจ๋งมากเลยคับพี่พร ที่นีก้อจะได้ไม่ต้องปวดหัวเวลาขยายหน้าจอไปมา

    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