CSS Layout

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

.floatbox {	
float: left;	
width: 100px; 	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร

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

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

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

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

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

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

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

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

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

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

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

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