I am trying to create custom bullet points and it is not working.
This is my HTML.
<div id="services">
<ul id="serviceText">
<h2 id="serviceHeader"><strong>Services I Offer:</strong></h2>
<li>Intros</li>
<li>Transitions</li>
<li>Lower Third Titles</li>
<li>Web Page Design</li>
<li>and more...</li>
</ul>
</div>
This is my CSS
ul#serviceText {
list-style-image: url(images/checkmark.gif);
font-size: 14px;
float: right;
padding-top: 5px;
color: white;
}
My site is located here xdtrammell.com/lol if it helps you to see all my code.
change your selector to ul#serviceText li
. Also keep in mind that you can't include h2
element in ul
. Is not valid html.
Specifically I think you're trying to create custom bullets that are images, here is how I would do it.
The CSS
.list {
margin: 0;
padding: 0;
}
.list-li {
background: url('../directory/your image here.jpg') no-repeat top left;
margin: 0;
padding: 4px 0 4px 20px;
list-style: none;
}
The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.
The HTML
<ul class="list">
<li class="list-item">lorem ipsum</li>
<li class="list-item">lorem ipsum</li>
</ul>
I hope this helps!
You're far better of using a CCS background for your list items than using list-style-image
. You get far greater control over the positioning of the graphic and the spacing of the text.
Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"
只需像这样更改 URL 中图像文件夹的路径( ../images/checkmark.gif),“li ”标签元素就足以作为选择器。
li {list-style-image: url(../images/checkmark.gif);}
我的情况是,当list-style: inside
未设置时,项目符号被隐藏或不可见。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.