Sitthiphorn Anthawonksa

อ้าว เริ่มกันเลยดีกว่าครับ กับส่วนของเรื่องราวเล็กๆ น้อยๆ ทั้งทิป เทคนิค วันนี้มาเริ่มกันที่ การทำเมนู แบบแนวตั้งกันก่อนครับ

ลักษณะหลายๆ อย่างในโค้ดตัวอย่างข้างล่างนี้ ถ้าหากท่านใดสงสัย ไม่เข้าใจ ก็ โพสต์ ถามเอาไว้ที่ เว็บบอร์ดได้นะครับ เดี๋ยวจะมาอธิบายและตอบคำถามให้อีกที ที่เลือกเว็บบอร์ด ก็เพราะ จะได้มีโอกาสแลกเปลี่ยนกันได้หลายๆ คน

ในเมนู ตอนนี้ จะเป็นเพียงการทำเมนูแบบธรรมดาเท่านั้น ยังไม่ได้เพิ่มเติมสีสัน ด้วยแบ็คกราวน์ที่เป็นรูปภาพ ใดๆ ตอนต่อไปคงมีโอกาสได้นำเสนอ และถือเป็นโอกาสที่จะให้ ทุกท่านนำไปประยุกต์ แก้ไขกันเองตามสะดวกครับ

เคยสงสัยไหมครับว่า ทำไม px และ em จึงต้องมีพร้อมๆ กัน

ซึ่ง em ในที่นี้คือหน่วยของความกว้าง ความสูง นะครับ ไม่ใช่ em ที่มักใช้คู่ๆ ไปกับ span อย่าเพิ่งสับสน

ทำไมต้องมี em ??

เคยลองมั้ยครับ เวลาที่เราเข้าเว็บบางเว็บแล้วตัวหนังสือมันเล็ก แล้วเราอยากให้มันใหญ่ขึ้น แต่พอเราเข้าไปที่ Text Size ของ IE แล้วขยายยังไงมันก็ไม่ขึ้น แต่กลับบราวเซอร์ อื่นๆ มันก็ขยายตามความต้องการของเรา หรือจะย่อตัวหนังสือ มันก็ลดลงตามความต้องการ นั่นแหละครับ หน้าเพจนั้น ได้ถูกกำหนดขนาดตัวหนังสือด้วย px ไว้เรียบร้อยแล้ว

css กับการจัดการตัวหนังสือ มึน งง และ อ้าวเฮ้ย อาจจะเกิดขึ้นกับหลายๆ คน เมื่อได้เห็นลักษณะของการเขียนบทความของผม เพราะมันออกจะดู มั่วๆ

ไร้ระเบียบแบบแผนไปหน่อย จับโน่นมาก่อน จับนี่มาหลัง ทั้งที่จริงมันควรจะเรียงแบบ เป็นขั้นเป็นตอน อย่างว่าแหละครับ คนที่จะเริ่มปั่นไปพร้อมๆ กับการเขียนเว็บด้วย CSS นี่ อย่างน้อยต้องรู้ html กันมาอยู่แล้ว ผมก็เลยถือเอาว่า ทุกท่าน ไม่มีทาง งง แน่นอน ก็เลยเขียนไปๆ มาๆ อย่างนี้

สำหรับวันนี้มาว่ากันด้วยเรื่องของ ตัวหนังสือกันครับ สำหรับการกำหนดว่า เว็บเราจะใช้ตัวหนังสือ อะไรเป็นฐาน หรือมาตรฐาน ของเว็บ ให้แสดงสีนี้ ทุกหน้า หรือ ขนาดเท่านี้ ทุกหน้า เราสามารถกำหนดได้โดย

หลายๆ คน คงคันไม้คันมือเต็มที กับการเน้นสีสันของ DIV การใส่พื้นหลัง ไม่ว่าจะเป็น สี หรือ รูปภาพ ซึ่ง CSS2 มีออปชั่นให้เล่นกันมันมือ

สำหรับคนที่ยังสงสัยว่า เอาทั้งแบ็คกราวน์ ที่เป็นรูปภาพ ทั้งสี ใส่เข้าไปด้วยกันนั้น ได้ด้วยหรือ วันนี้ ผมมีคำตอบครับ

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

มาดูกันก่อนว่า Property หลักๆ ของรูปภาพพื้นหลังมีอะไรกันมั่ง

หลังจากได้พูดถึงเรื่อง padding+boder กันไปแล้ว คราวนี้มาดูเรื่องรวม margin เข้าไปด้วยกันครับ

สมมุติว่าผมจะสร้าง box หนึ่งอันกว้าง 500 พิกเซล ชื่อคลาสเดิมนะครับ (pd)

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