1. เอา tag <div> ที่ไม่จำเป็นออกไป สำหรับบางคน หากคิดอะไรไม่ออกก็ใช้ <div> ไว้ก่อน จนมีมากเกินไป เพราะฉะนั้นเราควรตัด <div> ให้เหลือเฉพาะส่วนที่จำเป็นเท่านั้น ทีนี้เรามาดูตัวอย่างการใช้ <div> ที่มากเกินความจำเป็นกันดีกว่า ตัวอย่างที่ 1 ตัวอย่างที่ 2 2. เลือกใช้ tag ให้เหมาะสม 3. ใช้ tag <div> ให้น้อยที่สุดและใช้งาน tag ให้ถูกความหมาย ตัวอย่างที่ 1 แทนที่เราจะใช้ <div> สำหรับ breadcrumb หรือ ข้อมูลที่เกี่ยวกับการบอกตำแหน่งที่อยู่ในเว็บไซต์ เราก็ควรจะใช้ <p> มากกว่า เพราะข้อมูลนี้ถือว่าเป็นข้อความ(paragraph) ตัวอย่างที่ 2 บางคนก็นำ <div> เพราะอยากจะให้ข้อมูลขึ้นบรรทัดใหม่โดยไม่ได้คำนึงถึงการใช้งานเลยว่า ใช้ถูกต้องตามความหมายรึเปล่า 4. จัดรูปแบบ code ให้เป็นระเบียบอยู่เสมอ ถ้าหากว่าใครใช้โปรแกรม Adobe [...]

วันนี้ผมจะมานำเสนอเกี่ยวกับ property ของ css ที่หลาย ๆ คนอาจจะงงว่า “css มันมีคำสั่งแบบนี้ด้วยเหรอ ?” property ทั้ง 5 ตัวที่ผมจะมานำเสนอวันนี้ก็คือ clip, min-height, white-space, cursor และ display ซึ่งหลาย ๆ คนมองข้ามเจ้าพวกนี้ไป ทั้ง ๆ ที่มันมีประโยชน์ในการใช้งานอยู่มากโขทีเดียว 1. CSS Property : Clip (คลิกเพื่อดูตัวอย่าง) การใช้งาน clip นั้นจะทำให้เหมือนกับมีหน้ากากมาครอบพื้นที่อยู่ (นึกภาพง่าย ๆ ก็เหมือนกับการใช้คำสั่ง crop ใน photoshop) โดยการที่เราจะสร้างหน้ากากขึ้นมาครอบนั้น เราจะต้องระบุค่าระยะห่างของด้านทั้ง 4 ก่อน(บน ขวา ล่าง ซ้าย) ตัวอย่างแรก ในตัวอย่างนี้เราจะสร้างหน้ากากให้กับรูปภาพโดยใช้คำสั่ง clip อันดับแรกเราต้องกำหนด position: relative ใน [...]

ในการเขียน CSS นั้น หลาย ๆ คนอาจจะไม่ทราบว่าสามารถย่อให้สั้นลงได้ (จริงเหรอเนี่ย !!!) โดยการใส่ค่า(value) ให้กับคุณสมบัติ(property) พร้อมกันหลาย ๆ ค่า วิธีการเช่นนี้เราเรียกว่า Shorthand นั่นเอง property แต่ละตัวเวลาเขียนแบบย่อแล้วจะเป็นอย่างไร ไปดู Font (ตัวอักษร) การใช้งานปกติ : font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif เขียนแบบย่อ : font: 1em/1.5em bold italic serif Background (พื้นหลัง) การใช้งานปกติ : background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; background-attachment: fixed [...]

เมนูในเว็บไซต์ต่าง ๆ นั้น แต่ละที่ก็จะมีเทคนิคในการทำไม่เหมือนกัน วันนี้ผมจะนำเสนอวิธีการทำเมนูอีกวิธีหนึ่งที่เน้นความสวยงามเป็นหลัก ข้อดีของการทำเมนูด้วยวิธีนี้คือ ตัวอักษรและพื้นหลังขอเมนูจะเป็นรูปภาพทั้งหมด ทำให้สามารถออกแบบและตกแต่งเมนูได้เต็มที่ แต่ความสวยงามที่ได้ยังอยู่บนมาตรฐานเหมือนเดิมนะครับ เพราะถึงแม้ว่าเราจะใช้รูปภาพในการทำเมนู แต่ code ที่เรานำมาใช้นั้นยังเป็นตัวอักษรเหมือนเดิม จึงทำให้เรายังหวังผล SEO จาก keyword ที่อาจจะผสมลงไปในเมนูได้เหมือนเดิม (เยี่ยมมั้ยหละ) อย่ารอช้า เราไปดูกันเลยดีกว่าครับ ในขั้นตอนแรกเราต้องออกแบบเมนูที่เราต้องการก่อนนะคับ ทำเป็นไฟล์รูปภาพไฟล์เดียวยาว ๆ เลยนะคับไม่ต้องเสียเวลาตัดแบ่งเป็นหลาย ๆ อัน อันนี้เป็นรูปภาพ(เพียงรูปเดียว)ที่นำมาใช้ทำเมนูครับ บางคนอาจจะงงนะครับว่า “เอ๊ะ ทำไมเมนูมันมีสองแถว” ก็คือรูปภาพที่นำมาใช้นี้แถวบนจะเป็นสถานะปกติของเมนู ส่วนแถวล่างจะเป็นสถานะตอน hover ครับ HTML จะเป็นแบบนี้ครับ <ul id=”example”> <li id=”home”><a href=”#” class=”current”>home</a></li> <li id=”products”><a href=”#”>products</a></li> <li id=”service”><a href=”#”>service</a></li> <li id=”blog”><a href=”#”>blog</a></li> <li id=”contact”><a href=”#”>contact</a></li> [...]