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
Related
I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
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');
}
I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
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.