CSS Layout

ลับสมองไปกับ float ตอนที่ 1

browser ทุกวันนี้ ต่างก็ถูกพัฒนาขึ้นเรื่อย ๆ ทำให้เราสร้าง layout จาก css ได้ง่ายมากขึ้นด้วย float เป็นทางเลือกหนึ่งที่นิยมนำมาใช้ในการวาง layout ด้วย css แต่มันก็ไม่ใช่ทางออกทางเดียวนะครับ เพียงแต่ว่ามันง่ายในการใช้งาน ง่ายในการควบคุม เลยทำให้เป็นที่นิยมกันแพร่หลายมากกว่าวิธีอื่น ๆ

จากที่โอ๊ตเขียนไปเมื่อหลายเดือนก่อน ในบทความ “แนวทาง ในการแก้ไขปัญหา Float Model” ในส่วนของ css hack นั้น วันนี้ผมจะพูดถึง float จาก basic ไม่รู้ว่าจะง่ายพอเข้าใจ หรือ ทำให้งงกันไปใหญ่ ไม่รู้นะ เพราะหลายอาทิตย์ที่ผ่านมานั้น ใน webboard กับหลายคำถามที่ผมได้เข้าไปอ่าน ตอบบ้างไม่ตอบบ้างไม่ว่ากันนะ ยังเห็นว่าเป็นปัญหาเดียวกันอยู่ ซึ่งหลาย ๆ คนเห็นเป็นสิ่งที่งอกง่อยควรมองข้ามไป แต่ฐางคนเข้าใจว่าสิ่งเหล่านี้เป็นพื้นฐานที่ดีในการปูพื้นเพื่อพัฒนาตนเองนะครับ (พออ่านถึงตอนนี้มีใครเดือดดาล ก็กด “9” หรือ ชื่นชอบกด “4” กด กด กด) จุดประสงค์จริง ๆ แล้ว คืออยากจะปูพื้นฐานให้แน่น ๆ กันมากกว่า ไม่อยากฝึกให้ทำอะไรฉาบฉวยพอเอาตัวรอด พอทำได้ ภาษาบ้านผมเรียก “พอก่ำก่า” “พอกะเทิน” “โชว์กล้ามดาก” หรือ คนกรุงเรียก “เกรียน” นั่นเอง แล้วไปบอกว่าเอ้ย กูทำได้ กูเก่ง …. (ช่าง “ตื๊ดดด” พวกเขาเถอะครับ) เข้าเรื่องดีกว่า

แนวทาง ในการแก้ไขปัญหา Float Model

การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout โดยสิ่งที่จะเจออย่างแรกคือ ปัญหาการใช้ float กับ block element ซึ่งอยู่ใน block element ที่เป็น  container แล้วตัว container ไม่ยืดตามเนื้อหาของ  block element ที่ใช้ float

ดังตัวอย่าง: css ที่ใช้คือ

Multi-Column Layout Design

ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากันแม้ว่าจำนวน content ที่อยู่ด้านในนั้นจะไม่เท่ากันก็ตาม ถ้าเป็นเมื่อก่อนผมจะใช้วิธีทำ background picture มาหลอกเอาที่ block element หลัก หรือ ไม่ก็เขียน CSS hack ต่าง ๆ เท่าที่จะหาได้ หรือ เคย bookmark เก็บ ๆ เอาไว้ ถ้าจนปัญญาจริง ๆ ก็คงต้องพึ่งเจ้า czarft แห่ง thaiNUI.com เพื่อนสนิทคนนี้ ให้ช่วยเรื่อง Javascript แต่เมื่อเดือนที่แล้วผมได้ถูกเปิดหูเปิดตาด้วยการคิดนอกกรอบอย่างสร้างสรรค์ (จริง ๆ นะ ไม่เหมือนใครบางคน) ของ Alan Pearce ทำให้ผมได้เห็นว่าบางทีเราก็ควรจะมองจากมุมข้างนอกบ้างก็ดี อย่างน้อยชีวิตก็ไม่ได้อยู่ในกรอบแล้วกรอบอีก ไปซะหมด (ต้องปีนให้หลุดกรอบ แม้นมันจะมีหลาย ๆ กรอบ ก็ต้องพยายามข้ามออกไปบ้าง)

Pearce กล่าวว่าเขาได้พยายามใช้ idea จากที่ designer หลาย ๆ คนที่เขียนเกี่ยวกับเรื่องนี้ไว้แล้วตาม blog ต่าง ๆ แต่ก็ยังไม่ได้สิ่งที่เขานั้นต้องการอย่างแท้จริงเพราะบางวิธีนั้นก็เป็นวิธีที่ใช้กับ multi-column design แบบธรรมดา ๆ หรือ เป็น elastic อย่างที่เขาต้องก็จริงแต่ว่ามันยังคงมี bug ในหลาย ๆ browser เขาจึงเริ่มมานั่งทบทวนด้วยตัวเองแล้วลองมองต่างมุมจากหลาย ๆ บทความที่เขาได้อ่านผ่านมาดู สิ่งที่เขาคิดได้คือ การใช้ border ให้เป็นประโยชน์… อย่างไรล่ะ? มาลองคิดตาม concept ที่เขาคิดขึ้นมาในหัวดู concept มันมีอยู่ว่า

การใช้ position ใน CSS

สวัสดีครับ หายไปนาน ต้องขอโทษเพื่อน ๆ พี่ ๆ น้อง ๆ ที่แวะเวียนเข้ามาด้วยนะครับ เข้าเรื่องกันเลยดีกว่า มีน้อง ๆ เพื่อน ๆ ใกล้ ๆ ตัวถามผมกันบ่อย ๆ ว่า property “position” กับ value ของมันแต่ละแบบนั้นทำงานกันอย่างไร เลยคิดว่าเอามาเขียนแนะนำไว้ที่นี่ด้วยเลยดีกว่า

ทีนี้เรามาทำความรู้จักกันก่อนว่าเจ้า property position เนี่ย มันมี value เป็นอะไรได้บ้าง

  1. static
  2. relative
  3. absolute
  4. fixed

ซึ่งแต่ละค่า value นั้น ก็จะให้ผลลัพธ์แตกต่างกันไป และ บาง value จะสามารถใช้ร่วมกับคำสั่ง top, bottom, left และ right ได้ เพื่อกำหนดจุดพิกัดในการแสดงผล ทีนี้ผมจะอธิบายคุณสมบัติของ value แต่ละตัวตามลำดับ ดังนี้ครับ

การเรียงลำดับข้อมูลของ xhtml ในกล่องกับ div (+section), h1-h6 (h), p และ inline elements

อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม

เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง

Double-Float Margin Bug ใน IE6

เพื่อน ๆ คงเคยกำหนดให้ 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 มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

IE With Float

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

IE With Float

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial