ลองเปลี่ยนเป็น id ดูจิ
<li id="" อะ
id กับ class เอาไว้กำหนดแค่ว่าอะไรที่เวลาเปลี่ยนควรเปลี่ยนเหมือนกันทั้งหมด กับเปลี่ยนอันนั้นอันเดี่ยวครับผม อธิบายงี้น่าจะเข้าใจง่ายขึ้น
...
ทำผิดแล้วท่าน CSS เค้าไม่ได้ใช้อย่างนั้นครับ ถ้าใช้ Tag ul และ li ต้องกำหนด style ของมันเอง ไม่ใช่ใช้ background
ซึ่งถ้าจะทำให้ข้างหน้า li เป็นรูปภาพ ผมจะอธิบายว่า...
1. ทำรูปที่จะใส่ข้างหน้าเอาไว้ โดยแบ่งเป็นของใครของมัน
2. ใน CSS ใช้คำสั่ง list-style-image:
ที่อยู่ของภาพที่จะใช้.นามสกุล;
ตัวอย่าง...
HTML...
<ul id="side_nav">
<li class="home"></li>
<li class="news"></li>
<li class="service"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
CSS...
#side_nav {
width:200px;
height:500px;
}
#side_nav li .home {
list-style-image:
home.gif;
margin:...;
padding:...;
}
...
...
...
#side_nav li .contact {
list-style-image:
contact.gif;
margin:...;
padding:...;
}
คร่าวๆ ประมาณนี้ครับ ลองดูครับ
ปล. ไม่ได้ตรวจสอบโค๊ดนะครับ พิมพ์ตามที่สมองอันน้อยนิดจะนึกออก ถ้าผิดพลาดยังไงก็บอกนะครับ
ผิดอย่างแรงเลยครับท่าน ท่านสามารถใช้ background กับ tag ul, li, a ได้ โดยทำพื้น background เป็นรูปๆ เดียว และในแท๊ก li ให้ใส่ชื่อ id ถ้าชื่อไอดีต่างกัน ให้เลือก background-position ค่าต่างกัน วิธีการนี้จะมีผลสเสีย คือรูปอาจจะใหญ่ แต่ข้อดีคือใช้เวลาโหลดเพียงครั้งเดียว สามารถประยุกต์กับ hover ได้ ทำแบบนี้เรืองการกระพริบของ background ใน ie6 จะหายไป
ลองดูตัวอย่างเวปที่ผมทำน่ะครับ เวปนี้ www[dot]tiretruckcenter[dot]com ตรงเมนู Home Product Recycle Products Server... ตรงนี้จะเป็นพื้น background เดียวกัน และใช้แท๊ก UL, LI เพื้่อผลทาง seo ไปในตัว
ลองคลิกขวาแล้วเซฟแบ๊คกราวนด์มาดูครับ แล้วลองดูเทคนิค css ว่าผมเขียนอย่างไง ลอกได้ครับ เพราะผมก็ลอกฝรั่งมานานแล้ว
แสดงกระทู้
