स्टैंडर्ड बुलेट लिस्ट को ग्राफिक्स बुलेट में कैसे बदलें

आप भी अगर स्टैंडर्ड बुलेट लिस्ट को ग्राफिक्स बुलेट में बदलना चाहते हैं तो इस छोटे से कोड को उपयोग में लायें, और अपने बनाये बुलेट का मजा लें।

स्टैंडर्ड बुलेट लिस्ट कोड कुछ ऐसा होगा:

<ul>
<li>स्टैंडर्ड बुलेट १
<li>स्टैंडर्ड बुलेट २
<li>स्टैंडर्ड बुलेट ३
</ul>

जो पेज में इस तरह से दिखायी देता है:

  • स्टैंडर्ड बुलेट १
  • स्टैंडर्ड बुलेट २
  • स्टैंडर्ड बुलेट ३

ग्राफिक्स बुलेट बनाने के लिये पहले आपको चाहिये एक ग्राफिक्स ईमेज, कहीं से लायें या खुद बनायें। फिर उसे किसी वेब सर्वर में स्टोर (अपलोड) करिये। फोटो बकैट या फ्लिकर फ्री में ये सर्विस देता है। उसके बाद स्टैंडर्ड कोड को नीचे दिये तरह से बदल लीजियेः

<DL>
 <DD><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif”>स्टैंडर्ड बुलेट १</DD>
 <DD><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif”>स्टैंडर्ड बुलेट २</DD>
 <DD><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif”>स्टैंडर्ड बुलेट ३</DD>
</DL>

जो पेज में इस तरह से दिखायी देता है:


स्टैंडर्ड बुलेट १

स्टैंडर्ड बुलेट २

स्टैंडर्ड बुलेट ३

हममम अब इसमें समस्या ये है कि ईमेज और शब्द एक साथ एक लाईन पर दिखायी नही देते, इसका तोड़ ये है कि ऊपर दिये गये कोड को उपयोग में ही ना लाया जाये। आप सोच रहे होंगे अगर इस कोड को उपयोग में नही लायेंगे तो फिर ईमेज बुलेट कैसे दिखायेंगे। उसके लिये आप टेबल उपयोग में ला सकते है, कोड नीचे लिखा हैः

<table border=”1″>
<tr><td align=”right”><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif” border=”0″></td><td valign=”top” align=”left”>स्टैंडर्ड बुलेट १</td></tr>
<tr><td align=”right”><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif” border=”0″></td><td valign=”top” align=”left”>स्टैंडर्ड बुलेट २</td></tr>
<tr><td align=”right”><IMG SRC=”http://www.readers-cafe.net/controlpanel/eemaje/imagedot.gif” border=”0″></td><td valign=”top” align=”left”>स्टैंडर्ड बुलेट ३</td></tr>
</table>

और इसके उपयोग से ये कुछ कुछ सही सा दिखायी देता है यानि कि एक लाईन में:


स्टैंडर्ड बुलेट १
स्टैंडर्ड बुलेट २
स्टैंडर्ड बुलेट ३

This entry was posted in HTML/CSS/Web sites and tagged . Bookmark the permalink.

Comments are closed.