ตอนนี้ถ้าใครใช้โทรศัพท์มือถือ หรือ พีดีเอ เข้าเว็บไทยซีเอสเอส คงเห็นหน้าตาเว็บที่เปลี่ยนไป หรือ ใครที่สั่งพิมพ์หน้าเว็บก็จะเห็น ความแตกต่างเช่นเดียวกัน ใช่เลยครับ ผมเขียน css ขึ้นมาใหม่เพื่อให้รองรับ Handheld และ Print เพราะฉะนั้นเวลาที่ผู้ใช้เปลี่ยน device ในการเข้าถึงหน้าเว็บ การแสดงผลจะต่างไปด้วย
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) เข้าไปด้วยนั่นเองครับ
ความเคยชินที่ได้ทำสิ่งใดสิ่งหนึ่งมาช้านาน จากยาก จนกลายเป็นง่าย และไม่อยากเปลี่ยนไปทำรูปแบบอื่นอีก อาการอย่างนี้ บางครั้งมันอาจจะทำให้เราท้อแท้ใจ เมื่อเจอของใหม่
เหมือนเวลาที่ท่านเคยทำอะไรบางอย่างมานาน ทำแล้วทำอีก ทำแล้วทำอีก แล้วอยู่ๆ วันหนึงก็มี เงาลึกลับมาบอกท่านว่า ที่ท่านกำลังทำนั้น มันผิด มันมีทางที่ถูกต้อง ท่านควรลองศึกษาทางใหม่ดูบ้าง
อาการแรกที่ท่านอาจจะรู้สึกและต้องทำ แต่อาจจะทำไม่ได้ คือ ทำใจ ทำใจให้ยอมรับและปรับเปลี่ยน
การเรียนรู้สิ่งใหม่มันไม่ใช่เรื่องยาก มากมายอะไร แต่การบังคับจิตใจตัวเองให้ยอมรับนั้น มันยากยิ่งกว่าต่างหาก
ย้อนกลับไป เมื่อหลายปีก่อน ตอนที่ผมเพิ่งเริ่มทำเว็บใหม่ๆ เครื่องมือที่ใช้ก่อร่างสร้างเว็บก็ไม่ใช่ใครอื่นใด คือ ดรีมวีฟเว่อร์ 3 นั่นเอง
ul, li ถ้าถูกควบคุมด้วย css ตามแนวนอนแล้ว จะเป็นยังไง ไปดูกันเลยครับ
ผมปรับปรุงรูปแบบการแสดงผลของ โค้ดใหม่ครับ เพื่อง่ายแก่การนำไปศึกษาต่อของ ท่านเอง
การเขียนเว็บ แบบจัดให้อยู่ตรงกลาง 1 คอลัมน์ ไม่มีอะไรมากครับ แค่กำหนดความกว้างให้กับ div แล้วสั่ง margin: 0 auto; ก็สามารถทำได้เลย
การเริ่มทำความเข้าใจเรื่อง box model นั่นไม่ใช่เรื่องยากครับ และถ้าเราเข้าใจถูกต้องตั้งแต่ต้นแล้ว ขั้นสูงอย่างการวางเลเอาท์ ก็จะไม่เป็นปัญหาเลย
อื่นใดสำหรับ box model แล้วก็คือ การทำความเข้าใจหลักการ ของชิ้นหนึ่งๆ ที่แสดงลักษณะออกมาเป็นกล่อง ที่โดนเราระบุ ความกว้าง ความสูงให้นั่นเอง เช่น tag div ถ้าเราจะกำหนดความกว้างความสูงให้กับ div หนึ่งๆ css จะรวมค่าความกว้างของทุกอย่างของ class นั้นๆ เข้าไปด้วยกันเลย ไม่ว่าจะเป็น พื้นที่สำหรับข้อมูล padding margin และ border