I created tabs using <li>. I used css to add style but the problem is, there is a space between tabs. I tried to add margin: 0px; in ul.tabs li but the spaces are still there.
Please see the link http://jsfiddle.net/cfv65agn/
Thanks.
A straightforward fix is to set the font size of your ul with the class "tabs" to 0, and set the proper font size on the list items directly.
This will remove the default spacing between them, without the need of magical negative numbers.
I just tested, and the following works:
ul.tabs {
font-size: 0;
}
ul.tabs li {
font-size: 16px; /* set to the font size you want */
}
Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.
Adding float: left to your ul and li will fix it too (make ul 100% width as well):
CSS
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
float: left;
}
ul.tabs li {
background: #ffffff;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
border: 1px solid #afafaf;
margin : 0px;
float: left;
}
Here's a jsFiddle
probably it is because you have set display:inline-block in ul.tabs li.
changing it to float:leftwill fix this. this usually happens when there is a \n between inline-block elements
display: inline-block will honour white-space between them. Simply delete the tabs an spaces between your li's. The will unfortunately make your code slightly less readable, but you can more or less compensate by putting a line break within the li, at the end.
Related
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.
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.
You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.
Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}
I build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.
#sidebar1 li {
list-style: none;
position: relative;
width: 120px;
height: 30px;
padding: 0 20px;
background-color: black;
line-height: 30px;
cursor: pointer;
}
#sidebar1 li a {
text-decoration: none;
color: white;
}
What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu's item a link will be clicked. Thats problem is that i tried it and it didnt work
Move most of the styling to the A-tag and fix a few things:
#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0 <-- added.
}
#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}
Just use display: block to make the a element fill the available horizontal width of the parent element:
#sidebar1 li a{
text-decoration:none;
color: white;
display: block;
height: 100%;
}
The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you'll enforce a space between the edges of the a and the li.
Further, in your li I've not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they're not over the link then the cursor's type, that of pointer, is merely confusing when clicking produces no effect:
#sidebar1 li {
list-style: none;
position: relative;
width:120px;
height: 30px;
background-color: black;
line-height: 30px;
}
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