ธีมงามๆ ของเวิร์ดเพรส
สิ่งที่ควรทำและไม่ควรทำในการออกแบบเว็บ
หลายอันน่าสนใจ
WebD&D offers free top-notch tips, tricks, best practices and resources for your reading pleasure. It is brought to you by web enthusiasts who enjoy their contribution in making the WWW a better place.
ระบบ Search คูลๆ ทำจาก flash
Hover Effects in Web Design: Best Practices and Examples
ลูปและเสียง
คาถา CSS
ทำ CSS มาพอสมควร ควรร่างคาถาประจำกายไว้หน่อยดีกว่า
1. โฟลทแล้วอย่าแพด
Float ซ้าย ขวา อย่าใส่ padding นะ IE6 จะคำนวณไม่เหมือนชาวบ้านเค้า ทำให้ระยะพังได้
2. โฟลทแล้วต้องวิด
มี float ต้องมี width ด้วย ไม่งั้น IE6 มึน ส่วน Browser อื่นๆ ก็จะงงได้ เพราะมันต้องคิดว่าจะกว้างเท่าไหร่ดี
3. วิดแล้วอย่าแพด/แพดแล้วอย่าวิด
IE6 เมิงนี่มันเรื่องมากจริงๆ เพราะคิดระยะไม่เหมือนเค้า เช่น padding ซ้าย 10px ขวา 10px กว้าง 100px ใครๆ เค้าก็รู้กันว่า แปลว่าขอบเขตจริงๆ คือ 120px แต่พื้นที่แสดงด้านในแค่ 100px ไอ้ IE6 มันดันคิดว่า ขอบเขตจริงๆ คือ 100px และพื้นที่แสดงด้านใน 80px!!!
วิธีแก้มี 2 แบบ คือ
- ใส่ _width สำหรับพี่ IE6 เค้าโดยเฉพาะ บวกเลขใหม่ดีๆ ละกัน (คนอื่นเค้าไม่อ่านค่า แต่ IE ดันนึกว่า _width = width) ใส่บรรทัดต่อมานะ เพราะสำหรับ CSS ค่าที่ระบุใหม่ ทับค่าที่ระบุเก่า
- ใส่ div 2 ชั้น ชั้นนอก “วิดแล้วอย่าแพด” ชั้นใน “แพดแล้วอย่าวิด”
4. โฟลทแล้วต้องอินลาย
สั่ง float แล้ว IE6 จะทำพฤติกรรมประหลาด ให้ display: inline ไว้ด้วย ผิดหลัก แต่แสดงแล้วถูกทุก Browser
5. รีเซ็ท กับ เคลียร์ฟิกและเคลียร์พร้อมใช้
ทำไว้ส่วนเริ่มซะ รีเซ็ทเพื่อความเสมอภาคก่อน ส่วน clearfix และ clear ใส่ไว้ด้วย จะได้เอาไปใช้ในที่ต่างๆ ได้ ดังนั้น เอานี่ไปเป็นตัวเริ่มละกัน style.css (ก๊อบปี้ไปมาผสมจากหลายส่วนของอินเตอร์เน็ท)
6. Text Area กว้างสุด 97% พอ!
ไม่ค่อยเข้าใจนัก แต่คร่าวๆ คือ IE6 มันจะคิด Text Area ที่กว้างเกิน 97% เป็นกว้างเกินไป เกิน 100% อีก ทำให้ทุกอย่างถูกดันและเพี้ยนได้
ดังนั้น Text Area ใน ฟอร์มจึงควรเป็น
#test-form textarea {width: 97%; padding: 2px;}