บทความที่เกี่ยวข้องกับ: css

เพิ่มลูกเล่นให้กับเมนูบาร์ด้านบนของ imooh.com

วันนี้มาแบ่งปันการเพิ่มลูกเล่นให้กับเมนูด้านบนของเว็บกัน ^^ จริงๆ แล้วก็ชอบเป็นการส่วนตัวด้วยแหละ เพราะถ้าเราใช้ position: fixed ให้มันอยู่ด้านบนเลยแล้วมันดูขัดๆ ตา ก็อย่างว่าชอบใครชอบมันเนาะ เผื่อมีเพือนๆ ชอบเหมือนกัน 

CSS Font-Size: ทำไมต้องเป็น font-size: 62.5%

“Ems” (em) เป็นหน่วยที่ใช้เทียบกับขนาด font-size ของ body หรือถ้าไม่มีการกำหนด font-size ให้กับ body ก็จะเป็นค่าเริ่มต้น (16px) และสามารถย่อหรือขยายได้ (scalable) เช่น เราใช้ body {font-size: 12px} แสดงว่าถ้าเรากำหนด font-size เป็น 1em = 12px ดังนั้นถ้าเรากำหนด font-size เป็น 2em ก็จะเท่ากับ 24px หรือ .5em ก็ควรจะเท่ากับ 6px ครับ

การใช้งาน CSS :nth-child()

อีกหนึ่ง pseudo-selector ของ CSS ที่ผมดูแล้วแหล่มมากๆ ก็คือเจ้า nth-child() นี่แหละครับ ของดีจะเก็บไว้คนเดียวมันจะไปมันส์~ อะไรจริงไหม ^^ เพื่อนๆ บางคนอาจจะเคยเห็นผ่านตามาบ้าง

วิธีการสร้างกรอบรูปสวยๆ ด้วย css

เพื่อนๆ คงจะเคยทำกรอบรูปที่แสดงบนเว็บที่ต้องใช้ Photoshop ช่วยในการสร้างเงาของกรอบรูป หรือทำให้กรอบรูปเป็นมุมมน วันนี้ผมมีตัวอย่างในการทำกรอบรูปดังกล่าวโดยที่ไม่ต้องพึ่ง Photoshop เลยครับ แต่เราก็ต้องมีตัวช่วยทดแทนหน่อยนั่นก็คือ ต้องพี่ง css ครับ ซึ่งการใช้ css ในการสร้างกรอบรูปนั้นจะช่วยให้เว็บเราเร็วขึ้นด้วย เพราะไม่ต้องไปเสียเวลาโหลดรูปภาพมาทำเป็นกรอบ

เล็กๆ น้อยๆ เกี่ยวกับการกำหนดค่า css width ของ label

เล็กๆ น้อยๆ เกี่่ยวกับการกำหนดความกว้างให้กับแท็ก label (<label>) เพื่อนๆ อาจพยายามกำหนดความกว้างให้กับเจ้าแท็ก label นี่นานทีเดียว ทำยังไงมันก็ไม่ยอมกว้างเท่าที่ผมต้องการ ประมาณว่า กำหนดให้เท่าไหร่มันก็อยู่ของมันเหมือนเดิมไม่ยืดไม่หดอะไรเลย ก็เลยเอาวิธีการเล็กๆ น้อยๆ นี้มาฝากครับ

การลบ whitespace รอบๆ รูปภาพในตาราง

อ่านหัวเรื่องแล้วอย่างงนะครับ (ตัวเองแอบงงนิดๆ ฮ่าๆ) ปัญหามีอยู่ว่า ถ้าเราใส่แท็ก img เข้าไปในแท็ก table มันจะเกิด whitespace ขึ้นมาที่ใต้ภาพ เมื่อแสดงผลด้วย IE ซึ่งเราสามารถลบ whitespace นี้ออกไปได้ด้วยการนำเอา css เข้ามาช่วยครับ ซึ่งเราอาจจะเขียนเป็น class ไว้ในไฟล์ css ประมาณนี้ครับ

การวาง layout ของเว็บไซด์ให้อยู่ตรงกลางหน้าด้วย css

วันนี้มาพูดถึงปัญหาอีกอย่างหนึ่งสำหรับคนที่พึ่งเริ่มออกแบบเว็บไซด์กันครับ ซึ่งก็คือ การวางเนื้อหาให้อยู่ตรงกลางหน้านั่นเอง ปัญหานี้จะเกิดกับคนที่ต้องการกำหนดความกว้างของเว็บไซด์ไว้ตายตัวครับ(fixed) บางคนพอปรับให้อยู่กลางหน้าได้แล้ว (ดูด้วย IE) โอ้โหอยู่ตรงกลางสวยงามครับ แต่พอไปดูด้วย firefox เอาแล้วไงงานเข้าจนได้ ทำไม๊ทำไมไปชิดซ้ายกันหมดเลยล่ะค๊าบบบ – -a ผมก็เลยนำเอาเทคนิคการจัดการกับ layout ให้อยู่กลางหน้ามาฝาก พร่ำมานานแล้วก็เริ่มกันเลยครับ

การสร้างเมนูแนวนอนโดยไม่ต้องใช้แท็ก table

วันนี้ผมก็เอาวิธีการทำเมนูแนวนอนหรือ horizontal menu ด้วย css อย่างง่ายมาฝากครับ โดยเราจะใช้แท็ก ul ในการสร้างครับ อ้าวแล้วทำไม่ต้องใช้แท็กนี้ด้วยล่ะ จะเห็นว่าถ้ามีการใช้แท็ก table จะต้องมีการเขียนโค๊ดเยอะจะทำให้ขนาดของไฟล์เราใหญ่และใช้เวลาในการโหลดนานครับ ถ้าเราสังเกตดี ๆ จะเห็นว่า บริษัทที่รับออกแบบเว็บไซต์จะมีการอ้างด้วยว่า ไม่ได้ใช้แท็ก table ในการสร้าง layout เหตุผลที่ผมคิดก็เท่าที่ได้กล่าวมานั่นแหละครับ ถ้าใครคิดออกว่าเพราะไรอีกก็อย่าลืมเอามาแลกเปลี่ยนกันนะครับ เอาล่ะ บ่นมานานแล้ว งั้นเราก็เริ่มกันเลยแล้วกันนะครับ ก่อนอื่นเราก็ต้องสร้างส่วนที่เป็น html ก่อนนะครับ