ก่อนที่ผมจะรู้จัก 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 แบบเดิมเราเขียนกันแบบนี้

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

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

.preload{ background: url(loading.gif) no-repeat 50% 50%; }

คลาส preload จะมี แบ็คกราวน์ อยู่ตรงกลางที่ โดยเราใส่ 50% นั่นคือเลื่อนตามแนวแกน x และ y ตามความกว้างสูง ของรูป การนำไปใช้ใส่ คลาสที่ img เช่น

<img src=”test.jpg” class=”preload”>

ส่วนรูปที่จะใช้ เราทำ gif ง่ายๆ เองก็ได้ ผมมีเก็บไว้ 2 รูป ไม่รู้ที่ไหนมีให้โหลดบ้าง อยากได้อยู่เหมือนกัน หาแล้วก็ไม่เจอ ใครมีก็เอามาแจกกันมั่งนะ อันนี้ใส่ bg สีดำ ไว้ไม่งั้นไม่เห็น คลิกขวาเซฟเอาละกันนะ

ตัวอย่าง รูปที่ใช้ preload1.html ถ้าดูไม่ทัน กด Ctrl+f5 ละกันครับ มันจะได้โหลดรูปใหม่

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

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

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

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