Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have this bullet when using <li> tag with list-style: circle:
How can I change the border of the circle with css? Like this:
You cannot change the styling of that circle, but you can apply list-style: none; to the list to hide the list icon and add circle elements using li: before pseudo elements, having the settings as below or similar:
ul {
list-style: none;
}
li {
position: relative;
}
li:before {
position: absolute;
left: -1.2em;
bottom: 0.3em;
content: ' ';
display: block;
width: 0.45em;
height: 0.45em;
border: 2px solid lightblue;
border-radius: 50%;
}
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I want my last list item to have rounded corners on the right, but it doesn't work. Can't figure it out by my self, tried everything and searched everywhere.
#navigation {
float: left;
border: 1px solid #C0C0C0;
border-radius: 20px;
background: linear-gradient(#64717E, #E5E3DE);
box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000;
}
#navigation ul {
height: 20px;
margin: 0;
padding: 0;
}
#navigation ul li {
padding: 0 15px 0 15px;
display: inline;
// border: 2px solid #C0C0C0;
background: linear-gradient(#64717E, #C0C0C0, #64717E);
list-style-type: none;
}
#navigation ul li:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#navigation ul li:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<div id="navigation">
<ul>
<li><a href="#">start<a></li>
<li><a href="#">imperdiet<a></li>
<li><a href="#">condimentum<a></li>
<li><a href="#">nunc<a></li>
<li><a href="#">phasellus<a></li>
</ul>
</div>
Feedback as for the rest of the html and css is appreciated.
Your problem is that you haven't closed your <a> tags and instead are opening a nested <a> tag which isn't even a valid thing.
This means your ul li:first-child works, because your first child is present and valid, but then the <a> tag is never closed, so the browser gets confused, and never knows where a a last-child is.
Just close your <a> tags.
<div id="navigation">
<ul>
<li>start</li>
<li>imperdiet</li>
<li>condimentum</li>
<li>nunc</li>
<li>phasellus</li>
</ul>
</div>
JSFiddle example
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I'm trying to make my navbar list items have a border on each side, but I want them still to be connected just like this:
http://prntscr.com/4wa4q4
When I try to add the border to both sides, they're spaced out and with no margin the 2 borders on each list item are together. How could I do it like in the picture?
http://jsfiddle.net/9Leecphh/
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
CSS:
ul{
list-style: none;
}
ul li:first-child{
border-left: 1px solid gray;
}
ul li{
border-right: 1px solid gray;
display: table-cell;
padding: 5px 20px;
color: #FFF;
background: #000;
margin: 0;
}
Just add border-right on your li and border-left on li:first child. Then you can get it like in the screenshot.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Here is my CodePen: http://codepen.io/ScottBeeson/pen/rxquJ
So basically when you hover over an entity, a menu slides up. I'm trying to create a submenu for each menu item that basically mirrors the menu functionality, but slides down from the bottom of the menu. Here is an image of what it should look like:
And here is my current HTML:
<div class="entity">
<span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>
I can think of a couple ways to do this with JQuery, but I'm wondering if it's possible to do with CSS. Obviously, populating the menu will be via javascript, but I'm trying to use CSS as much as possible. So to put it in question form: If I put a static div with a class of "submenu" inside my entity, is there any way with CSS/LESS to trigger it when I hover over a div inside the menu?
I don't use LESS, so I can't help you with that.
However, I made you this code, which displays the menu on hover, and the submenu when you hover the menu items. You could set up the structure for a entity like this:
<div class="entity">
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>C</li>
</ul>
</div>
And combine it with this CSS:
.entity {
margin: 5px;
position: relative;
display: inline-block;
width: 260px;
height: 200px;
background-color: lightblue;
}
.entity ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background-color: rgb(0,0,0); /*fallback*/
background-color: rgba(0,0,0,.5);
bottom: 0px;
}
.entity li:hover {
background: black;
color: white;
}
.entity:hover > ul { /* only display direct ul child of .entity */
display: block;
}
.entity li {
display: inline-block;
padding: 10px;
}
.entity li > ul {
background: black;
}
.entity li:hover > ul {
display: block;
left: 0;
bottom: -100%;
}
I hope you can add the smooth effects yourself. Good luck.
Ow, and a DEMO
[EDIT]
Made a (bit sloppy though) animation using transitions, check the updated Fiddle.
Is it possible to style this html ...
<ul>
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>Tigers</li>
<li>Zebras</li>
<li>Giraffes</li>
<li>Bears</li>
<li>Hippopotamuses</li>
<li>Antelopes</li>
<li>Unicorns</li>
<li>Seagulls</li>
</ul>
... like this ...
... without adding classes to specific list items, or resorting to javascript? And if so how?
The line breaks are not fixed; the list widens to take up additional space, and list items are center aligned.
Just
li + li::before {
content: " | ";
}
Of course, this does not actually solve the OP's problem. He wants to elide the vertical bars at the beginning and end of lines depending on where they are broken. I will go out on a limb and assert that this problem is not solvable using CSS, and not even with JS unless one wants to essentially rewrite the browser engine's text-measurement/layout/line breaking logic.
The only pieces of CSS, as far as I can see, that "know" about line breaking are, first, the ::first-line pseudo element, which does not help us here--in any case, it is limited to a few presentational attributes, and does not work together with things like ::before and ::after. The only other aspect of CSS I can think of that to some extent exposes line-breaking is hyphenation. However, hyphenating is all about adding a character (usually a dash) to the end of lines in certain situations, whereas here we are concerned about removing a character (the vertical line), so I just can't see how to apply any kind of hyphenation-related logic, even with the help of properties such as hyphenate-character.
We have the word-spacing property, which is applied intra-line but not at line beginnings and endings, which seems promising, but it defines the width of the space between words, not the character(s) to be used.
One wonders if there's some way to use the text-overflow property, which has the little-known ability to take two values for display of overflow text at both left and right, as in
text-overflow: '' '';
but there still doesn't seem to be any obvious way to get from A to B here.
This is possible with flex-box
The keys to this technique:
A container element set to overflow: hidden.
Set justify-content: space-between on the ul (which is a flex-box) to force its flex-items to stretch to the left and right edges.
Set margin-left: -1px on the ul to cause its left edge to overflow the container.
Set border-left: 1px on the li flex-items.
The container acts as a mask hiding the borders of any flex-items touching its left edge.
.flex-list {
position: relative;
margin: 1em;
overflow: hidden;
}
.flex-list ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-left: -1px;
}
.flex-list li {
flex-grow: 1;
flex-basis: auto;
margin: .25em 0;
padding: 0 1em;
text-align: center;
border-left: 1px solid #ccc;
background-color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
<ul>
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>Tigers</li>
<li>Zebras</li>
<li>Giraffes</li>
<li>Bears</li>
<li>Hippopotamuses</li>
<li>Antelopes</li>
<li>Unicorns</li>
<li>Seagulls</li>
</ul>
</div>
Before showing the code, it's worth mentioning that IE8 supports :first-child but not :last-child, so in similar situations, you should use the :first-child pseudo-class.
Demo
#menu{
list-style: none;
}
#menu li{
display: inline;
padding: 0 10px;
border-left: solid 1px black;
}
#menu li:first-child{
border-left: none;
}
<ul id="menu">
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>More animals</li>
</ul>
Use :after pseudo selector. Look http://jsfiddle.net/A52T8/1/
<ul>
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>Tigers</li>
<li>Zebras</li>
<li>Giraffes</li>
<li>Bears</li>
<li>Hippopotamuses</li>
<li>Antelopes</li>
<li>Unicorns</li>
<li>Seagulls</li>
</ul>
ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }
EDIT:
jQuery solution:
html:
<div>
<ul id="animals">
<li>Dogs</li>
<li>Cats</li>
<li>Lions</li>
<li>Tigers</li>
<li>Zebras</li>
<li>Giraffes</li>
<li>Bears</li>
<li>Hippopotamuses</li>
<li>Antelopes</li>
<li>Unicorns</li>
<li>Seagulls</li>
<li>Monkey</li>
<li>Hedgehog</li>
<li>Chicken</li>
<li>Rabbit</li>
<li>Gorilla</li>
</ul>
</div>
css:
div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }
jQuery
var maxWidth = 300, // Your div max-width
totalWidth = 0;
$('#animals li').each(function(){
var currentWidth = $(this).outerWidth(),
nextWidth = $(this).next().outerWidth();
totalWidth += currentWidth;
if ( (totalWidth + nextWidth) > maxWidth ) {
$(this).css('border', 'none');
totalWidth = 0;
}
});
Take a look here. I also added a few more animals. http://jsfiddle.net/A52T8/10/
I know I'm a bit late to the party, but if you can put up with having the lines left-justified, one hack is to put the pipes before the items and then put a mask over the left edge, basically like so:
li::before {
content: " | ";
white-space: nowrap;
}
ul, li {
display: inline;
}
.mask {
width:4px;
position: absolute;
top:8px; //position as needed
}
more complete example:
http://jsbin.com/hoyaduxi/1/edit
This should solve the problem without using borders.
li {
display: inline-block !important;
list-style: none;
margin: 0 auto;
height: 14px;
}
ul li::after {
content: " | ";
margin: 0 10px;
}
ul li:last-child:after {
content: '';
margin: 0 10px;
}
<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty</li>
<li>Twenty One</li>
<li>Twenty Two</li>
<li>Twenty Three</li>
<li>Twenty Four</li>
<li>Twenty Five</li>
<li>Twenty Six</li>
<li>Twenty Seven</li>
<li>Twenty Eight</li>
<li>Twenty Nine</li>
<li>Thirty</li>
</ul>
</div>
One solution is to style the left border like so:
li { display: inline; }
li + li {
border-left: 1px solid;
margin-left:.5em;
padding-left:.5em;
}
However, this may not give you desirable results if the entire lists wraps, like it does in your example. I.e. it would give something like:
foo | bar | baz
| bob | bill
| judy
I came across a solution today that does not appear to be here already and which seems to work quite well so far. The accepted answer does not work as-is on IE10 but this one does.
http://codepen.io/vithun/pen/yDsjf/ credit to the author of course!
.pipe-separated-list-container {
overflow-x: hidden;
}
.pipe-separated-list-container ul {
list-style-type: none;
position: relative;
left: -1px;
padding: 0;
}
.pipe-separated-list-container ul li {
display: inline-block;
line-height: 1;
padding: 0 1em;
margin-bottom: 1em;
border-left: 1px solid;
}
<div class="pipe-separated-list-container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty</li>
<li>Twenty One</li>
<li>Twenty Two</li>
<li>Twenty Three</li>
<li>Twenty Four</li>
<li>Twenty Five</li>
<li>Twenty Six</li>
<li>Twenty Seven</li>
<li>Twenty Eight</li>
<li>Twenty Nine</li>
<li>Thirty</li>
</ul>
</div>
Slightly modified SCSS version which gives you control of the pipe | size and will eliminate padding from first and last list items while respects borders.
$pipe-list-height: 20px;
$pipe-list-padding: 15px;
.pipe-list {
position: relative;
overflow: hidden;
height: $pipe-list-height;
> ul {
display: flex;
flex-direction: row;
> li {
position: relative;
padding: 0 $pipe-list-padding;
&:after {
content: " ";
position: absolute;
border-right: 1px solid gray;
top: 10%;
right: 0;
height: 75%;
margin-top: auto;
margin-bottom: auto;
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
&:after {
border-right: none;
}
}
}
}
}
<div class="pipe-list">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Yes, you'll need to use pseudo elements AND pseudo selectors: http://jsfiddle.net/cYky9/
You can use the following CSS to solve.
ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }
Should work on IE8+ as well.