Customize List and background |
Customize List and background |
pervade |
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 |
pandy |
Jan 18 2021, 07:02 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 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> |
Christian J |
Jan 18 2021, 07:38 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Also note that LI elements must be directly inside a UL or OL element, not a P.
|
pervade |
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 |
pandy |
Jan 20 2021, 01:41 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 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. |
pervade |
Jan 21 2021, 02:18 PM
Post
#6
|
Group: Members Posts: 4 Joined: 18-January 21 Member No.: 27,734 |
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 |
pandy |
Jan 21 2021, 03:18 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 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? |
pervade |
Jan 23 2021, 08:55 AM
Post
#8
|
Group: Members Posts: 4 Joined: 18-January 21 Member No.: 27,734 |
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 |
Lo-Fi Version | Time is now: 26th April 2024 - 08:00 PM |