HTMLHelp Forums [Powered by Invision Power Board]

Posted by: pervade Jan 18 2021, 05:00 PM

Hello guys!

I have no idea of html code,
I can only change edit values but i cannot enrich html code.

1)So guys do you know how i can edit the below code adding an icon in front of EACH list titles.
2)Also i there any way i can add a background gif inside the below block.

CODE:

<tr>
<td class="thead">
<div class="float_left"><strong><a href="mydownloads.php?action=browse_cat&cid=26">*Skies Download List*</a></strong></div>
</td>
<tr>
<td class="trow1" style="url(images/z4.jpg) top left;">
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=20"><span> Classic Skies</span></a></li></p>
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=21"><span> ZombieMod Skies</span></a></li></p>
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=22"><span> GhostMod Skies</span></a></li></p>
</td>
</tr>

THANKS IN ADVANCE.

Posted by: pandy Jan 18 2021, 07:02 PM

The simplest is to just switch the list bullet to an image of your choice. You need a line of CSS though.

You may want to give the list an id in case you have other lists that shouldn't use the same icon. I called it foo. This way only this list is affected.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>List icon</title>

<style>
#foo      { list-style-image: url("https://htmlhelp.com/icon/new.gif") }
</style>

</head>

<body>

<ul id="foo">
   <li>Blah blah</li>
   <li>Blah blah</li>
   <li>Blah blah</li>
</ul>

<ul>
   <li>Blah blah</li>
   <li>Blah blah</li>
   <li>Blah blah</li>
</ul>

</body>
</html>

Posted by: Christian J Jan 18 2021, 07:38 PM

Also note that LI elements must be directly inside a UL or OL element, not a P.

Posted by: pervade Jan 19 2021, 04:39 PM

SO THE CODE IN MY CASE MUST BE LIKE THIS FOR MY LIST.
CODE:

<table border="0" cellspacing="0" cellpadding="5" class="tborder">
<tr>
<style>
#foo { list-style-image: url("https://htmlhelp.com/icon/new.gif") }
</style>
<td class="thead">
<div class="float_left"><strong><a href="mydownloads.php?action=browse_cat&cid=26">*Skies Download List*</a></strong></div>
</td>
<tr>
<td class="trow1" style="url(images/z4.jpg) top left;">
<ul id="foo">
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=20"><span> Classic Skies</span></a></li></p>
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=21"><span> ZombieMod Skies</span></a></li></p>
<p><li class="last"><a href="http://www.D.com/mydownloads.php?action=browse_cat&cid=22"><span> GhostMod Skies</span></a></li></p>
</td>
</tr>

THANKS A LOT!

Posted by: pandy Jan 20 2021, 01:41 AM

No. You must take some time to learn basic HTML.

The style block goes in HEAD. The Ps around your LIs can't be there and aren't needed. Remove them.

FYI nothing can go between the elements that make up a table or a list. Everything must be in the TDs (or THs) and LIs respectively.

Posted by: pervade Jan 21 2021, 02:18 PM

QUOTE(pandy @ Jan 20 2021, 01:41 AM)

No. You must take some time to learn basic HTML.

The style block goes in HEAD. The Ps around your LIs can't be there and aren't needed. Remove them.

FYI nothing can go between the elements that make up a table or a list. Everything must be in the TDs (or THs) and LIs respectively.

Yes but it works just fine like this,all changes taken effect as i wanted with icon prior list titles and also custom background.

What can go wrong though.?

Posted by: pandy Jan 21 2021, 03:18 PM

That is doesn't work like you want in some browser or other. Or you later make some changes and it all breaks. Just remove the Ps. The only difference you will see is that the list items will be closer together since browsers add top or bottom margin to P. To you want want that look you just add a little top or bottom margin to LI instead.

The UL also needs a closing tag. You have left that out.

That you bother to use a list for the links makes me think that you case about doing the "right way". So it's a little confusing that you don't care if the HTML is valid or not. Or did you just find the list somewhere and changed the links?

Posted by: pervade Jan 23 2021, 08:55 AM

QUOTE(pandy @ Jan 21 2021, 03:18 PM)

That is doesn't work like you want in some browser or other. Or you later make some changes and it all breaks. Just remove the Ps. The only difference you will see is that the list items will be closer together since browsers add top or bottom margin to P. To you want want that look you just add a little top or bottom margin to LI instead.

The UL also needs a closing tag. You have left that out.

That you bother to use a list for the links makes me think that you case about doing the "right way". So it's a little confusing that you don't care if the HTML is valid or not. Or did you just find the list somewhere and changed the links?

No the list is mine of course created it by reading some tuts and i just
made experiments so i can have the look i want in html code.

Thanks i will correct the gap between lists using li , removing p,and also close the ul using the tag.

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Customize List and background