CSS Layout

css กับการจัดวาง xhtml ในกล่องข้อมูล

Coffe for Lover

ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล

ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง

ตัวอย่างแสดงผลออกมาแบบนี้

css layout กับการใช้ overflow และ float

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

เขียน css สำหรับเครื่องปริ้นท์

หลายคนยังคิดไม่ออกว่ามันคืออะไร การเขียน css สำหรับเครื่องปริ้นท์ หรือการกำหนด print media ให้กับหน้าเว็บเพจ เราสามารถเขียน css ควบคุมหน้าเอกสารในเว็บของเราได้ ว่าจะให้แสดงผลต่างไปอย่างไร ใน User Agents แบบอื่นๆ ไม่ใช่แค่บราวเซอร์อย่างเดียว

ตอนนี้มาลองดูรูปแบบง่ายๆ กับการสั่งแสดงผลบน ปริ้นเตอร์กันครับ

สำหรับหน้าเว็บไทยซีเอสเอส หน้านี้ผมได้เขียน css รองรับปริ้นเตอร์ ไว้แล้ว สามารถสั่งปริ้นท์ หน้าเว็บออกไปได้เลยโดยที่แสดงผลไม่ผิดเพี้ยน ยังกะเอกสารจากไมโครซอฟเวิร์ด สามารถทดสอบได้โดย ไปที่เมนู Files -> Print Preview แล้วคุณจะเห็นความแตกต่างระหว่างหน้าเว็บ

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 4 : หัก div หักดิบ ไม่มี div หรือ table

ถ้ามีโจทย์มา ถ้านะครับ แบบว่า สมมุติ ให้ทำเว็บไซท์ ธรรมดา 1 หน้า ดีไซน์ พอไปวัดไปวา แต่ ห้ามใช้ table หรือแม้กระทั่ง div tag ในหน้านั้น คุณจะแก้โจทย์ข้อนี้ด้วยวิธีการอะไร ด้วยการใช้ XHTML + CSS ในการสร้างหน้าเว็บขึ้นมา อย่าเพิ่งคิดว่ามันเป็นไปไม่ได้ครับ มาลองดูกันดีว่า

ทำยังไงที่เราจะพอดี พอเพียงกับชีวิตและพัฒนาตัวเองตามเทคโนโลยีได้อย่างพอเหมาะ และปรับตัวเข้ากับระบบกลไกการตลาดได้อย่างดีพอ (อันหลังนี้ไปหาทางกันเอาเองครับ)

ดีไซน์ที่คุณเห็นอยู่นี้ สำหรับแฟนเดนตายของ ไทยซีเอสเอสคงคุยเคยกันดี เพราะมันเป็นดีไซน์เก่า ของเว็บไทยซีเอสเอส ผมถอดทิ้งไปประมาณ เดือนพฤศจิกายน 2549 ที่นำกลับมาใช้ ก็เพื่อเป็นการลำลึกถึงความงี่เง่าและห่วยแตกของตัวเองและไทยซีเอสเอสจะครบ 1 ปี ในเดือนกรกฎาคมนี้แล้ว

เริ่มกันเลยกรุณาดูโค้ด หรือวิวซอสตามไปด้วยนะครับ

Float ตอนที่ 2

ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ

ThaiCSS กับ Screen, Print และ Handheld Media type

ตอนนี้ถ้าใครใช้โทรศัพท์มือถือ หรือ พีดีเอ เข้าเว็บไทยซีเอสเอส คงเห็นหน้าตาเว็บที่เปลี่ยนไป หรือ ใครที่สั่งพิมพ์หน้าเว็บก็จะเห็น ความแตกต่างเช่นเดียวกัน ใช่เลยครับ ผมเขียน css ขึ้นมาใหม่เพื่อให้รองรับ Handheld และ Print เพราะฉะนั้นเวลาที่ผู้ใช้เปลี่ยน device ในการเข้าถึงหน้าเว็บ การแสดงผลจะต่างไปด้วย

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial