Post archive
Category: CSS
-
@font-face ใช้ฟ้อนท์บนเว็บไซต์ตามใจเธอ
การใช้ฟ้อนท์บนเว็บไซต์นอกเหนือจากการใช้ cufon แล้ว เรายังสามารถใช้วิธีอื่นอีกด้วย วันนี้ขอเสนอการใช้ฟ้อนท์บนเว็บไซต์อีกวิธีหนึ่ง ซึ่ง support ทุกบราวเซอร์ เร็วกว่า และง่ายกว่าเย้อะ
READ MORE -
-
-
-
สร้างตัวแบ่งหน้าสไตล์ flickr.com
นำเสนอวิธีสร้างตัวแบ่งหน้า หรือ pagination สวยๆสไตล์ flickr
READ MORE -
CSS IE Bugs แมลงร้ายในไออี 6
ปวดหัวเหลือเกินกับคุณอี(ไออี)หก ที่ไม่ยอมสูญพันธ์เสียที บางทีเสียเวลาเกือบทั้งวันเพื่อแก้ปัญหาใน CSS ที่แสดงผลผิดเพี้ยนในไออี6 ทั้งๆที่ชาวบ้าน (ชาวบ้าน ได้แก่ ไออี 7 ขึ้นไป , firefox และ safari) เขาแสดงผลได้ปกติ จะนิ่งนอนใจก็ไม่ได้ ในเมื่อสถิติการใช้งาน ie 6 ยังครองแชมป์เป็นที่หนึ่งอยู่
READ MORE -
สร้าง 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" […]
READ MORE -
เอะอะๆ ก็เฟรมเวิร์ค
ถ้าผมจำไม่ผิดแล้ว สาเหตุส่วนหนึ่งที่ทำให้นักพัฒนาเว็บ ไม่วางโครงสร้างเว็บด้วยเลเยอร์ แล้วใช้ CSS ควบคุมการแสดงผล ก็เพราะว่าการแสดงผลในเบราเซอร์แต่ละยี่ห้อไม่เหมือนกัน อย่างเช่นสมมติว่า เราจัดทำเว็บไซต์ตกแต่งหน้าตาอย่างดี ใช้ CSS ส่องกับไฟฟ้อก ช่างงดงาม แต่พอไปเปิดกับ IE6 ไหงออกมาซะเละเทะ แล้ว IE6 ก็ดันมีคนใช้เยอะเสียด้วย ทีนี้พอแต่งให้ IE6 เข้าที่เข้าทาง ไปเปิดดูกับไฟฟ้อก เอ้า… แสดงผลไม่ได้อย่างที่ตั้งใจให้เป็นอีก ทีนี้พอหลายครั้งหลายคราเข้า ปรับ IE เอียงไฟฟ้อก ปรับไฟฟ้อกเอียง IE สุดท้ายใช้ตาราง แม่ง..เลย จบ แล้วจะให้บริษัทสองบริษัทที่ผลิตเบราเซอร์มาคุยกันก็ไม่ได้ด้วยสิ เป็นคู่แข่งทางการค้ากัน เราก็ได้แต่เซ็งกะเจี๊ยวละครับพี่น้อง
READ MORE -
.note .success .warning css class
Live Demo วันนี้เอาคลาส 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 […]
READ MORE
