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
Related
I'm learning CSS and I'm trying to copycat a simple nav bar from this website.
I want a black background to appear when hovering over an item so I did this:
nav a:hover {
background: black;
}
but the background is only covering the text. I want to it to cover the entire element like in the original site.
And here's the anchor tags CSS if you need it:
nav a {
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
float: left;
padding-right: 2em;
margin-top: 1.5em;
}
I coded the same as on your example website, hope it helps: http://jsfiddle.net/yL7yj4xL/1/ (You have to remove padding-right and replace it for just padding)
I'm assuming you have the nav elements in a <ul><li></li></ul> structure.
in that case, change the nav a:hover to nav li:hover
EDIT:
Made this fiddle off of your pen: https://jsfiddle.net/djgsgqp5/
Your nav ul and li elements were getting no height. If you hover on those elements in the devtools youl see they only have a width.
The style in the fiddle is much more stable hopefully does what you need.
Hope that helps!
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 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.
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
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.