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

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

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

<h2>Menu</h2>
<div id="abc" style="display:none";>
submenu
submenu
</div>

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

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

สำหรับเว็บแกลลอรี่ ที่มีรูปภาพใหญ่ๆ กว่าคนที่เข้ามาจะได้ดูรูปอาจใช้เวลาโหลดนาน เราจะมาเขียน คลาสให้มี ตัวโหลดรูป เหมือน ที่ 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 ละกันครับ มันจะได้โหลดรูปใหม่