Hello everyone. I am trying to use an image for a bullet point on my site, but I also want to move the image, depending on the amount of text. As it is now, it is set up so that a small image sits imediatedly to the left of the top line of text. I want to make it so I can use a larger image, and that image will be to the left of the entire text of the list item, say for example if there is three lines of text, the image would sit to the left of those three lines.
On the page itself I have this code:
<li style=“list-style-image: url(‘http://address of the image.jpeg’); text-align: left; font-size: 16px; line-height: 1.5; margin: 10px 100px 10px 0;”>text is placed here.</li>
I have not been able to find the corresponding styling in my style.css file. I will past the section of the stye.css for the lists here:
ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
}
dl {
margin: 0 0 24px 0;
Use a background image instead of the list-image because the list-image is awkward and unreliable cross browser. With a background image you have complete control over the positioning. Just use padding left on the list for the space for the background image and the text will stay clear.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul#nav {
width:50%;
margin:0 auto;
padding:0;
list-style:none;
}
#nav li {
padding:0 0 0 50px;/* space for bullet image*/
background:url(bullet.png) no-repeat 0 0;/* adjust positiion to suit*/
}
</style>
</head>
<body>
<ul id="nav">
<li>Lorem ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor ipsum dolor sit amet lorem ispum dolor </li>
</ul>
</body>
</html>
Thank you for your help. Unfortunately I don’t know how to integrate the solution into my css file, or on the page itself. The code you shared is an html file, as far as I understand. On my site I have css right in the page where the text is, and also I have a css file. Can I use your code on either of those pages?
Hi fifthhouse. Paul’s code isn’t designed specifically for your site, because we don’t know what it looks like. If you could post a link to the relevant page, that would make it easier.
Otherwise, please post the relevant HTML for your list if you want a more specific answer. Paul’s example assumes that your <ul> has an ID of “nav”. Of course, that may not be the case, so we’d need to know what class/ID it actually has to be able to target it. If it doesn’t have one at all, you could either add an ID or class to it, or target it based on a parent element (like a <div>) that does have a class or ID.
Edit:
Assuming the site in question is the one in your signature, you’d need to add something like this to your CSS file:
.entry-content ul {
list-style: none;
margin: 0;
}
.entry-content ul li {
padding: 0 0 0 50px;
background: url('/wp-content/uploads/2013/01/tinycheck.jpeg') no-repeat 0 0;
}
Then remove the inline styles in your HTML. E.g. remove the code in red:
<li [COLOR="#FF0000"]style="list-style-image: url('http://mindfulnessangermanagement.com/wp-content/uploads/2013/01/tinycheck.jpeg'); text-align: left; font-size: 16px; line-height: 1.5; margin: 10px 100px 10px 0;"[/COLOR]>Weekly readings to help you better understand the dynamics of anger and how to free yourself from its grip.</li>
Once you’ve done this, you can change the image to suit, and to give it room you would just adjust the padding on the LIs from 50px to something else to suit.
Thanks Ralph. That’s correct, it’s the home page of the url in my signature. Your solution works when I past the css code into my css file. However, I have a number of different images, a different one for each list item, so I am assuming I will have to have the background image code on the html page. I don’t know how to go about that, but am trying to figure it out now…
The thing to do is give each <ul> its own class or ID and then target them separately in your style sheet. Here’s an example:
In your HTML, these would be your separate <ul>s:
<ul [COLOR="#FF0000"]class="list1"[/COLOR]>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<ul [COLOR="#FF0000"]class="list2"[/COLOR]>
<li>Lorem ipsum dolor sit amet</li>
</ul>
Then, in your CSS, have separate styles for each <ul>:
I don’t mean to belabour this post, but I just discovered that my regular bullet points in the rest of my site have disappeared, after I made the changes to get the multiple images working, as describe above. The lists are still in place, but there is no bullet point beside them.
