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
Related
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.
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;
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
This issue appears in Internet Explorer and I have not been able to resolve it:
#test ul li {
list-style-type: disc;
float: left;
margin-left: 10px;
font-size: 16px;
}
The code above works fine in Firefox and Chrome, but in IE7 it's not displaying the bullets.
I have tried deactivating the attribute float: left and the bullets are displaying, but the list is vertical. My list must be aligned horizontally with the bullets.
I have tried add the follow attributes:
list-style-position: inside and outside and nothing.
using display: inline makes the bullets disappear.
#test ul {
list-style-type: disc
}
and nothing
I have tried changing the margin with different values, adding padding with different values, and nothing.
You could make the lis inline and the list-style of the ul to none and then emulate the bullets using the :before pseudo element:
ul {
list-style: none;
margin: 0;
}
li {
display: inline;
}
li::before {
content: "o ";
}
Of course, instead of "o" you could use an unicode character representing a bullet.
Create the bullet with an image and set it as the background.
try with :
ul{
list-style:disc outside none;
padding:0px;
padding-left:12px;
margin-left:8px;
}
Demo
might be a bit late but including a span tag inside with display:list-item seems to fix the problem when the margin and padding adjustment fails..refer https://stackoverflow.com/a/18337398/1776573. It worked for me when the margin and padding adjustments dint solve the issue..
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;}