/    Sign up×
Community /Pin to ProfileBookmark

How to add images to list box?

Copy linkTweet thisAlerts:
Feb 06.2007

I’m new to add images to list box.
do you know how to achieve result to control all css (bullet should be image)
for list box?

My sample code is like:

[code=php]
<table>
<tr>
<td>
<ul>
<li class=”class1″><a href=””>Link1</a></li>
<li class=”class2″><a href=””>Link2</a></li>
</ul>
</td>
</tr>
</table>
[/code]

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWFeb 06.2007 — Try this:
<i>
</i>&lt;style type="text/css"&gt;&lt;!--
ul { list-style-image: url('arrow.gif'); }
--&gt;&lt;/style&gt;


For more details you can check out http://www.w3schools.com/css/css_list.asp
Copy linkTweet thisAlerts:
@toplisekauthorFeb 06.2007 — I would like to control style for all possible parameters in css with name class1

(links, image position, list position).

how to do in this case? thank you for your fast reply.
Copy linkTweet thisAlerts:
@ray326Feb 07.2007 — Put the image in the background of the li.
Copy linkTweet thisAlerts:
@toplisekauthorFeb 07.2007 — Hi,

can you help me in the start with all possible css to contol list box with image and link?
Copy linkTweet thisAlerts:
@ray326Feb 08.2007 — Here's a sample snippet to get you going.
[code=html]
 <style type="text/css">
ul { list-style-type:none; margin:0; padding:0 }
li {
background: transparent url(http://www.webdeveloper.com/icom_includes/footers/devx_foot2.gif) no-repeat 0% 0%;
padding-left:40px;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

</body>
[/code]
Copy linkTweet thisAlerts:
@toplisekauthorFeb 08.2007 — I have your code. thank you.

how to center text vertical that it will be middle from image?
Copy linkTweet thisAlerts:
@CharlesFeb 08.2007 — I have your code. thank you.

how to center text vertical that it will be middle from image?[/QUOTE]http://www.w3.org/TR/REC-CSS2/
Copy linkTweet thisAlerts:
@toplisekauthorApr 16.2007 — Hi,

I have done the following code:
[code=php]
<head>
<title></title>

<style type="text/css">
ul { list-style-type:none; margin:0; padding:0 }
li {
background: transparent url(bullet1.gif) no-repeat 0% 0%;
padding-left:15px;
margin-top:4px;
}
</style>
</head>

<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>

</html>
[/code]

how to place text in the middle of bullet? enclosed is also image for bullet

[upl-file uuid=ed8eb1b9-7bd3-4e0f-8ef6-43fe43891d4c size=48B]bullet1.gif[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelApr 16.2007 — ...how to place text in the middle of bullet? [/QUOTE] Huh?? Oh, -do you mean, have the text be horizontally-level with the bullet?

If so, give the list-item bullet image a padding-top:[I]n[/I] whereby "[I]n[/I]" is a pixel amount. This?

You could also play around with "line-height:n" of the anchor that is in the <li> with some success.
Copy linkTweet thisAlerts:
@toplisekauthorApr 16.2007 — Hi,

thank you.

1. I would like as enclosed image. So, bullet should be in horizontal line with text or a little at the bottom.

How to do with padding-top?

2. I have many ul and li tags.

How to give them different names for particular sections?


Regards

[upl-file uuid=428f7867-869d-43d5-a47a-5bc2d63b49d5 size=421B]listbox.gif[/upl-file]
Copy linkTweet thisAlerts:
@ray326Apr 17.2007 — Adjust the background position to move the bullet down.

background: transparent url(bullet1.gif) no-repeat 0 5px;
Copy linkTweet thisAlerts:
@toplisekauthorApr 17.2007 — Thank you for all messages. I have just this last problem, if there are many list items, how to define each name?

Is this correct?
[code=php]
ul.bulletlist1
li.bulletlist1
[/code]
Copy linkTweet thisAlerts:
@ray326Apr 18.2007 — I would give the ul the class then work from that.

ul.bulletlist1 li {...}
×

Success!

Help @toplisek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...