I've been trying to fix this for an hour now and can't find a solution.
What I want is a centered list with background image as "ticks".
I want this:
Works as it should except the dots are aligned to the left of the list ul (1140px wide) and not the left of the list item li which is centered.
You can use the css :before pseudo-class:
ul {
list-style: none;
text-align: center;
}
li:before {
content: "\2022";
}
http://jsfiddle.net/e6y9d/
If you want the dots to be aligned to the left of ul, Use dot image as background:
ul li {
text-align: center;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #1
Update
If you need the dots to be aligned to the left of list items, use the following:
ul {
list-style-type: none;
padding: 0;
text-align: center;
white-space: pre-line;
}
ul li {
display: inline-block;
padding-left: 15px;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #2
Related
I am trying to have equal spacing between four different li elements, but I end up with this:
HTML:
<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>
CSS:
ul li {
width: 25%;
display: inline-block;
text-align: center;
}
I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:
(Equal spacing)
My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.
ul {
/* Use flex boxes to align li items */
display: flex;
justify-content: space-around;
/* Remove default padding from major browsers */
padding: 0;
/* Hide the default decorations for li items */
list-style: none;
}
ul > li {
/* Display the elements in one line */
display: inline-block;
}
Check out this JSFiddle to see it working.
Try this
ul {
width:100%;
margin-left: 0;
margin-bottom: 0
}
li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
I am trying to vertically align some text within a list li and having issues.
First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
}
I tried to see if there was a way of getting the text to align to the middle.
I tried:
vertical-align: middle;
which didn't work, so then I tried:
line-height: 50px;
which also did not work, so I tried:
display: table
which worked, but the image disappears from the list item....
Does anyone know of a way to get this to work?
The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.
Buggy Demo (The issue which you are facing)
Demo
ul li {
background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
}
ul {
margin: 50px;
}
you can have
<li><span style="top:-5px; position:relative;">
Text shifted 5px upper
How about
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
position: relative;
}
ul li span {
position: absolute;
top: (x)px;
left: (x)px;
}
I'm trying to get a separator between my nav menu and I found out about the 'li + li' function, but I'm having a very hard time getting the separator in the right place. I'm trying to get it evenly place between the two placeholders centered and all. I've tried messing with the margin and padding properties with no luck.
Here's a jsfiddle along with my code and a picture example on what I'm trying to achieve. Any help is much appreciated, thanks.
http://jsfiddle.net/jzcZ4/
HTML / CSS
<style>
body {
margin: 0;
color:white;;
}
#header {
background-color: #1c2024;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
#header ul {
margin: 0;
}
#header li {
display:inline;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') no-repeat;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>odsfjkoj</li>
<li>odsfjkoj</li>
</ul>
</div>
</div>
</body>
You would use background-size/background-position in order to position the background.
In this instance, just use the shorthand:
UPDATED EXAMPLE HERE
#header li + li {
background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
padding-left: 20px;
}
I would make the li elements display:block and apply padding to all of the on left and right.. This way they have equal distances from both sides of the text
Then use 50% on the vertical position of the background image.
#header li {
display:inline-block;
padding: 0 20px;
}
#header li + li {
background:url('http://i.imgur.com/IdVT0cL.png') 0 50% no-repeat;
}
http://jsfiddle.net/gaby/jzcZ4/1/
(I have used a trick of commenting out the whitespace so that it does not affect the layout..)
I'm working on this site: http://www.bedriftsdesign.no and got two things I'm struggling with:
First the floating social icons on the left in the header won't allign vertically. I'm using display:block and a bit unsure what I'm doing wrong?
Secondly (optional) I'd prefer them to be on the background element just outside the wrapper, but unsure how to make that work?
Any suggestion on how to solve this would be really welcome.
Thanks
Ans of Question 1 just remove float:left;from here #social li its working as per your requirement :- see the attached image
CSS
#social li {
display: block;
list-style-type: none;
}
Ans of Question 2
I think you are looking this :-
CSS
#social {
background: none repeat scroll 0 0 transparent;
left: 177px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 12;
}
You are floating the list elements li and trying to undo it by setting display: block for the containing anchors a.
You shouldn't set li to be float: left; in the first place.
Find this rule
#social li { float: left; list-style-type: none; display:block; }
and remove float:left; This will align the icons vertically.
In order to align them along the header image, I would use negative margin. Find this rule:
#social{ background: transparent; margin: 0; }
and change the margin to margin: -35px;
Not sure what you mean by align them vertically. To what do you want them to align?
If you want them from up to down change:
#social li { float: none; }