I want to have bullet points inside a div to which I assigned the class "standard". I am overriding another class that shows a background for list items. Nothing happens:
div.standard ul li {
display:list-item !Important;
list-style-type: disc !Important;
}
The page is the following:
http://mw.theseolounge.co.uk/index.php/marsden-m-300.html
and the list of items is under Key Features.
What am I doing wrong?
You are applying the styling to list item li directly whereas it should be applied to the actual list ul or ol itself. Try the following css which applies the styling directly to the list:
div.standard ul{
display:list-item !Important;
list-style-type: disc !Important;
}
You have to put list-style-type in the ul, not the li. And I think you can get rid of display: list-item.
Related
i am working on a WordPress site, and my initial problem was that when i had a bullet, the text would wrap around it such that some text was below the bullet point and so i wanted to align my bullets such that when text is wrapped it doesn't show below the bullet point,
so i did this in my custom css
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
which worked great except now i have bullets appearing next to the links on the drop down part of my menu, how can i exclude the code from affecting the main menu?
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
#site-header ul{
list-style:none;
}
Write a specific selector for the site-nav ul list and remove the styles. Adding the #site-header before ul will overwrite the original statement for that element. Effectively, this will apply your original style to all ul elements except the ones in #site-header
I believe wp adds #site-header automatically to the main header element. If this is not the case for your theme, just change #site-header to any parent element id specific to your header.
It's probably because you're using ul as your selector. This will apply those styles to ALL ul elements in your page. If you want to only select a single ul, you can either add an id or class to it, or you can select it's container, such as
div ul { // styles here }
You have to be more specific on your css rule, otherwise you're aplying that style to all your ULs
#parentElement ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
instead of creating that list-style-type for all ul, just create it for the specific one you want to appear the bullets. Otherwise find the main menu id and add this: list-style-type: none;
I have an unordered list within a WordPress blog post that will not show the bullets. I've tried multiple things to get it to show, but it will not.
Here's the link (text above the desktop image):
http://www.sherigarvin.com/work-project-3/
Here's what I've tried:
Removed the ul/ol rule in the css reset
Added specific ul rule with list-style:disc; & list-style-type:disc; Added list-style:disc; to css reset
Added general rule to style.css with list-style:disc; & list-style-type:disc;
Inline style of list-style-type:disc;
Thanks for any help...
I'd suggest adding a margin-left to the li elements, or, possibly, declaring: list-style-position: inside; (which will place the disc inside of the width of the li element, to demonstrate whether the rule's applying or not).
ul li {
list-style-type: disc;
margin-left: 1.5em; /* which should give space for the disc to show */
list-style-position: inside; /* will put the disc inside of the li
element, for debugging purposes */
}
References:
list-style-type.
list-style-position.
Another thing to look at is to see if you had display:block on the css element somewhere. By removing display:block it will make the list style appear again.
Here is an inline style that I used on UL that seemed to work better:
<ul style="list-style-type: disc;
margin-left: 2.5em;
list-style-position: outside;">
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.
I'm trying to do a horizontal list using the style type below but when using display: inline the square wont show. Any suggestions?
.vertical li {display: inline; list-style-type: square; padding-right: 5px;}
You need to style both the list and the list elements. Use float, not display:inline.
ul {list-style-type: square;}
li {float:left;margin-left:25px;}
use float:left;
the you protect yourself from getting unexpected results that's inherited with diffrent objects