The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it?
See the example: http://jsfiddle.net/gduDm/1/
ul li {
list-style-type: disc !important;
column-break-inside: avoid;
}
ul {
list-style-type: disc !important;
margin-top: 1em;
column-count: 2;
column-gap: 0.5em;
}
I think the bullets are there, but they're being rendered to the left of the viewing area. Try:
list-style-position: inside;
Adding both padding-left and a negative text-indent to the list elements seems to produce the desired result:
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul {
list-style: inside disc;
}
http://jsfiddle.net/mblase75/gduDm/4/
Alternatively, add a margin-left to the list element (instead of the list) and use outside bullets:
ul li {
margin-left: 1em;
}
ul {
list-style: outside disc;
}
http://jsfiddle.net/mblase75/gduDm/9/
Setting margin-left:1em makes the bullets appear without messing with the text indentation.
After trying the first answer here, I was having issues with my list items spilling onto a second row and not lining up. Using column-gap I was able to move the second column over and see the bullets.
Source: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/
<!– CSS CODE –>
.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-gap: 40px;
}
Some of the other solutions are pretty good, but all the ones I tried caused various side effects for me. I made some small tweaks and tried to get it as close to perfect as possible.
ul {
column-count:2;
}
ul.solution {
margin-left:-0.6em;
margin-right:0.6em;
}
ul.solution > * {
margin-left:0.6em;
margin-right:-0.6em;
}
Experimental Group
<ul class="solution">
<li>
This solution is pretty similar to the others.
</li>
<li>
It does not require you to put the bullets inside, so you can keep your left edge clean if you want.
</li>
<li>
This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
</li>
</ul>
Control Group
<ul>
<li>
This solution is pretty similar to the others.
</li>
<li>
It does not require you to put the bullets inside, so you can keep your left edge clean if you want.
</li>
<li>
This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
</li>
</ul>
Related
I am trying to create a <ul> with no bullets (i.e. list-style-type: none) where the items have a hanging indent (all lines except first are indented). I do not mean that all <li> after the first should be indented-- rather that, if an <li> spans more than one line, all lines after the first should be indented within that <li>. How can I achieve this?
So far I've tried:
text-indent: 5px hanging: no effect, hanging is not yet supported
text-indent: -5px; padding-left: 5px: found this trick here, but it did not work in this context
the solution at this SO question, which didn't work for unbulleted lists
NOTE: I know that I can achieve this by other means (e.g. using <p>s instead of a list), but I am wondering whether it is possible with <ul>.
You can add some padding and a negative text-indent.
ul {
list-style: none;
padding-left: 40px; /* Most browsers already have this by default */
}
li {
text-indent: -20px;
}
<ul>
<li>Hello<br />world<br />foo bar</li>
</ul>
Is this what you are trying to achieve?
ul {
list-style: none;
margin: 0;
padding-left: 20px
}
li {
text-indent:-15px;
}
<ul>
<li>test
<br/>me</li>
</ul>
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
I am trying to create indentation for buttons that sit inside of a nested ul li structure.
I can't change the HTML as it is being rendered by a third party system.
The HTML
<ul>
<li><button>Parent</button>
<ul>
<li>
<button> Child</button>
<li><button>Parent</button>
<ul>
<li>
<button> Sibling etc</button>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
The ul and li have no margin or padding so the idea was to simply add padding to the button elements.
The issue is, because of the ul having no margin/padding, the buttons all start from the exact same point and there (no matter how deep they are nested) all have the exact same indentation.
LESS
ul{
li{
button{
padding-left: 25px;
}
ul{
li{
button{
padding-left: 35px;
}
}
}
}
}
I thought of doing something like the above (and account for as many levels as possible) but it would be a nightmare to maintain.
Surely there is a more elegant way to handle this, thoughts?
I don't know why you would want to go as far as to write a mixin for this.
My solution in LESS:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Would that solve the problem for you?
The resulting CSS would look like this:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Alright, so I thought of a different solution and looked at the LESS documentation but the underlying problem is that you can't know the number of levels of nesting coming into play beforehand obviously.
Thus you would have to wait for the HTML to be rendered, then read out the level of nesting (e.g. 5 levels) and based on that you could generate the CSS, which I'm afraid wouldn't make much sense and is something to be done in JavaScript.
All of that being said you could use a few variables to ease your writing process in LESS but that's about it. Here for an example:
#padding: 25px;
#addten: 10px;
#selector: ul button;
#selector { #padding; }
ul #selector { #padding + #addten; }
ul ul #selector { #padding + #addten*2; }
ul ul ul #selector { #padding + #addten*3; }
Probably you could also create a mixin for that to add another layer of abstraction but like I said, I wouldn't go thus far.
Hope this helps. =)
I've being trying this for about 5 hours already, and I'm feeling really, really dummy. :s
The overall code is w3c validated.
The problematic snipped:
http://jsfiddle.net/ZnzYk/
I've tried making the circle bullets with css using border radius;
I've tried using a pseudo element.
I've tried using sprites.
The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.
So I give up all methods and I'm trying with a background image.
THE CSS:
#main-navigation ul li {
display:inline;
}
#main-navigation ul li a {
font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: inline-block; /*seems to help on IE*/
font-size: 1.25em;
margin-right: 6%;
text-align: right;
text-transform: uppercase;
background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
padding-right: 4%;
text-decoration: none;
}
#main-navigation ul li a:hover {
color: #ED1E79;
text-decoration: none;
background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%;
}
THE HTML
<div id="main-navigation">
<ul>
<li>item 1</li>
<li>and this is item 2</li>
<li>item 3</li>
</ul>
</div>
I get everything but consistence. :(
I don't mind if it stays more or less really, but all least, not that different as it is right now.
Update:
After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it's more on top, on all others the bullet it's on bottom (due to the padding-top added);
Isn't there a better CSS code to have the bullets vertically aligned with the text, that don't require a px by px adjustment ?
The intended result:
May be you should add some padding-top:2px (or 3px too) into #main-navigation ul li a.
It works fine with my browser than, did not check it on all.
check here: http://jsfiddle.net/ZnzYk/1/
Hey i just got one more thing to you, I don't know it may help you.
vertical-align: middle
Here you can play with it at w3schools.
Is there a CSS property that tells the browser to word-wrap at any position, not only at word boundaries?
My current issue is this. I am faced with HTML similar to this: (I cannot change the HTML, unfortunately)
<div id='categories'>Categories:
<ul>
<li>Category One</li>
<li>Category Two</li>
<li>Category Three</li>
</ul>
</div>
I want it to display in a flowing manner according to the width of the viewport:
Categories: • Category One • Category Two • Category Three
|----------------------------------------------------------------| (viewport)
Categories: • Category One • Category Two
• Category Three
|----------------------------------------------| (viewport width)
Categories: • Category One
• Category Two • Category Three
|----------------------------------| (viewport width)
... but NOT word-breaking within a category name.
So I tried this:
#categories ul {
display: inline;
}
#categories li {
display: inline;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
Unfortunately this causes them all to run in one line. So I need to be able to tell the ul to allow wrapping anywhere between any adjacent lis. How do I do that?
I need a CSS-only solution; I cannot change the HTML...
A useful trick for wrapping boxes is to make them all float: left. If I do this to your example, then I get the layout you want except for "Categories:" being pushed to the right. Unfortunately, I don't know of a way to select the text so as to make it floated.
We can use content to re-insert "Categories:" as one of the floated boxes, which leaves the problem of how to hide the existing "Categories:" text without hiding the other contents of #categories. The cleanest way I thought of was to make it transparent. However, this is a CSS3 feature; also, this loses any inherited color due to the need to explicitly set it on the ul.
This stylesheet produces everything you want, but needs some tweaking for spacing.
#categories {
color: transparent;
}
#categories ul {
color: black;
}
#categories li {
display: inline;
float: left;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
#categories li:first-child:before {
content: 'Categories: • ';
}
Maybe this?
<ul>Categories: <li>Category One</li><wbr><li>Category Two</li><wbr><li>Category Three</li></ul>