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;
}
Related
I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
I built a small mobile website with AngularJS & Bootstrap. Please see http://www.quaaoutlodge.com/mobile/
Now I would like to move the text into the center of the <li list items but when I add a padding-bottom or margin-bottom to the #desc element, the text doesn't move up at all but the reserved space seems to just go across the <li border. Why is this? How do I change this so that I achieve above described effect?
Thank you!
edit 1
I changed the <span style from id to class, added display: inline-block; and padding-bottom: 10px;and the padding gets applied right now but, how do I move the text up while the icon on the left stays so that they get aligned centred to each other?
First, you need to fix the problem of having non-unique id elements on the page! You should probably be using a class for #desc, instead of an id.
In regards to the padding on the #desc span, you need to set the display style to inline-block, and then you should be able to use padding to affect the space around it.
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 )
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
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.