รายละเอียด Positioning category

Dreamweaver

ในบทก่อนเราได้ลองเขียน CSS กันแบบคร่าวกันแล้ว ในบทนี้เราจะลงรายละเอียดในส่วนของ Positioning category กัน รูปด้านล่างเป็นหน้าต่างของ Positioning category

รายละเอียดในหมวด Positioning category

ในหมวดนี้เป็นคำสั่งที่ใช้จัดวัตถุต่างๆ ที่อยู่ในหน้า เช่น ตาราง , เนื้อหา , หัวข้อ หรือจัดเนื้อหาต่างๆในตาราง อ่านเนื้อหาโดยละเอียดของเรื่องนี้ได้ในหัวข้อ CSS layout

1.Type ใช้กำหนดคุณสมบัติ ของตำแหน่งของวัตถุ มีหัวข้อย่อยดังด้านล่าง

        Absolute ถ้าเลือกค่านี้จะเป็นการกำหนดตำแหน่งของวัตถุของเราโดยอ้างอิงจาก ระยะห่างจากขอบของ browser ในแนวแกน x , y

        Fixed ถ้าเลือกค่านี้วัตถุจะอยู่ที่ตำแหน่งที่เรากำหนดให้ ตลอดไม่เปลี่ยนแปลง เมื่อเราเลื่อน Scroll bar ลงมา แต่จะใช้ได้กับ browser ใหม่ๆอย่าง IE7 , Firefox เท่านั้น

        Relative ถ้าเลือกค่าระยะห่างที่เรากำหนดจะอ้างอิงกับ ตำแหน่งที่วัตถุนั้นอยู่เท่านั้น

        Static เป็นค่ามาตราฐาน ถ้าเราไม่เลือกค่าใดเลย การแสดงผลก็จะอ้างอิงตามหลัก static

2.Visibility ควบคุมการแสดงผลของวัตถุ คุณอาจใช้คำสั่งนี้ร่วมกับ java เพื่อควบคุมการแสดงผลบนหน้าเว็บเพจ เช่น ให้แสดงผลตารางเมื่อคลิกที่ปุ่ม และไม่แสดงผลเมื่อคลิกที่ปุ่มอีกครั้ง ซึ่งมีรายละเอียดดังนี้

        Inherit กำหนดให้แสดงวัตถุนี้ ค่านี้เป็นค่ามาตราฐาน

        Visible กำหนดให้แสดงวัตถุนี้

        Hidden กำหนดให้ไม่ต้องแสดงวัตถุนี้

3.Width, Height กำหนดขนาดของวัตถุได้เช่น รูปภาพ , <div> หรือวัตถุต่างๆที่มีขนาด

4.Z-Index กำหนดตำแหน่งของวัตถุต่างๆใน แกน Z เปรียบเสมือนแผ่นใสที่ซ้อนกัน ค่าที่เราใส่คือลำดับของแผ่นใสว่าให้อยู่ด้านล่าง (1) หรือด้านบน (>1)

5.Overflow กำหนดการแสดงผลของวัตถุที่ซ้อนอยู่ในวัตถุอีกที ว่าจะให้แสดงผลมี scroll หรือไม่ เช่นข้อความที่อยู่ในกล่อง คำสั่งนี้ไม่แสดงผลในหน้าเสมือนของ dreamweaver

ตัวอย่างการใช้งาน overflow คลิกที่นี่

        Visible แสดงตัวอักษรที่อยู่ในกล่องทั้งหมด

        Hidden ซ่อนตัวอักษรที่ล้นกล่องออกมา

        Scroll ใช้ scroll bar แสดงผลตัวอักษรที่ล้นกล่อง

        Auto แสดงผลอัตโนมัติ คือถ้ามีข้อความล้นกล่องก็จะแสดง scroll ถ้าไม่มีก็จะแสดงกล่องธรรมดา

6.Placement กำหนดตำแหน่งที่ใช้ในการแสดงผลของวัตถุ ว่าจะให้ห่างจะ ด้านบน ด้านล่าง ด้านซ้าย ด้านขวา เท่าไหร่

7.Clip ใช้กำหนดขนาดของวัตถุ เป็นการ crop วัตถุ