Tag Archives: CSS

Dec. 10
22

สร้างตัวแบ่งหน้าสไตล์ flickr.com

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

นำเสนอวิธีสร้างตัวแบ่งหน้า หรือ pagination สวยๆสไตล์ flickr

Posted in CSS | Also tagged , , , | 2 Comments
Sep. 10
10

Firefox CSS refresh โหลดใหม่เฉพาะ CSS ก็พอ

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

CSS refresh 2.0 ปลักอินตัวนี้เหมาะมากสำหรับผู้พัฒนาเว็บครับ

Posted in Firefox | Also tagged , , | 1 Comment
Mar. 10
19

เปลี่ยนเลย์เอ้าเว็บด้วย jQuery+CSS

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

วันนี้ผมขอแนะนำบทความที่ฝรั่งเขียนไว้ เห็นว่าเป็นบทความที่น่าสนใจทีเดียว เนื้อหาเกี่ยวกับการใช้ jQuery เปลี่ยนเลย์เอ้าหน้าเว็บ น่าสนใจทีเดียวครับ

Posted in jQuery | Also tagged | 2 Comments
Feb. 10
2

ปวดหัวเหลือเกินกับคุณอี(ไออี)หก ที่ไม่ยอมสูญพันธ์เสียที บางทีเสียเวลาเกือบทั้งวันเพื่อแก้ปัญหาใน CSS ที่แสดงผลผิดเพี้ยนในไออี6 ทั้งๆที่ชาวบ้าน (ชาวบ้าน ได้แก่ ไออี 7 ขึ้นไป , firefox และ safari) เขาแสดงผลได้ปกติ จะนิ่งนอนใจก็ไม่ได้ ในเมื่อสถิติการใช้งาน ie 6 ยังครองแชมป์เป็นที่หนึ่งอยู่

Posted in CSS | Also tagged , , | 15 Comments
Jul. 09
26

สร้าง listbox มีปุ่ม radio อยู่ข้างในด้วยมือคุณเอง

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

ผมอยากจะให้ดูภาพก่อน เพราะมันคือที่มาของบทความนี้ ในภาพ ผมใช้ 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" [...]

Posted in CSS | Tagged | 3 Comments
Jul. 09
14

เอะอะๆ ก็เฟรมเวิร์ค

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

ถ้าผมจำไม่ผิดแล้ว สาเหตุส่วนหนึ่งที่ทำให้นักพัฒนาเว็บ ไม่วางโครงสร้างเว็บด้วยเลเยอร์ แล้วใช้ CSS ควบคุมการแสดงผล ก็เพราะว่าการแสดงผลในเบราเซอร์แต่ละยี่ห้อไม่เหมือนกัน อย่างเช่นสมมติว่า เราจัดทำเว็บไซต์ตกแต่งหน้าตาอย่างดี ใช้ CSS ส่องกับไฟฟ้อก ช่างงดงาม แต่พอไปเปิดกับ IE6 ไหงออกมาซะเละเทะ แล้ว IE6 ก็ดันมีคนใช้เยอะเสียด้วย ทีนี้พอแต่งให้ IE6 เข้าที่เข้าทาง ไปเปิดดูกับไฟฟ้อก เอ้า… แสดงผลไม่ได้อย่างที่ตั้งใจให้เป็นอีก ทีนี้พอหลายครั้งหลายคราเข้า ปรับ IE เอียงไฟฟ้อก ปรับไฟฟ้อกเอียง IE สุดท้ายใช้ตาราง แม่ง..เลย จบ แล้วจะให้บริษัทสองบริษัทที่ผลิตเบราเซอร์มาคุยกันก็ไม่ได้ด้วยสิ เป็นคู่แข่งทางการค้ากัน เราก็ได้แต่เซ็งกะเจี๊ยวละครับพี่น้อง

Posted in CSS | Also tagged | Leave a comment
Jun. 09
12

.note .success .warning css class

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

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 [...]

Posted in CSS | Tagged | Leave a comment