Posts Tagged ‘CSS’

2 หน้า12
02
February
6 Comments

CSS IE Bugs แมลงร้ายในไออี 6

เขียนโดย nevikup

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

26
July
3 Comments

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

เขียนโดย platoosom

ผมอยากจะให้ดูภาพก่อน เพราะมันคือที่มาของบทความนี้

ในภาพ ผมใช้ 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 แนวนอน*/
}

ผลลัพธ์มันก็จะออกมาดังในรูปภาพครับ

14
July
No Comments

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

เขียนโดย platoosom

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

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

12
June
No Comments

.note .success .warning css class

เขียนโดย platoosom

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 class="note">Class Note</p>
<p class="success">Class success</p>
<p class="warning">Class warning</p>
<p></p>
</body>
</html>
28
April
2 Comments

สร้าง mouse over image caption ด้วย CSS ล้วนๆ

เขียนโดย platoosom

คลิกที่นี่เพื่อดู 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>
2 หน้า12