Tip blackground image and Tag <img src.....

การเขียน page html บางครั้ง IE หรือ Internet Explorer ที่อ่าน tag ของ html ที่เราเขียนนั้นไม่ค่อยฉลาดนัก ซึ่งบางครั้งการเขียน HTML ควรมีทริบเล็กๆ แต่สำคัญมากในการเขียน HTML

ยกตัวอย่างการเขียน HTML ควรทำให้อยู่ในรูปแบบนี้

สังเกตว่า บรรทัดของ <td......><img..../></td> จะอยู่ในบรรทัดเดียวกัน
ซึ่งจะทำให้ภาพที่แสดงออกมาดูสวยงาม ตามที่ต้องการ

*หากเราเปลี่ยนแนวการเขียน เป็น
<table border="0" cellpadding="0" align="center" cellspacing="0" width="80%" style="background-image:url(/html/images/menu_table_bg.gif);background-repeat : repeat-y;">
<tr>
     <td>
           <img src="/html/images/head.gif"/>
    </td>
</tr>
<tr>
  <td style="padding-left:12px;padding-bottom:10px" >
    <% buildMenus(nlayout, 0, themeDisplay, sb);%><%=sb.toString()%>
  </td>
</tr>
<tr style="height:1px;">
  <td height="8" valign="bottom">
       <img src="/html/images/foot.gif"/>
</td>
</tr>
</table>

สังเกตว่า บรรทัดของ

<td height="8" valign="bottom">
<img src="/html/images/foot.gif"/>
</td>
จะอยู่ในคนละบรรทัดกัน ไม่อยู่ในแนวเดียวกัน
อาจทำให้รูปภาพที่ออกมาไม่สวยงามตรงตามที่ต้องการ ทำให้ layer ของ Background อาจบิดเบี้ยว

เขียนใน GotoKnow โดย naruto
ใน Tip การทำ blackground image ที่ developer ต้องรู้

คำสำคัญ (Tags): #back ground#background#twpenpak#tip background

หมายเลขบันทึก: 159178เขียนเมื่อ 14 มกราคม 2008 15:46 น. ()แก้ไขเมื่อ 11 กุมภาพันธ์ 2012 22:20 น. ()สัญญาอนุญาต: จำนวนที่อ่าน

ความเห็น (1)

naruto

เขียนเมื่อ 14 มกราคม 2008 16:35 น. ()

ภาพกรณีแรก correct
http://gotoknow.org/file/twpenpak/1.jpg

ภาพกรณีที่ 2 incorrect
http://gotoknow.org/file/twpenpak/2.jpg