In a global style sheet used across all of our pages sits the following line:
ul { margin: 0; }
li { list-style-type: none; padding-bottom: 3px; }
Therefore, any ul's inside my pages render with no discs next to li's.
However, in special cases, I need to display the disc next to a li.
I have a div with the class "blog-post" and though that the following would do the trick for me.
.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }
However this isn't doing the trick.
So with the following snippet of HTML
<ul>
<li>Testing</li>
</ul>
<ol>
<li>Testing</li>
</ol>
Results with:
Testing
1. Testing
Still no disc in the li's nested in the ul's. Thoughts on how I can get them there? My CSS-fu is weak....
!important is not necessary because class-specific styles override global styles already. The problem is because in the global style you set the margin to zero. The style type is being rendered correctly, but you just can't see it. This should work for you:
.blog_body ul
{
list-style-type: disc;
margin: 1em;
}
Change this:
.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }
to this:
.blog_body ul li { list-style-type: disc; }
.blog_body ol li { list-style-type: decimal; }
Related
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
i have the following css:
.navi-live ol{
margin:0;
padding:0;
list-style-type: none;
}
.navi-live li{
margin:0;
padding:0px;
list-style-type: none;
}
.navi-live ol .nav-item-contents{
padding-left:20px;
}
.navi-live ol ol .nav-item-contents{
padding-left:40px;
}
.navi-live ol ol ol .nav-item-contents{
padding-left:60px;
}
.navi-live ol ol ol ol .nav-item-contents{
padding-left:80px;
}
.navi-live ol ol ol ol ol .nav-item-contents{
padding-left:100px;
}
This works (I dont want to indent the li or ol but indent the content as if the li and ol are indented), but limits me to the number of css rules I have created.
How do i do the above without the limitation of having to create a new rule for every new indentation level i want to support?
jsfiddle: http://jsfiddle.net/k4hjp/1/
Thanks,
You should just be able to do a simple select of all the nav-item-content divs, iterate through each one while incrementing the padding variable.
jsfiddle
//put this inside a function and call it when you want to append to the navigation
var padding = 20;
$('.nav-item-contents').each(function(){
$(this).css('padding-left',padding+'px');
padding+=20;
});
EDIT
Added a demonstration of how to append children: jsfiddle.
I am am having trouble removing list bullets on my on line resume. I have tried the following :
.nobull {
list-style: none;
list-style-type: none;
}
And clearing my browser cache. Here in a link to the resume.
You're attempting to set the property on your p tags, you'll want to either eplicitly set the class on the ul elements, or embed your ul elements inside the p tag (which I think is invalid markup, but I could be wrong there).
ul.no-bull,
.no-bull ul
{
list-style: none;
}
Alternatively you could adopt an "opt-in" approach to bullet points, which is what most tend to do; this saves you from having to add no-bull to each ul. Something like this:
ul
{
list-style: none;
margin: 0;
}
ul.has-bullets
{
list-style: none outside disc;
margin-left: 18px;
}
ul {
list-style-type:none !important;
}
Just list-style: none; works, but I don't see where you use the class .nobull
This might be painfully easy, so my apologies in advance, but I'm on Hour 5 trying to figure this mess out. Here's the UL I'm trying to present as a horizontal bar:
<div id="navbarwrapper">
<ul id="navbar">
<li>Search</li>
<li>Tips</li>
<li>Neighborhoods</li>
<li>Relocation</li>
</ul>
</div>
And here's the strange CSS that seems to malfunction:
#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}
The problem I'm having is that with this markup, the text wrapped in anchor tags in the HTML aren't receiving line-through (I'm using line-through as a placeholder because it's obvious when it's working or not; I don't actually want a line-through in the end).
Here's the strange bit. If I replace the "#navbar ul li a" nest with the following, it works:
#navbar li a {text-decoration:line-through;}
Furthermore, if I change "#navbar li{display: inline;}" with the following, I lose the inline property:
#navbar ul li{display:inline;}
Is it because I'm duplicating with "#navbar" and "ul"? It seems entirely too strange to me, and I feel as though I've been able to use this syntax in the past without error.
Thanks for the help in advance.
Your ul already have id of navbar. That's why #navbar ul doesn't match anything.
ul#navbar will match.
Your selectors are not correct.
#navbar is the UL element itself, so the selector #navbar ul does not target anything.
The correct selectors are
#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }
#navbar ul is wrong...#navbar is the ul itself.
Your <ul> has the ID #navbar, so with #navbar ul you are actually addressing an additional ul inside your ul.
Try
ul#navbar li a {text-decoration:line-through;}
I am using YUI reset/base, after the reset it sets the ul and li tags to list-style: disc outside;
My markup looks like this:
<div id="nav">
<ul class="links">
<li>Testing</li>
</ul>
</div>
My CSS is:
#nav {}
#nav ul li {
list-style: none;
}
Now that makes the small disc beside each li disappear.
Why doesn't this work though?
#nav {}
#nav ul.links
{
list-style: none;
}
It works if I remove the link to the base.css file, why?.
Updated: sidenav -> nav
I think that Dan was close with his answer, but this isn't an issue of specificity. You can set the list-style on the list (the UL) but you can also override that list-style for individual list items (the LIs).
You are telling the browser to not use bullets on the list, but YUI tells the browser to use them on individual list items (YUI wins):
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links {
list-style: none; /* doesn't override styles for LIs, just the UL */
}
What you want is to tell the browser not to use them on the list items:
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links li {
list-style: none;
}
The latter example probably doesn't work because of CSS specificity. (A more serious explanation can be found here.) That is, YUI's base.css rule is:
ul li{ list-style: disc outside; }
This is more 'specific' than yours, so the YUI rule is being used. As has been noted several times, you can make your rule more specific by targeting the li tags:
#nav ul li{ list-style: none; }
Hard to say for sure without looking at your code, but if you don't know about specificity it's certainly worth a read.
In the first snippet you apply the list-style to the li element, in the second to the ul element.
Try
#nav ul.links li
{
list-style: none;
}
shouldn't it be:
#nav ul.links
Maybe the style is the base.css overrides your styles with "!important"? Did you try to add a class to this specific li and make an own style for it?
Use this one:
.nav ul li {
list-style: none;
}
or
.links li {
list-style: none;
}
it should work...