Post archive
Tag: CSS
-
สร้าง 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 -
สร้าง mouse over image caption ด้วย CSS ล้วนๆ
คลิกที่นี่เพื่อดู Online Demo หลังจากที่ท่านได้ดู 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><div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> […]
READ MORE -
แหล่งข้อมูลความรู้เกี่ยวกับการทำเว็บ
ในปัจจุบันเว็บไซต์ต่างๆ เกิดขึ้นอย่างกะดอกเห็ด การจะหาเว็บสักเว็บมาประดับกล่องดวงใจนั้น ทำท่าว่าจะยากขึ้นทุกที ผมเชื่อว่าทุกคนจะต้องมีเว็บที่ตัวเอง อ่านประจำอยู่ อย่างน้อยคนละ 1 เว็บ บางคน วันไหนไม่ได้เข้าอ่านกระทู้ราชดำเนินพันธิพแล้วไซร้ นกเขาไม่ขันเอาซะดื้อๆ หรือบางคนไม่ได้เข้าเว็บกระปุก สนุกแล้ว ทำหน้าอย่างกะประจำเดือน ประจำปี ไม่มาเป็นศรรตวรรษ ผมเองก็มีเว็บที่ใช้เป็นแหล่งข้อมูล ไว้อ่านเพิ่มเติมความรู้ เพิ่มเติมประสบการ อยู่หลายเว็บ เลยเอามาแนะนำกัน เผื่อว่าท่านจะสนใจสักเว็บ แชร์ๆกันครับ เดี๋ยวนี้โลกทั้งโลกต้องแชร์กัน เริ่มตั้งแต่หนังโป๊ะเป็นอันดับหนึ่ง(ฮา) พูดมากเสียเวลา เอากันเลยดีกว่า
READ MORE -
Firefox’s Plugins ที่ผมเลือกใช้
ขอยืมหัวข้อมาจากเว็บ http://www.jquerytips.com/2009/02/04/firefox-plugins-for-developer/ หน่อยเถอะ และก็ถือโอกาสแนะนำเว็บที่ยอดเยี่ยมเว็บหนึ่ง ไปในตัวด้วยเลย ผมเองเข้าใจคำว่า Jquery มาจากที่นี่แหละครับ ก็ขอขอบคุณท่านเจ้าของเว็บไว้ ณ โอกาส นี้ด้วย ผมเองก็มีปลั๊กอินของ จิ้งจอกเพลิง ที่จะต้องติดตั้งประจำอยู่ด้วยหลายตัวเหมือนกัน ก็ขอแนะนำ เผื่อท่านสนใจ จะได้ไม่ต้องไปควานหาให้ลำบาก เพราะปลั๊กอินมันเย้อะ
READ MORE -
รวมลิ้งก์ความรู้ที่เกี่ยวข้องกับการเขียน PHP
ข้อมูลนี้ผมก้อปปี้มาจากเว็บไซต์ http://bitfilm.net/2008/01/01/top-php-mysql-and-css-resources/ ต้องขอขอบคุณ ผู้เป็นเจ้าของต้นฉบับที่ได้รวบรวมลิ้งก์อันเป็นประโยชน์ ตอนแรกว่าจะแค่ทำลิ้งก์ให้คุณๆ ได้เข้าไปที่เว็บเขา แต่เมื่อมองในแง่ของความ สะดวกแล้ว มันไม่สะดวก จึงก้อปปี้เนื้อหาทั้งหน้ามา บทความนี้ผมเห็นว่ามีประโยชน์มาก รวบรวมลิ้งก์สิ่งที่เกี่ยวข้องกับการเขียน PHP
READ MORE -
วิธีเปลี่ยนเมนูListธรรมดาๆให้น่าสนใจ
โดยปกติแล้ว ใน HTML เมื่อเราใช้ ลิสต์ แบบไม่เรียงลำดับ <ul> ผลลัพธ์ที่แสดงออกมา จะมีวงกลมดำๆ อยู่ด้านหน้า เราสามารถเปลี่ยนวงกลมดำๆ เป็นภาพได้ด้วย css ดูโค้ดนะครับ 1 2 3 4 5 6 7 8 9 10 <style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> </style> <ul> <li class="list_style">หัวข้อที่ 1</li> <li class="list_style">หัวข้อที่ 2</li> </ul><style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> […]
READ MORE
