When I try to get my list item's text to wrap with an indent so there is no text under the bullet points of the list my bullet points disappear.
I have set up the list's CSS this way:
ul
{
display:table;
}
li
{
display:table-row;
}
How do I get my bullet points to show again?
Thank you in advance!
[edited for clarity]
By setting display:table-row you remove the default list bullets, and there is (in CSS as currently defined and implemented) no way to get them back (if you wish to keep that display:table-row—it’s not obvious why you are using it).
However, you can produce markers of your own, using generated content. e.g.
li:before {
content: "\2022";
padding-right: 0.5em;
}
The notation \2022 stands for U+2022 BULLET “•”. Usually it does not look the same as default list bullets, but similar. You might wish to experiment with different fonts (you can set the font of the pseudo-element different from the font in the item contents).
You need display: list-item for the bullet to display. Remove the display: table-row from the <li> elements. Not only does it remove the bullets, list-item wraps the content properly anyway.
Related
I need to break the text in my vertical menu in 2 lines when there is more than one word in the "ul li" item.
In other words, I need to have a tag "br" between the two words in the element "li", but with css.
The images below make things clearer.
I have this
IMAGE
I need this
IMAGE
Edit1: Live site: http://www.l9web.com.br/sites/test
You can try to use word-spacing.
Try
ul li {
word-spacing: 'parent-width'; // Percentages will not work
}
Where 'parent width' is the width of the parent element. Maybe in the case the unordered list? That should give you one word per line. Best of luck!
I created a working pen: https://codepen.io/anon/pen/XYWBWW
If all you are going for is one word per line - set the word-spacing value to be larger than the width of the parent container. Any value will work:
ul li {
word-spacing: 9999px; // very high value to force one word per line
}
I found the solution.
On "ul li" we have to set:
white-space: pre-wap
Thanks for all
Can anybody help me correct this: http://jsfiddle.net/ShgRr/ so that the div displays it's content consistently with the ol?
The main problem is that the right-positioned span is breaking outside the div.
I did consider making the div a li item but that would obviously be un-semantic.
Something else I was wondering - is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?
Thanks
Why use a <div>? Your CSS will work just fine if you move the contents into a new <li> with that class name: http://jsfiddle.net/ShgRr/2/
I'd argue that making the <div> an <li> is perfectly fine. <table> elements contain both table headers and table rows without problems.
"is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?"
it is more correct to remove the bullet entirely if you don't want it there.
if you do want ti these - I don't tend to make bullets themselves clickable - they're a very small target compared to whatever they're bulleting. Easier to click the text than the bullet
your can add this class in your CSS, html part
div a span > i
{
margin: 0 8px;
}
I'm trying to style an ordered list that seemed quite simple but apparently is harder than I thought, what I need to do is to separate every item with a white border below, the problem is the the "bullet" or "list number" is not part of the li element so the border gets placed below the text only, here's an image of what I mean:
http://www.diigo.com/item/image/1j40h/5eni
I'm trying to find a way to make the bottom border span across the whole border but I haven't been able to, I though about adding a verticaly repeated background to the ol but if the text takes more than one line it won't work, my last resort was to use a ul without bullets and have the user type the number himself that what it'd be part of the li but this doesn't sound very user friendly :(
Can anyone help me? Thanks in advance!
Use list-style-position CSS property for your ol element:
ol
{
list-style-position: inside;
}
It will make your bullets part of the displayed list item content. This is all in accordance with CSS 2.1 specification ( http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position )
How do you achieve this kind of menu:
About | Privacy | Contact | Site Map
... a menu separated by a vertical bar, but the first and last item doesn't have a bar on the left and right sides (as shown in the example)?
The menu items are generated dynamically (used in wordpress), not manually.
thanks.
If you are using list items as the mark-up for your navigation you can display a line between each link by creating the separator as a background image on the li.
The trick to get it to only appear in between list items is to position the image to the left of the li, but not on the first one. This example uses the adjacent selector:
#nav li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
This CSS adds the image to every list item that follows another list item - in other words all of them but the first.
Alternatively you can use the CSS content property with the before pseudo class, instead of an image. The following code adds a pipe before your navigation links (again using the adjacent selector).
#nav li + li a:before {
content: "|";
}
Be aware the content property is not supported in IE6 and IE7, and the adjacent selector is not supported in IE6.
See here for CSS contents and browser compatibility - http://www.quirksmode.org/css/contents.html
The vertical bar is just a character on the keyboard, so you can type it in between the words.
Found an easier solution for wordpress!
Just go to Appearance>Menus and add " |" in the end of the Navigation Label for each title of the menu!!
I think the best way to do this is with a CSS class.
In Appearance → Menus:
http://d.pr/i/I9ko+
Click Screen Options
Check CSS Classes
Add a class of “last” to your last menu item
Then in your style.css, add:
#nav li.last span {
display: none;
}
Who thought that styling a list of links could be so troublesome!
First issue I would like to use an
arbitrary char as the bullet. I am
sure now that this is impossible but
maybe you know different?
In any case I would like to control the distance between the bullet and the contents of the <li>.
I would like to control the height of the bullet (so it stays centered to the text in the <li> irrespective of fonts/sizes etc).
I would like the bullet to stay within the <div> that contains the <ul> rather than hang out the side.
I would like long items in a <li> to wrap around leaving the bullet clear of the text.
I want it to work in all browsers above IE6. with as little special pleading for IE's weirdnesses as possible! (this means I cannot use :before)
I am tempted to use <span> and </br> rather than lists!
http://css.maxdesign.com.au/listamatic/
First of all, make sure you use a remove the paddings/margins of the list element using CSS so you will have a clean slate for all browsers. Then, if you always want the bullet image to be centered, use an image.
ul{
margin: 0;
padding: 0;
}
ul li{
padding: 0 0 0 20px; /*so text does not appear on top of bullet */
background: url(error.gif) no-repeat 0 50%; /* this will set the bullet to appear in the middle */
}
For an unordered list, you will have to make a graphic to display an arbitrary character. The other available values are:
list-style-type: disc | circle | square | none
To make the bullet stay within the text instead of hanging out, use
list-style-position: inside
??? Not sure what you mean about "wrap around" in your last point.