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
Related
On my style.css I have this CSS
* {
padding: 0px;
margin: 0px;
outline:none;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
I use it on most of my pages, I want to cancel it on a specific page, how can I achieve this without removing the whole CSS file?
I have tried unset but it doesn't work, also tried to remove for a specific element but is still not working
ul, li:not(.editor) {
margin: 0;
padding: 0;
list-style-type: none;
}
The main reason for this is that editor(ckeditor 5) doesn't display lists, and list style, also padding and margin are affecting space between rows
not looking good
how it should look
Update:
From how I have it on style.css on my index.php I want to for the whole page or for the editor(best option) like this:
* {
}
ul, li {
}
I want that lists and style list to just behave normal, right now they are removed because of that CSS from my style.css
In the specific page give the body a special class like this
<body class="unstyle">
then on your css file reset the style
.unstyle ul, .unstyle li{
margin: 0;
padding: 0;
list-style-type: none;
}
I have Joomla 3.4.5 + Virtuemart 3 + Template Purity III.
I have a problem with the "pages navigation" links. You can see the problem here:
http://alturl.com/ofbav [link broken]
The problem is the list <ul> is displayed vertically instead of horizontally.
I would like to know which css code I have to add to get horizontally and "normal" looking my pagination buttons.
Can some expert help me please?
Not sure. Try like this.
.vm-pagination > ul > li
{
display:inline-block;
padding:0px 10px;
}
EDIT:
According to comment below if you want one code should solve both the problem then use it like below. In the above code i tried to apply only for the direct children list items. In your bottom page case it is not direct children. So change your code like below.
.vm-pagination ul > li
{
display:inline-block;
padding:0px 10px;
}
You should put list-style: none; on "ul" to get rid of the bullet points and display: inline; or display: inline-block; on the contained "li"s to display them in a row.
.vm-pagination ul li
{
list-style: none;
}
.vm-pagination ul li
{
display: inline;
}
Then you can play with marging+paddings+borders to make them look more like tabs.
Just add text-align: left; to your pagination ul. Also you can disable list styling with list-style: none;. And as a final step, you can remove unnecessary paddings and margins of your ul element
.vm-pagination > ul {
text-align: none;
list-style: none;
padding: 0;
}
use in your style may help you
ul
{
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul li
{
float:left;
padding:4px 4px;
}
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;
}
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; }
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...