I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
Simple horizontal nav bar for artist portfolio website. I am in the process of changing it from a jpg based site to actually coded, and need to match the nav bar on the following page:
http://cynthia-shaffer.com/animal.html
Notice "Natural Elements", "Animal Photos", and "Henna Tattoos" the text is stacked (2 lines as opposed to 1). I want to replicate this in my ul, but can't seem to figure it out.
my code
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Natural Elements</li>
<li>Animal Photos</li>
<li>Henna Tattoos</li>
<li>Murals</li>
<li>Supplementary</li>
<li>Non-Profit</li>
</ul>
</div>
CSS:
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#nav ul li { display: inline; }
#nav ul li a
{
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
}
So the question is how to get the word "elements" to appear below "natural", without breaking the integrity of the list.
thanks in advance!!
Apply display:inline-block for the <a> tags and set the maximum desired width of a menu item using the max-width property, this will cause the text to automatically wrap when it exceeds the specified max-length
#nav ul li a {
text-decoration: none;
font-family:"Lithos";
font-size:12px;
color:c0944d;
padding: .3em 1em;
display:inline-block;
max-width:50px;
}
side note: it's better to apply display:inline-block while changing display from block, for aligning items horizontally - if you apply display:inline like you've applied to the <li> , the element will not accept width and height properties...
JSFiddle
I have these nested ul and li . When i fill background color, nested li leaves indented portion white. I have a number of li like this that gets filled from database so i cannot give margin left to individual text in li . How can i do this so that background fills whole line along with the indentation?
Right now it looks like this
I want it like this
Any suggestions how can do this? Thanks in advance. I cannot change the html markup as i'll have to change a lot of code. Is there a way to do this using this markup. these li are coming from db query so i dont have exact number of li in this case.
Demo http://jsbin.com/uReBEVe/1/
By default, <ul> has padding-left to accomodate the bullet point.
If you add this to your CSS:
ul {padding-left:0}
ul>li {padding-left:40px}
You should get the effect you want.
EDIT: Also you need to correct your HTML :p <ul> can ONLY have <li> as children.
Best thing to do is to use a structure which makes it easy for database management , html and styling(CSS) .
HTML:
<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>
CSS:
.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}
Fiddle 1.
I dont know if ul not containing li is valid or invalid.If its invalid then you can use:
<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>
Fiddle 2
Flexible, Multi-Level Nesting Solution
This is very similar to another question I answered here, and I've composed a similar solution for you below. You will want valid html by having all nested li elements inside their own ul (as others have noted here), and it would be best to control all this by some class on the outermost ul (though that is not required, but makes targeting this list a whole lot easier).
The key here is supplying the background through the :before pseudo-element, which is made to span the whole width of the outermost ul.
Here is my demo jsbin.
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}
Limitations
This solution has two main limitations:
None of the ul or li elements can have a position other than the default static set on them, as the :before pseudo-element of the li elements needs to have its only positioned parent be the .full-width-list element.
There has to be a set height on the li items. In my example I use 1.2em, but whatever height you set, it means that the li elements cannot go to two or more lines of text (so this solution only works with a single line of text).
You can do this with :before hack as you have no access to the code
Working jsBin Demo
CSS
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}
This works at arbitrary depths without hacks or nonsense.
The people saying "can't" and "impossible" in this thread really need to learn what those words mean with respect to CSS (generally, "haven't figured out how yet.") :)
The idea is simple: set a :before selector which fits the left and right edges by absolute positioning and paints a background color. You need to set a z-index: to put it behind its content, a content: '\0020' to force it to paint (that's a non-breaking space,) and you're good.
You can bound this by setting it inside a position: relative container.
<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "\00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
Your markup is broken, you should nest li in a single ul like this:
<ul>
<li>Text</li>
<li>Text 1</li>
</ul>
This was your markup
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>
I assume you see why this is wrong.
I've fixed the JSBin for you and it has the correct effect.
EDIT: You could of course add the padding-left by looping over all lis using javascript.
You could not be sure enough about browser consistency until markup cleanup and consistency, sad but true. All the suggestions from above looks good, there is bit of alternative from my practical view.
The markup:
<ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>
And CSS:
li p {
padding-left: 1em;
display: inline;
}
JSbin
p tag is optional to close in HTML subset, and generally should works in every browser anyway no matter of doctype. In case you are on xHTML and worry about validation an option could be using closing tags like:
<ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>
Try this:
<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}
See here: http://jsfiddle.net/x5K4a/
1) Your HTML is invalid (missing <li> around <ul>)
2) The only way to make indentation work as you expected is a CSS rule for each level.
ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...
http://jsbin.com/uReBEVe/12/edit
if it is just a matter of background-color, you can use a shadow of same color.
http://codepen.io/gc-nomade/pen/fxBAl (html structure fixed)
<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>
.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}
Else, if it is a background-image, i would use pseudo-element and background-attachment:fixed;(demo included in codepen , using a linear-gradient as image )
I am going to give you the proper idea how to apply css rules over the HTML contents.Below the css rules I have created just copy it and see the answer.It is the child combinator which I used!I inspect whole the answers provided by the different users which is not followed the css rules at all. Just let me know! Hope the answer!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Save the image at first to your local drive or drag and drop this image into the new tab browser to see more visible.
Here is the proper HTML structure that you should follow, with each UL element having two LI elements. One for the value of each line and one as the parent for the next indented value.
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>
For the CSS, this solution requires you to have a max number of 'levels' in your list hierarchy (see code comment)
li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/
Make note, the nth-of-type selector is supported by all browsers EXCEPT for IE8 and below.
See JSBin for working example: http://jsbin.com/uReBEVe/51
Good luck!
Both UL and OL inherit margins. Your fix would be to zero out the margin:
ul, ol
{
margin:0;
}
You can add this CSS in your code to get your desired results:
li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}
Result on jsbin is here: http://jsbin.com/uReBEVe/33/edit
#AsrafulHaque has the correct idea about using padding to extend the background width without changing nesting indents.
However, because you don't know how many < li> there will be, you can't expect this to be a pure CSS solution.
You're attempting to do a pretty awkward thing but it would be possible to loop over them and inject dynamic padding using javascript/jquery or something:
i = 40;
$('img.yourImageClass').each(function() {
$(this).css('padding-left', i+'px');
i = i + 40;
});
You could also do this type of injection with pre-processing on the server side I am sure, but definitely not with CSS alone. You need a dynamic solution (i.e. the ability to use variables) to support your dynamic output.
A very very fiddly jsfiddle but it works with a little nudge in the right direction from jQuery. Not a great resolve but a resolve none the less.
HTML
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}
jQuery
$(document).ready(function(){
$('ul').prepend('<div></div>');
});
jsFiddle here. Hopefully this works for you!
You can do like this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>
CSS Code
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}
You can see the working demo : http://jsbin.com/uReBEVe/71/edit
from your demo:
if you apply
ul{
padding:0;
margin:0;
}
everything sits flush to the wall like you want.
if you want text indents
ul ul li{
text-ident:20px;
}
which is nesting. will only targets li's that are in ul's that are nested in ul's. then what you want works and you don't need to change your code
you can also keep nesting that code
add more ul's and li's depending on the depth of your structure, but this should give you a very good base
I am working on our company website and I'm very new to HTML and CSS. I am trying to make a drop down menu for the Nav bar and I have the gist of it, but it needs some help. The dropdowns are not lining up properly, the text is too large, and the border I have is spanning the entire length of the lists.
CSS:
.menu{
padding:0;
margin:25px 0 0 0;
}
.menu, .menu li{
list-style: none;
display: block;
float:right;
padding:12px;
border-right: 1px solid #d8d8d8;
}
.menu li{
float:left;
display: block;
width: 100px;
}
.menu ul{
opacity: 0;
}
.menu ul li{
background-color: white;
}
.menu li:hover > ul{
opacity: 1;
}
.menu li.last-menu-item{
border: none;
padding-right:0;
}
.menu a{
color:#132d3c;
font-size:15px;
font-family: 'sansationbold';
text-transform: uppercase;
text-decoration: none;
font-weight:lighter;
}
.current-menu-item a{
color:#f15c22;
}
.menu a:hover{
color:#f15c22;
}
HTML:
<ul class="menu alignright">
<li class="current-menu-item">Home</li>
<li>About
<ul>
<li>Who We Ar</li>
<li>Values</li>
<li>Owners Message</li>
<li>Infotek Blog</li>
<li>Success Stories</li>
<li>Partners</li>
</ul>
</li>
<li>Products & Solutions
<ul>
<li>Security Solutions</li>
<li>Data Solutions</li>
<li>Communication Solutions</li>
<li>Connectivity Solutions</li>
<li>Infrastructure Solutions</li>
<li>Resources</li>
</ul>
</li>
<li class="last-menu-item">Contact</li>
</ul>
Can I get a little help?
http://jsfiddle.net/pQhpu/191/
Hi in this you're making some mistakes.
Don't use opacity for hide the submenus, set it with the property display:none
Set with position:relative your li and the ul inside them with position:absolute
View this demo an make any question http://jsfiddle.net/pQhpu/214/
EDIT
To resolve your request of centering the submenus in relation with his parent you can use Jquery.
I created this function for you: Review the demo here http://jsfiddle.net/pQhpu/264/
$(document).ready (function () {
$('.menu li').mouseenter(function (){
var $this = $(this),
$sub =$(this).children('ul'),
pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
move=($this.width()+pad-$sub.width())/2;
$sub.css ('left',move+'px');
});
})
All you have to change here is the name route of your li that displays the submenu; in my case is '.menu li' . This function takes the width of the submenu and his parent and make an operation to make it centered.
For the borders, put them on the a instead of the actual li. And put your padding on the a as well to push the borders to the right. You usually have to add a class like '.last' to the last item if you don't want a floating border off to the right. Will have to make the widths larger to accommodate all the text on one line, or reduce the overall size. That should get you started.
First off, your design is horrible. I think you probably copied it from somewhere, but there are so many cross-over/overlaying elements. Define each different part(menu options, drop down options, etc.) seperately, rather than applying things to all lis and what not.
Here is a fix for the width. I made the divs larger. It was pretty hard. Next you'd have to define a class for all drop down items, and then make their font-size smaller, and apply the same width as menu items so they aren't slightly larger than the menu items.
http://jsfiddle.net/pQhpu/200/
To correct the alignment issues add:
.menu, .menu li
{
padding: 12px 0 12px 0;
}
This is shown in firebug but not in your code above
.menu, .menu li
{
padding: 12px;
}
To prevent the border from spanning the entire length of the list, use the display property instead changing the opacity.
.menu ul{
display: none;
}
.menu li:hover > ul{
display: inline;
}
I have a simple drop down menu.
When i add other elements under the menu (like text for exemple) they are still visible even if the drop down menu is oppened. The drop down menu is somehow merged with the content under it, resulting in ugly superimposed content.
Here is my css :
ul#menu, ul#menu ul{
margin: 0px;
padding: 0px;
}
ul#menu li{
width: 160px;
margin: 4px 0px 0px 4px;
padding: 5px;
list-style: none;
position: relative;
float: left;
background: #eef;
border: #bbf solid 1px;
}
ul#menu li ul li{
width: auto;
margin: 4px 0px 0px 0px;
float:none;
display: none;
background: #ddf;
border: #bbf solid 1px;
}
ul#menu li:hover ul li{
display: block;
}
ul#menu li:hover{
background: #ddf;
}
ul#menu li ul li:hover{
background: #ccf;
}
ul#menu li img{
margin-right: 10px;
}
Here is my html :
<ul id="menu">
<li>
<span><img src="images/logos/file_small.png">Bilan</span>
<ul>
<li id="creer"><img src="images/logos/add_small.png">Créer</li>
<li id="consulter"><img src="images/logos/other_small.png">Consulter / Modifier</li>
</ul>
</li>
<li>
<span><img src="images/logos/chartbar_small.png">Extract</span>
<ul>
<li><img src="images/logos/pdf_small.png">Pdf</li>
<li><img src="images/logos/xls_small.png">Excel</li>
</ul>
</li>
<li>
<span><img src="images/logos/first_small.png">Module Conso/Gene</span>
</li>
</ul>
I hope you can help. :)
http://jsfiddle.net/chrisvenus/GRfDT/2/ is a fiddle with your modifications and a solution.
What I did was firstly altered the margin to make sure the text appeared in the right place (ie increasing the top margin).
Then I modified the z-index on that text to put it behind the menu stuff. You could also have modified the z-index of the menus and it might even be best practice to put a z-index on both.
<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>
z-index is basically designed for exactly this purpose - determining what order the content is in from background to foreground. For more information on it see http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
Also I shoudl note that kinakuta, although replying before your problem was fully explained, is right about the fact that you should probably be making your menu absolute rather than the content that follows it. Mainly because I suspect it will mean neater HTML overall since it will stop you having to either have a container with all your other content or making far more things absolute than you want or worst case nto making everythign take it into account so some things get moved about or overlayed by your absoluted text in other ways...
something like this: http://jsfiddle.net/chrisvenus/GRfDT/3/ (the same as before but with some swaps about where the position: absolute is)
The main issue I see is that when your menu "displays" it's pushing things below it down. You want to set the position of the nested list to absolute to remove it from the flow of the page:
#menu li ul { position: absolute; }
This will make the menu appear over the text/content instead of pushing it down.
One more thing - you'll want to add some positioning to that same ul - left 0; and top 25px; (or something around there to fit how you want it to look.)