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

ในกรณีนี้ เราจะใช้ จาวาสคริป เข้ามาช่วยควบคุม ลองมาดูตัวอย่าง การทำ Toggle อย่างง่ายกันครับ

เริ่มต้นเรามี HTML ดังนี้

เราจะเขียน javascript เพื่อเปลี่ยน style ของ div ดังนี้
อ่านต่อ คลิกที่นี่ »

ก่อนที่ผมจะรู้จัก CSS นั้น การทำปุ่มเมนูในรูปแบบนี้ นั้นต้องใช้ รูป ถึง 3 รูปเลยทีเดียว คือ รูปขอบด้านซ้าย รูปพื้นที่ตรงกลาง และรูปขอบมนด้านขวา แต่ตอนนี้เราสามารถใช้ CSS ช่วยโดยใช้รูปเพียงรูปเดียว ประหยัดเวลา ประหยัดแบนวิธ ใช้ง่าย ในทุกที่ ยืดได้ แม้ ประโยคจะยาว ลองมาดูวิธีกันครับ

Image

ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd
อ่านต่อ คลิกที่นี่ »

วิธีแก้ปัญหา โดยใช้ css 1 บรรทัด หากใครทำ css อยู่ ต้องเคยเจอกับปํหญหาเหล่านี้ อย่างแน่นอน

1. ทำ vertical align ด้วย line-height
   

   line-height:20px;

   กำหนด line-height ให้เท่ากับค่า height ของกล่อง

2. ป้องกัน content ยาวเกิน layout ที่ใช้การ float และกำหนดความกว้าง
   

   #main{
   overflow:hidden;
   }

   #main มักจะหดสั้น เมื่อใช้การ float จนทำให้คอนเท้นหายไป แก้ด้วย overflow (อย่าลืมว่าต้องกำหนดความกว้างด้วย)

3. ป้องกัน ลิ้งค์คำยาวๆ ขึ้นบรรทัดใหม่
   

   a{
   white-space:nowrap;
   }

   ช่วยให้ลิ้งค์ ขึ้นรรทัดใหม่ ทั้งคำ ไม่ขึ้นบรรทัดใหม่กลางคำ

   อ่านต่อ คลิกที่นี่ »

จากตอน “การจัดการกับความสูง” ได้มีคอมเม้น ของคุณปีโป้ ได้เข้ามาถามไว้ว่า จะทำ กล่องที่มีเนื้อหาไม่เท่ากัน ให้สูงเท่ากันได้อย่างไร ถ้าจะตอบแบบ ไม่ต้องคิดมาก ก็คือ ใช้ table สิ เหอๆๆ แต่ ถ้าคนเคยทำ css แล้วจะมีอาการโรคจิต ชนิดหนึ่ง ที่จะต้องพยายาม ทำทุกอย่างในหน้าเว็บ โดยไม่ใช้ table ให้ได้ ราวกับว่า การมี table สักอันอยู่ในหน้าเว็บ เป็นความพ่ายแพ้ และเป็นที่เหยียดหยามอย่างมาก จากเพื่อนร่วมงาน ดังนั้นเรามาดูวิธี ทำโดยไม่ใช้ table แต่ทำแบบ table เอ๊ะยังไง????

table แบบเดิมเราเขียนกันแบบนี้

อ่านต่อ คลิกที่นี่ »

อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ

1. ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
2. ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
3. ใช้ภาพ png แล้วใช้โค้ด png ie fix ก็ได้เหมือนกัน แต่ต้องใช้ png รูปใหญ่มาก ไฟล์หนัก โหลดช้า ไม่คุ้มค่าการใช้งาน

เว็บไซต์ เดลินิวส์ ในส่วน เมนูบาร์ใช้โค้ด css ทำให้ใส

แอบเข้าไปดู css หน่อยซิว่าเขียนอะไรยังไง ใช้ web delveloper toolbar เจอแล้วเขียนแบบนี้น่ะเอง อ่านต่อ คลิกที่นี่ »