I need to my ul list to display the ➢ list type instead of the default bullet type.
Is there are list type that will display it? Or can it only be displayed as a background image? What would be the best way to have that list type?
There is no such bullet in the list-style-type property, but fortunately there are other ways to do so:
the list-style-image property - just specify url to the image.
the :after or :before pseudoclass:
li{
list-style-type: none
}
li:before{
content: "➢"
}
I don't believe there is a default bullet type for that particular image, however, you can add custom bullets.
I will use this css:
ul{
list-style-image: url('yourlisticon.gif');
}
Related
I have a text that has twor unordered lists.
The fist needs to have tickmars, while the second just bullets.
The text is supposed to be sent via email so I must not use any css links as I am not sure that the recipients have access to them.
I need to create two lists one with tickmarks and one with bullet.
So, now I want another list that is has bullets.
How can I do that?
I want two lists, one with tickmarks and one with bullets
If you don't want to use css links, you could include your css inside html with style tag:
.custom-ul {
list-style: none;
}
.custom-ul > li:before {
content: '\2714\0020';
margin-left: -1em;
}
Then apply class .custom-ul to your first list. You can try tickmarks with codes \2713, \2714, \2611.
Codepen
I'm just learning html5 and css3 when I create a simple page with either an ordered list or an unordered list and apply css display: inline; or block; it removes the numbers or bullets does anyone know why?
This answer has been answered many times. Here's one of the best answer given by Martijn Pieters
However, you can use something like this and it'll workout.
ul.columns>li:before { content:'\ffed'; margin-right:10px; }
or
You can also use background image. However, I'd suggest the former method.
list style bullets works only for display: list-item applied elements. This property is applied by default to the li element, which you are overriding now by applying display: inline or block. Hence, the list style icons will be gone.
Because only list items have bullets/number points. It doesn't make sense for an inline box or a block box to have a bullet, because neither of those things is a list item.
List items are display: list-item; that's what gives them the bullets/number points.
Instead of give
display :inline;
You can apply
Float left to li and give padding to it
Eg.
ul li{
float:left;
padding:0 25px 0 0;
}
I need to be able to add a purple circle background and change the color of just the number in an ol li decimal html element.
Is that possible without any extra markup? I've tried backgrounds, list-style-image etc etc, but none seem to so that.
Any ideas?
I use another span element to format the background of each li numer. You can view the demo here on JSBin
I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:
.Lower-Alpha {
list-style: lower-alpha;
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
}
The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).
Eg I am getting:
a. struckthrough content
but I need:
a. struckthrough content
Any suggestions welcome.
Cheers
easy as pie: list-style-position: inside;
http://jsfiddle.net/seler/NWbrR/
edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.
edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/
#Haem; You can apply :after property
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
check the fiddle for more may be that's help you
http://jsfiddle.net/sandeep/NWbrR/4/
the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.
This is default browser behaviour and you wont be able to strike through the number/letter provided by the list.
If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.
You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:
<style>
.Lower-Alpha
{
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
list-style: none;
}
</style>
<ul>
<li class="Lower-Alpha">a. Foo</li>
<li class="Lower-Alpha">b. Bar</li>
</ul>
This'll render as:
a. Foo
b. Bar
It can be done as follows:
Create a wrapper <div> around the <ul>.
Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)
Style the <li> elements back to your normal font settings.
The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.
Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use #seler's solution.
You can't style the list item. It might look better this way?
I have css like this:
.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}
And html like this:
<ul>
<li class="done">Done</li>
<li class="notdone">Not Done</li>
</ul>
Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.
Is there a proper or standards-based way of doing what I am trying to do, or is this it?
EDIT: http://www.w3.org/TR/CSS21/generate.html
It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.
I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag
<ul>
in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing
The CSS 2.1 standard gives examples where list-style is applied directly to an li.
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.
Followed by:
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */
So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.
Following up to your edit...
If you look at the default style sheet for CSS, you will see that li is defined as follows:
li { display: list-item }
In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.
I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:
li {list-style: none; padding-left: 15px;}
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}
The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.
I don't see a problem with what you are doing. What docs are you talking about?
In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.