CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

ตัวอย่างการเขียน CSS Liquid Layout ต่อไปนี้ ผมจะยังคงแบ่ง Section ของหน้าเว็บหลักออกเป็น 3 ชิ้นเหมือนเดิม คือมีส่วนของ Header, Body และ Footer ซึ่งจะใช้ Element ยอดฮิตคือ Div ในการแบ่งพื้นที่ โดยใช้ แอตทริบิ้ว ID ในการเรียกใช้งาน CSS (ซึ่งจริงๆ แล้วไม่ควรใช้ ID ในการเรียก หรือแม้กระทั่ง Class เองก็ตาม อยากเห็นตัวอย่างว่าการเขียน CSS โดยไม่ใช้ แอตทริบิ้ว ID หรือ Class ในการเรียกใช้งานเป็นอย่างไร สามารถเข้าไปดูได้ในหน้า CSS Online ครับ) ผมแยกโดยการตั้งชื่อ id ให้ใกล้เคียงกับความสมจริงทั่วไปมากที่สุดคือมี #header-warp, #container และ #footer

โดยลักษณะการเขียน CSS ทั้งหมดในฝั่ง CSS มีการใช้

  1. Universal Selector: *
  2. Type Selector: body และ address
  3. ID Selector: #header-warp | #container | #footer
  4. Group Selector: #header-wrap, #container, #footer

1 Column Liquid Layout

สำหรับ Liauid Layout แบบคอลัมน์เดียวนี้ ถึงแม้จะไม่ค่อยถูกนำไปใช้งานมากมายในเชิงธุรกิจหรือทำเว็บเพื่อความสวยงาม แต่เราสามารถนำมาใช้เป็นเรื่องราวพื้นฐานของการทำความเข้าใจ ตามทฤษฎีของไหล ในรูปแบบอื่นๆ ได้เป็นอย่างดี

Code

CSS

XHTML

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

2 Column Liquid Layout

มาดูกันต่อครับ กับการเขียนแบบ สองคอลัมน์โดยตัวอย่างผมจะแสดงให้เห็นในการทำคอลัมน์แทรกเข้ามาในฝั่งซ้ายอย่างเดียว สำหรับท่านใดที่จะโยกย้ายคอลัมน์ก็ตามแต่ท่านเถิด แน่นอนว่าในการเขียนเราต้องเพิ่ม XHTML เข้ามาเพื่อทำคอลัมน์ โดยผมจะเพิ่มเข้ามาทั้ง 2 divs เพื่อเอาไว้จัดการแยกคอลัมน์ ซ้ายและขวา ใช้ CSS รูปแบบของ Class Selector ในการแยกกล่องทั้งสองออกจากกัน โดยกำหนดเป็น .content สำหรับส่วนของเหนื้อหาหลัก และ .sidebar สำหรับส่วนของเนื้อหาที่อยู่ด้านข้าง

การเขียน CSS ที่เพิ่มเข้ามาจากตอนที่เราใช้แบบ 1 คอลัมน์มี ดังนี้

  1. Class Selector: .content | .sidebar
  2. :after pseudo-class Selector: .content:after

Code

CSS

XHTML

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

สำหรับเนื้อหาเรื่องการ clear Element โดยการใช้ :after pseudo-class สามารถอ่านเพิ่มเติมได้ที่ แนวทาง ในการแก้ไขปัญหา Float Model

สำหรับแบบ สามคอลัมน์ ขอฝากไว้ก่อนครับ เดี๋ยวกลับมาต่อ

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

0 Responses to CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

  1. radiz

    อิอิ code แอบเทพไปหน่อยมั้ย

    Reply

  2. daclubb

    เยี่ยมมากครับ

    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