The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Customize List and background
pervade
post Jan 18 2021, 05:00 PM
Post #1





Group: Members
Posts: 4
Joined: 18-January 21
Member No.: 27,734



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.

This post has been edited by pervade: Jan 18 2021, 05:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2021, 07:02 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2021, 07:38 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Also note that LI elements must be directly inside a UL or OL element, not a P.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pervade
post Jan 19 2021, 04:39 PM
Post #4





Group: Members
Posts: 4
Joined: 18-January 21
Member No.: 27,734



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!

This post has been edited by pervade: Jan 19 2021, 04:39 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 20 2021, 01:41 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pervade
post Jan 21 2021, 02:18 PM
Post #6





Group: Members
Posts: 4
Joined: 18-January 21
Member No.: 27,734



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.?

This post has been edited by pervade: Jan 21 2021, 02:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 21 2021, 03:18 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pervade
post Jan 23 2021, 08:55 AM
Post #8





Group: Members
Posts: 4
Joined: 18-January 21
Member No.: 27,734



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.

This post has been edited by pervade: Jan 23 2021, 08:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:57 AM