วันนี้มาแบ่งปันการเพิ่มลูกเล่นให้กับเมนูด้านบนของเว็บกัน ^^ จริงๆ แล้วก็ชอบเป็นการส่วนตัวด้วยแหละ เพราะถ้าเราใช้ position: fixed ให้มันอยู่ด้านบนเลยแล้วมันดูขัดๆ ตา ก็อย่างว่าชอบใครชอบมันเนาะ เผื่อมีเพือนๆ ชอบเหมือนกัน
“Ems” (em) เป็นหน่วยที่ใช้เทียบกับขนาด font-size ของ body หรือถ้าไม่มีการกำหนด font-size ให้กับ body ก็จะเป็นค่าเริ่มต้น (16px) และสามารถย่อหรือขยายได้ (scalable) เช่น เราใช้ body {font-size: 12px} แสดงว่าถ้าเรากำหนด font-size เป็น 1em = 12px ดังนั้นถ้าเรากำหนด font-size เป็น 2em ก็จะเท่ากับ 24px หรือ .5em ก็ควรจะเท่ากับ 6px ครับ
อีกหนึ่ง pseudo-selector ของ CSS ที่ผมดูแล้วแหล่มมากๆ ก็คือเจ้า nth-child() นี่แหละครับ ของดีจะเก็บไว้คนเดียวมันจะไปมันส์~ อะไรจริงไหม ^^ เพื่อนๆ บางคนอาจจะเคยเห็นผ่านตามาบ้าง
เพื่อนๆ คงจะเคยทำกรอบรูปที่แสดงบนเว็บที่ต้องใช้ Photoshop ช่วยในการสร้างเงาของกรอบรูป หรือทำให้กรอบรูปเป็นมุมมน วันนี้ผมมีตัวอย่างในการทำกรอบรูปดังกล่าวโดยที่ไม่ต้องพึ่ง Photoshop เลยครับ แต่เราก็ต้องมีตัวช่วยทดแทนหน่อยนั่นก็คือ ต้องพี่ง css ครับ ซึ่งการใช้ css ในการสร้างกรอบรูปนั้นจะช่วยให้เว็บเราเร็วขึ้นด้วย เพราะไม่ต้องไปเสียเวลาโหลดรูปภาพมาทำเป็นกรอบ
เล็กๆ น้อยๆ เกี่่ยวกับการกำหนดความกว้างให้กับแท็ก label (<label>) เพื่อนๆ อาจพยายามกำหนดความกว้างให้กับเจ้าแท็ก label นี่นานทีเดียว ทำยังไงมันก็ไม่ยอมกว้างเท่าที่ผมต้องการ ประมาณว่า กำหนดให้เท่าไหร่มันก็อยู่ของมันเหมือนเดิมไม่ยืดไม่หดอะไรเลย ก็เลยเอาวิธีการเล็กๆ น้อยๆ นี้มาฝากครับ
อ่านหัวเรื่องแล้วอย่างงนะครับ (ตัวเองแอบงงนิดๆ ฮ่าๆ) ปัญหามีอยู่ว่า ถ้าเราใส่แท็ก img เข้าไปในแท็ก table มันจะเกิด whitespace ขึ้นมาที่ใต้ภาพ เมื่อแสดงผลด้วย IE ซึ่งเราสามารถลบ whitespace นี้ออกไปได้ด้วยการนำเอา css เข้ามาช่วยครับ ซึ่งเราอาจจะเขียนเป็น class ไว้ในไฟล์ css ประมาณนี้ครับ
วันนี้มาพูดถึงปัญหาอีกอย่างหนึ่งสำหรับคนที่พึ่งเริ่มออกแบบเว็บไซด์กันครับ ซึ่งก็คือ การวางเนื้อหาให้อยู่ตรงกลางหน้านั่นเอง ปัญหานี้จะเกิดกับคนที่ต้องการกำหนดความกว้างของเว็บไซด์ไว้ตายตัวครับ(fixed) บางคนพอปรับให้อยู่กลางหน้าได้แล้ว (ดูด้วย IE) โอ้โหอยู่ตรงกลางสวยงามครับ แต่พอไปดูด้วย firefox เอาแล้วไงงานเข้าจนได้ ทำไม๊ทำไมไปชิดซ้ายกันหมดเลยล่ะค๊าบบบ – -a ผมก็เลยนำเอาเทคนิคการจัดการกับ layout ให้อยู่กลางหน้ามาฝาก พร่ำมานานแล้วก็เริ่มกันเลยครับ
วันนี้ผมก็เอาวิธีการทำเมนูแนวนอนหรือ horizontal menu ด้วย css อย่างง่ายมาฝากครับ โดยเราจะใช้แท็ก ul ในการสร้างครับ อ้าวแล้วทำไม่ต้องใช้แท็กนี้ด้วยล่ะ จะเห็นว่าถ้ามีการใช้แท็ก table จะต้องมีการเขียนโค๊ดเยอะจะทำให้ขนาดของไฟล์เราใหญ่และใช้เวลาในการโหลดนานครับ ถ้าเราสังเกตดี ๆ จะเห็นว่า บริษัทที่รับออกแบบเว็บไซต์จะมีการอ้างด้วยว่า ไม่ได้ใช้แท็ก table ในการสร้าง layout เหตุผลที่ผมคิดก็เท่าที่ได้กล่าวมานั่นแหละครับ ถ้าใครคิดออกว่าเพราะไรอีกก็อย่าลืมเอามาแลกเปลี่ยนกันนะครับ เอาล่ะ บ่นมานานแล้ว งั้นเราก็เริ่มกันเลยแล้วกันนะครับ ก่อนอื่นเราก็ต้องสร้างส่วนที่เป็น html ก่อนนะครับ