I am trying to remove the indentation and bullets from a bulleted list using CSS. Here is what I am doing:
.entry-content ul{
list-style-type:none;
padding:0;}
The bullet points are removed from the list, but the indentation is not fixed. Here is the HTML:
<div class="entry-content">
<ul class=wp-block-categories wp-block-categories-list">
<li class="cat-item cat-item-8">Advice
</li>
</ul>
</div>
Here is an image before I apply the CSS:
https://imgur.com/Sw31pHJ
Here is an image after I apply the CSS:
https://imgur.com/Utnt5vI
Does anyone know why the indentation isn't being removed? I am doing this in wordpress.
You have an error in your HTML.
<ul class=:wp-block-categories wp-block-categories-list">
should be
<ul class="wp-block-categories wp-block-categories-list">
As for your CSS, one of these is the most likely:
The li may have a margin as well. try .entry-content ul li { margin-left: 0; }
Your selector isn't specific enough, try .entry-content ul.wp-block-categories-list instead
Your ul may have margin instead of padding (doubtful)
You can try and diagnose these with DevTools/your browsers inspector, it will show you all of the positions/margins/paddings and everything related to the element's bounding box:
You likely also need to apply:
.entry-content ul li {
margin-left: -20px;
}
The exact amount of margin will differ based on the size of your font, but 20px is the default.
Related
html
<ul class="social">
<li><a class="html5" href="#html5"></a></li>
<li><a class="twitter" href="#twitter"></a></li>
<li><a class="facebook" href="#facebook"></a></li>
<ul>
Everything works, but not fitted to margin? I need it flush like the rest of my page...any advice?
css
.social ul
{
list-style-type:none;
margin:0;
padding:0;
}
.social li
{
display: inline-block;
}
In the CSS, you are trying to set margin and padding to "0" but since your path is wrong
-> .social ul
I think it should be:
-> ul.social
In the fiddle the <ul> still has the default 40px of left-padding and 16px of top/bottom margin, so just add margin: 0; padding: 0; to the unordered list. Every browser adds this padding/margin to lists - I'd suggest using a CSS reset, so you can explicitly reset the default browser styling for each element. Look at this for more info
Secondly inline-block elements are white-space dependent so if you comment out, or delete the white-space in your mark-up (between the <li>) the horizontal space between the images will be reduced.
Edit: It does display inline horizontally .. the reason why margin: 0; padding: 0; didn't take effect is because .social ul implies the unordered list is a descendant of some element with the class .social when it isn't, so the default padding/margin remained.
Okay so here is the link to the page I'm working on:
http://students.thenet.ca/jlandon/
As you can see, the list is still displaying vertically instead of horizontally.
CSS:
li { display:inline;
list-style-type:none;
}
#nav { background-color:#c6c7c3;
height:50px;
margin-top:120px;
z-index:2;
}
HTML
<div id="nav">
<ul>
<li><h2>Home</h2></li> <li><h2>About</h2></li> <li><h2>School</h2></li> <li><h2>Workshop</h2></li> <li><h2>Contact</h2></li>
</ul>
</div>
Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me):
site design http://students.thenet.ca/jlandon/images/sitedesign.png
Why are you using H2 for the navigation elements?
Change them to also display inline, or use an inline element.
h2 is a block element by default, which is what's breaking your lines.
You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).
I think a float: left would fix this:
li
{
display:inline;
float: left;
list-style-type:none;
}
You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:
.nav-text, #nav li a {
font-size: 1.25em;
font-weight: bold; }
#nav {
background-color: #c6c7c3;
height: 50px;
margin-top: 120px;
z-index: 2; }
Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.
Your html will something like this:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>School</li>
<li>Workshop</li>
<li>Contact</li>
</ul>
</div>
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit
I have below HTML in my web page:
Forum
<ul>
<li> Stack</li>
<li> OverFlow</li>
</ul>
And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements.
Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen?
The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL.
You get rid of it with CSS:
ul { margin: 0; }
or if you just want to reduce it, for example this one will set 0 margin for horizontal, 5px for vertical:
ul { margin: 5px 0; }
Try this (don't know if it's the problem with you):
<ul><li>
your first li element </li><li>
your second li element</li>
</ul>
There are spaces that you can't avoid on HTML code if you don't "avoid" it, let's say.
Take a look here.
In addition to kapa's comment, if you enter a negative value for the margin it will reduce the gap.
In css:
ul { margin:-20px;}
Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LI and UL elements.
LI
{
margin: 0px;
}
This will decrease the vertical distance, but not the horizontal.
ul { margin:-15px 0;}
It is a combination of Andrew and kapa's.
Here's how it looks.