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 )
Related
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.
I am trying to make an image map that pops-up different pictures at different places on the map. I want to be able to make a second "pop-up" after the first one on my images, but I have tried various changes to my code and it has yet to be effective. Is what I am trying to do possible in CSS? I feel like it should be, but because I am not aware of any examples of it, I feel uncertain.
I realize that part of the problem is that the "inner" span which indicates my "hello" box is not distinguished from the "span" that goes with the box with the picture. I am not sure how to make these distinct. The Second dot turns from blue to yellow only when it is being hovered over, so I don't know why the "hello!" box does not behave the same way.
Here is my code: http://jsbin.com/AmAqito/3/edit?html,css,output
*Notice the blue dot in the middle.
Thanks!
Try changing your #map li a:hover span selector to #map li a:hover > span. This will target only the span on the level immediately after the anchor tag.
The demo http://jsbin.com/ibAtiNu/1/edit
I have this code here. If you open it a browser other than IE, then you would be able to see that the 3rd and 5th li of the ul.submenu have also an img inside. In IE unfortunately it's not displayed on the 3rd li, and it's going underneath like in a different line as if it lacks floats. Normally, the img should just expand the li as in the rest browsers.
I have tried changing the display property of both li and img, as well as various margin and padding combinations of the img but with no luck.
Anyone knows why this happens and what should I do to reach the proper result? Any help will be very much appreciated! :)
Number 1 rule of styling lists: use display:block on the A-tag and put all styling there (other than things for positioning/hiding/showing your lists).
See my tutorail: I love lists.
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 using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul