ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ
ตามที่พรอยากให้เขียนนะครับ วันนี้ผมจะพูดถึงเจ้า Internet Explorer จากค่าย Microsucks ที่อาจจะป่วนศีรษะเราหลาย ๆ คนให้กลัดกลุ้มใจเวลาทำงาน
วันนี้ผมจะพูดเกี่ยวกับการเขียน Conditional Comment ใน Internet Explorer หรือที่เพื่อน ๆ เรียกกันว่า Rules ให้ Internet Explorer นั่นเอง
Conditional Comment นั้นจะทำงานได้ในเฉพาะ Internet Explorer เท่านั้น เป็นส่วนที่ออกแบบมาเพื่อการนี้เลยเพื่อ เป็นการสั่งให้เพิ่มคุณสมบัติพิเศษ หรืออะไรก็แล้วแต่ให้กับ Internet Explorer และ Conditional Comment นี้จะทำงานได้กับ Internet Explorer ตั้งแต่ Version 5 ขึ้นไปและอาจจะเป็นไปได้ว่าการทำงานของมันใน IE5, IE5.5 และ IE6 จะแตกต่างกันด้วย
<!--[if IE 6]>
คุณสมบัติพิเศษสำหรับ Internet Explorer เขียนที่นี่
<![endif]-->
โครงสร้างหลัก ๆ ของมันก็คือ เหมือนการเขียน comment ธรรมดาใน (X)HTML TAGs ซึ่งนั่นก็คือ การเขียนแบบนี้ “<!– –>” นั่นเอง ซึ่ง browser ตัวอื่น ๆ นั้นจะมองเห็นมันเป็น comment ธรรมดา ๆ เท่านั้นเอง และ จะอ่านข้ามไป
Internet Explorer นั้นถูกกำหนดมาให้มองเห็นและทำงานตามคำสั่งก็ต่อเมื่อได้เห็น การเขียน comment นี้ “<!– [if IE] –>” เท่านั้น เมื่อ Internet Explorer เจอมันจะมองเป็นคำสั่ง ๆ หนึ่งเหมือนเขียนกับที่มันอ่าน (X)HTML TAGs หรือ Script โปรแกรมตัวอื่น ๆ
ถ้าเราจะสร้างตารางสักอัน โดยที่ไม่ต้องใช้ table แล้วเราสามารถใช้อะไรได้บ้าง ในความเป็นจริงอย่างที่เคยบอกกล่าวกันไว้ ถ้าข้อมูลอันไหนมันแสดงผลเป็นตาราง มันก็ควรที่จะเป็น table tag แต่ ถ้ามันดันเปิดดูกับ Devices อื่นๆ แล้วมันมีปัญหา แล้วเราจะใช้มันทำไมหละ
ตอนนี้ถ้าใครใช้โทรศัพท์มือถือ หรือ พีดีเอ เข้าเว็บไทยซีเอสเอส คงเห็นหน้าตาเว็บที่เปลี่ยนไป หรือ ใครที่สั่งพิมพ์หน้าเว็บก็จะเห็น ความแตกต่างเช่นเดียวกัน ใช่เลยครับ ผมเขียน css ขึ้นมาใหม่เพื่อให้รองรับ Handheld และ Print เพราะฉะนั้นเวลาที่ผู้ใช้เปลี่ยน device ในการเข้าถึงหน้าเว็บ การแสดงผลจะต่างไปด้วย
เมา div(s) หลายคนอาจจะเคยเป็น เพราะผมก็เคยเมามาก่อน การเมา div มันไม่เหมือนการเมาเบียร์เท่าไหร่ เพราะเมาแล้วไร้ประโยชน์ แต่ได้ประสบการณ์ แต่ว่าประสบการณ์อย่างนี้ ผมไม่อยากให้เพื่อนๆ พี่ๆ น้องๆ ลุง ป้า น้า อา มาเมากะผมด้วย เพราะน่าจะแนะนำกันได้ไม่มากก็น้อย
การเปลี่ยนใจจาก table มา div ก็เหมือนจะรู้จักแต่ div เท่านั้นที่ผมจำได้ในตอนแรกๆ ที่ผมเขียน css+xhtml ผม div กระจายวายป่วงมากๆ เช่น แค่การทำตัวหนังสือใหญ่ๆ เป็น header ผมก็จะใช้
Floatting หรือการจับ element(s) ให้อยู่ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง ด้วยคำสั่ง float: left;, float: right; และ float: none;
ในการทำเว็บแบบ tableless นั่น การใช้ float เพื่อควบคุม div tag เป็นเรื่องสำคัญอย่างมาก ในการวางเลเอ๊าท์ให้กับหน้าเว็บเพจ เช่นการวางหน้าเว็บแบบ 3 คอลัมน์ โดยการสั่ง div tags เป็น float: left; ทั้งหมด ซึ่งถ้าหากเราต้องการจัดกลางหน้าเว็บ ด้วยการให้ div tag ซึ่งเป็น ตัวหลัก ครอบทั้ง 3 อันนี้ไว้ ต้องให้ค่า div หลักอันนั้นมี float เป็น none เป็นต้น
มาดูตัวอย่างการใช้ floats กับ div tags กันครับ ซึ่งมีข้อแม้เล็กๆ น้อยๆ ว่า กรณีที่ท่านได้ให้ค่า float ต่อ element(s) ใดๆ แล้ว ควร กำหนดความกว้างให้ element(s) เข้าไปด้วยนั่นเองครับ