Page 1 of 1
List Margin with floating image
Posted: Tue May 17, 2011 10:24 am
by danst0
Hi,
I have a question for the style / css pros here: Is there a way to automatically increase a lists margin when next to a (left) float image?
Problem: I have a thumbnail left floating picture and next to it a bullet point list. Now, the bullets are directly above the picture (to little margin there).
Right now I manually increased the margin for those lists with a separate css class. This is a) inconvenient and b) for a longer list which extends till below the thumbnail leads to a list where the margin is too big (since it is not automatically) adapted.
Here's a screenshot of this problem:
Re: List Margin with floating image
Posted: Tue May 17, 2011 12:34 pm
by yellowled
danst0 wrote:Is there a way to automatically increase a lists margin when next to a (left) float image?
As always, it depends.
If "next to" means "after it in the source", the adjacent sibling selector should work, i.e.
If you have more than one list following the image, the generals sibling selector (img ~ ul) targets all of the siblings. However, these could be difficult to use and/or result in quite some css given the fact that images from the s9y media db come in various shapes and sizes, or better: different code snippets.
Also note that both selectors can be buggy in various browsers and don't work in IE<7 at all. If you still care about those, you could use jQuery to assign classes to those lists.
For those longer lists, you most definitely want to float the ul to align it properly (don't forget to clear the float!).
YL
Re: List Margin with floating image
Posted: Tue May 17, 2011 1:40 pm
by danst0
Hi,
I tried floating the ul, without success. In this article I have multiple lists, and in this case only the first <li> really needed to be floating. The rest should be just on the left side.
So both screen shots are not optimal, since the float just does not work as I expect it and the non floating element should have all list items from the second farther to the left side...
Daniel
Re: List Margin with floating image
Posted: Tue May 17, 2011 5:16 pm
by yellowled
danst0 wrote:In this article I have multiple lists, and in this case only the first <li> really needed to be floating. The rest should be just on the left side.
Slight confusion here. Could you maybe post a mockup or a description of how it is supposed to look plus a link to the article in question?
YL
Re: List Margin with floating image
Posted: Tue May 17, 2011 5:20 pm
by danst0
I already have a temporary fix on the blog (by spliting the list in two), and this is how it is supposed to look.
http://scrmblog.com/archives/246-This-W ... -2011.html
Daniel
Re: List Margin with floating image
Posted: Tue May 17, 2011 5:52 pm
by yellowled
danst0 wrote:I already have a temporary fix on the blog (by spliting the list in two)
If I get this correctly, it's pretty simple: Keep the styles for the
ul, but add an extra margin for the first
li of any ul which is "next to" (a.k.a. "after it in the source order") a floated image.
Code: Select all
.serendipity_img_left + ul li:first-child { margin-left: 90px; }
However, this won't work in your current article since the img is wrapped in the first paragraph of the entry. It would have to be inserted right before the ul.
You could even provide similar styles for images floated right, but beware of images including a caption below because those are wrapped in divs, so the sibling selector won't work as usual.
There is, by the way, one issue with this: If your images have different widths, this won't work, especially not if you provide the margin-left in px.
YL
Re: List Margin with floating image
Posted: Tue May 17, 2011 6:06 pm
by Don Chambers
Hmmm.... I'm thinking out loud here. The template you are using is a modified version of Bulletproof. I see that the image you are using is the same for all your "this week in..." entries. I also see that all these entries are assigned to the same single category.
How about assigning that image as an category image (ie, icon). By doing so, the image will be outside of the entry body div container. You will probably have to float the image, which will be contained in <span class="serendipity_entryIcon">.
I don't know if this will accomplish your objective or not, but if the image is always the same for every entry in that category, it will make your life a little easier by eliminating the need to always embed the same image in each entry over and over each time.
Re: List Margin with floating image
Posted: Tue May 17, 2011 6:29 pm
by danst0
Thank you, but I only would move the image as a last resort.
I just played with the margin of the image itself. But this has a different than expected effect on the list items (see screenshot).
The Headline text and the list item _text_ (vs. the bullet) are aligned. Couldn't I switch that so that the headline is aligned with the bullet?
That's a suspicious behaviour, since in my normal texts (without a floating image next to it) the bullets are aligned correctly with the texts above and below.
Daniel
Re: List Margin with floating image
Posted: Tue May 17, 2011 7:16 pm
by danst0
Very seldom I found so few results on google on a topic.
I think this fixed my issue:
http://stackoverflow.com/questions/7101 ... g-elements
instead of before:
Code: Select all
ul {
margin-left: 0.5em;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0.5em;
}
I now have:
Code: Select all
li {
position: relative;
left: 1em;
}
ul {
margin-left: -0.2em;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0.5em;
}
Since I did only copy and paste: Does somebody know if this could have negative side effects (up to now my pages look good, but I only tested with FF and Safari)?
Daniel
Re: List Margin with floating image
Posted: Tue May 17, 2011 8:03 pm
by yellowled
danst0 wrote:I just played with the margin of the image itself. But this has a different than expected effect on the list items (see screenshot).
Actually, that's just how I would expect it to turn out.
danst0 wrote:The Headline text and the list item _text_ (vs. the bullet) are aligned. Couldn't I switch that so that the headline is aligned with the bullet?
Yes, but again: All this depends largely on your actual source code order as well as overall CSS styles, not only the ones related to the li elements or img. Try to not only play with the styles for the li elements, but also the ul. Try resetting the margins and paddings for both as a starting point.
The real issue here is to find a set of styles which will work for any ul as well as uls adjacent to a floated img, and for that you'll either have to assign classes to those ul or use the adjacent sibling selector.
YL
Re: List Margin with floating image
Posted: Tue May 17, 2011 8:06 pm
by yellowled
danst0 wrote:I now have:
Code: Select all
li {
position: relative;
left: 1em;
}
ul {
margin-left: -0.2em;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0.5em;
}
You can write the latter way shorter, BTW:
danst0 wrote:Does somebody know if this could have negative side effects (up to now my pages look good, but I only tested with FF and Safari)?
Might get funny if you nest uls, but that's almost always the case. Apart from that I don't see any side effects unless you float the ul.
YL