บทความในหมวด ‘CSS’
CSS IE Bugs แมลงร้ายในไออี 6
ปวดหัวเหลือเกินกับคุณอี(ไออี)หก ที่ไม่ยอมสูญพันธ์เสียที บางทีเสียเวลาเกือบทั้งวันเพื่อแก้ปัญหาใน CSS ที่แสดงผลผิดเพี้ยนในไออี6 ทั้งๆที่ชาวบ้าน (ชาวบ้าน ได้แก่ ไออี 7 ขึ้นไป , firefox และ safari) เขาแสดงผลได้ปกติ จะนิ่งนอนใจก็ไม่ได้ ในเมื่อสถิติการใช้งาน ie 6 ยังครองแชมป์เป็นที่หนึ่งอยู่
สร้าง listbox มีปุ่ม radio อยู่ข้างในด้วยมือคุณเอง
ผมอยากจะให้ดูภาพก่อน เพราะมันคือที่มาของบทความนี้
ในภาพ ผมใช้ div 2 อัน ใส่ข้อมูลที่เป็นตารางอันนึง แล้วก็ใส่ฟอร์มอีกอันนึง ตอนแรกในฟอร์มตรงช่องระบุอุปกรณ์ ผมใช้ dropdown list แล้วปัญหามันเกิด เวลารายการที่มีชื่อมันยาวมากๆ ทำให้ dropdown list มันกว้างเกินกว่า div ทำให้ div มันปัดไปอยู่ข้างล่าง div ที่เก็บตาราง ผมก็เลยเปลี่ยนมันเสียใหม่ ให้เป็นดังในภาพ ดูกันชัดๆอีกภาพ
ตรงช่องอุปกรณ์น่ะ ผมใช้ div ครอบตัว <input type=”radio” name=”radio” id=”radio” value=”radio” /> ไว้ แ่ล้วก็เซ็ตเส้นขอบและความสูงของ div แล้วก็กำหนดว่า ถ้าข้อมูลมันมากกว่าความสูงของ div ให้มันมี scroll bar มาเพื่อให้เลื่อนได้ มาดูโค้ดกันครับว่าทำยังไง
HTML :
<div class="option_panel"> <input name="accessory_id" type="radio" value="159" />กรอบที่จับประตูโครเมี่ยม <input name="accessory_id" type="radio" value="163" />กรอบป้ายทะเบียน <input name="accessory_id" type="radio" value="239" />กรอบรองที่จับประตูโครเมี่ยม <input name="accessory_id" type="radio" value="250" />กรอบรองที่จับประตูโครเมี่ยม(B,C-Cab) <input name="accessory_id" type="radio" value="251" />กรอบรองที่จับประตูโครเมี่ยม(D-Cab) <input name="accessory_id" type="radio" value="136" />กระจกมองมุม ( Beige ) <input name="accessory_id" type="radio" value="134" />กระจกมองมุม ( Black )</div>
CSS :
input , select , .option_panel { border-left:1px solid #a8a8a8; border-top:1px solid #a8a8a8; border-right:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; -moz-border-radius:3px;margin:3px;/* สำหรับไฟฟ้อกโดยเฉพาะ*/ } .option_panel{ height:250px; overflow:scroll; overflow-x:hidden;/* ไม่ให้แสดง scroll bar แนวนอน*/ }
ผลลัพธ์มันก็จะออกมาดังในรูปภาพครับ
เอะอะๆ ก็เฟรมเวิร์ค
ถ้าผมจำไม่ผิดแล้ว สาเหตุส่วนหนึ่งที่ทำให้นักพัฒนาเว็บ ไม่วางโครงสร้างเว็บด้วยเลเยอร์ แล้วใช้ CSS ควบคุมการแสดงผล ก็เพราะว่าการแสดงผลในเบราเซอร์แต่ละยี่ห้อไม่เหมือนกัน อย่างเช่นสมมติว่า เราจัดทำเว็บไซต์ตกแต่งหน้าตาอย่างดี ใช้ CSS ส่องกับไฟฟ้อก ช่างงดงาม แต่พอไปเปิดกับ IE6 ไหงออกมาซะเละเทะ แล้ว IE6 ก็ดันมีคนใช้เยอะเสียด้วย
ทีนี้พอแต่งให้ IE6 เข้าที่เข้าทาง ไปเปิดดูกับไฟฟ้อก เอ้า… แสดงผลไม่ได้อย่างที่ตั้งใจให้เป็นอีก ทีนี้พอหลายครั้งหลายคราเข้า ปรับ IE เอียงไฟฟ้อก ปรับไฟฟ้อกเอียง IE สุดท้ายใช้ตาราง แม่ง..เลย จบ แล้วจะให้บริษัทสองบริษัทที่ผลิตเบราเซอร์มาคุยกันก็ไม่ได้ด้วยสิ เป็นคู่แข่งทางการค้ากัน เราก็ได้แต่เซ็งกะเจี๊ยวละครับพี่น้อง
.note .success .warning css class
วันนี้เอาคลาส css ที่ผมใช้อยู่ประจำมาแจกครับ ไว้สำหรับแสดงข้อความให้โดดเด่น เห็นชัด ลองเอาไปประยุกต์ใช้ดูครับ ผลลัพธ์ของคลาสตัวนี้ ก็ตามภาพครับ
โค้ด
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .note, .success, .warning { padding:.8em; margin-bottom:1em; border:2px solid #ddd; } .note { background:#FFF6BF; color:#514721; border-color:#FFD324; } .success { background:#E6EFC2; color:#264409; border-color:#C6D880; } .warning { background:#FBE3E4; color:#8a1f11; border-color:#FBC2C4; } </style> </head> <body> <p class="note">Class Note</p> <p class="success">Class success</p> <p class="warning">Class warning</p> <p></p> </body> </html>
สร้าง mouse over image caption ด้วย CSS ล้วนๆ
หลังจากที่ท่านได้ดู Demo ผมเชื่อว่าท่านจะต้องคุ้นแน่นอน การทำงานในลักษณะนี้ แต่ที่ท่านเห็นๆมา เขาจะใช้ javascript เป็นตัวสร้าง หรืออาจจะเป็น jQuery แต่สำหรับบทความครั้งนี้ ไม่ใช่เลย บทความนี้จะใช้ CSS เท่านั้น แต่จะทำงานเหมือน javascript แป๊ะๆ มาดูกันเลยครับ ว่าทำกันอย่างไร
HTML เริ่มต้นที่โครงสร้างหลักกันก่อน
<div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> </div>
