Using WordPress and I want to avoid having the second line text of my bullet points wrap down under the bullets. I'd like clean bullets to one side and text to the other. This is the CSS I am using. Any thoughts?
.entry-content ul li { list-style-type: none; font-size: 100%; list-style-position: outside;} .entry-content ul li:before { content: "✓"; padding-right: 10px; font-weight: bold; font-size: 20px; color: #718336; }
try the outside position on the UL instead of the li:
.entry-content ul {
list-style-position: outside;
}
see: http://www.w3schools.com/cssref/pr_list-style-position.asp
for the :before tag, you'll want to position that absolutely and move it to where the circle was (or try negative margin-left) should get you what you are looking for*
Related
I am trying to set properties of the ul and li items within a class but it's not working. This is for the wordpress jetpack social media icons.
I have
.widget_wpcom_social_media_icons_widget .genericon {
font-size: 21px;
}
.widget_wpcom_social_media_icons_widget ul {
list-style-type: none;
}
.widget_wpcom_social_media_icons_widget li.menu-item {
margin-right: 100px;
}
Only the first one, setting the size, seems to work. The others don't. The second one is to remove the bullets before the media icons and the second one is to add a space between the icons as the icons are inside span blocks. Why are they not working?
To remove bullet points use
.widget_wpcom_social_media_icons_widget ul li {
list-style: none; }
You cannot give margin to a span since it is a inline level element, instead you can make the .menu-item as inline block and give margin this way
.widget_wpcom_social_media_icons_widget li.menu-item {
display:inline-block;
margin-right: 100px;}
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;
}
Here Is the link of the page on which I am working.
In the CONSULTANT section there is a list. I want to make the bullets size smaller.
I have done CSS:
.career ul li span {
font-size: 18px;
}
.career ul li{
font-size: 10px !important;
}
Please help me to make bullets size smaller.
Thanks
There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size
#trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.
.career ul li {
font-size: 0.5em;
}
You can use :before to create your own bullet and have it's own font-size
.career ul li {
list-style: none;
}
.career ul li:before {
content: '■';
vertical-align: middle;
display: inline-block;
margin-top: -3px;
font-size: 12px;
margin-right: 4px;
}
Fiddle
To reduce the size of bullet list, we can use before pseudo element.
For the list we have to give
ul{
list-style: none;
}
And then using pseudo element, we can create bullet as per our needed size and content
ul li:before {
content: ".";
position: absolute;
}
You can style the positions by giving top,bottom,left, right values.
If you have any queries please check,
http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html
Code was taken from the above site.
I use the following menu:
<ul id="menu">
<li class="subMenu">
<h2><span>menu item</span></h2>
<div>
<p><span>submenu item</span></p>
</div>
</li></ul>
I have the following css:
ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2,ul#menu h3 {
font-size: 1em;
font-weight: bold;
display: inline;
}
ul#menu li a {
text-decoration: none;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.subMenu a {
padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
}
ul#menu li.hovered div {
display: block;
}
ul#menu li.subMenu div a {
text-decoration: none!important;
}
can anybody advise how i can keep menu item hovered when i hover over the submenu item
thank you in advance.
Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)
You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)
However, please pay attention to the commenters above! Their observations are entirely correct and germane:
The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.
http://www.devinrolsen.com/pure-css-horizontal-menu/
You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.
So I am doing a custom ol li list, and i really get confused with shortcuts css wise for ol , ul and li stuff.
If i tell you what I want, and provide some sample code could someone help please.
Ok so I am after a numbered list like so...
<ol>
<li>Dave Jones<span class="searchTotals">189 searches</span></li>
<li>Debs<span class="searchTotals">34 searches</span></li>
<li>Tarbutt<span class="searchTotals">211 searches</span></li>
</ol>
What I want to do is NOT repeat the span class within the li element, so perhaps you could help.
Also I wanted to number style each li.
In so far as put a circle around each number..
Here is some css for the numbers.
background: none repeat scroll 0 0 #ec008c;
border-radius: 1em 1em 1em 1em;
color: #FFFFFF;
display: inline-block;
float: right;
font-family: inherit;
font-size: 10px;
font-weight: bold;
line-height: 1em;
margin-left: 0.5em;
padding: 0.35em 0.5em;
text-align: center;
text-decoration: none;
Here is some css for the SPAN class.
float:right;
color:#3399ff;
Trying to get it to look like this:
if you are looking to float all the text in the div left without using span tags you can use this: (can't select just part of the text with CSS)
ol li {
float:left;
color:#3399ff;
}
If you want to have numbers with circles around them with the li, you're going to have to use images and use the background:url() property.
Use CSS property background for li elements