List Margin with floating image

[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:

[yellowled]

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.

Code: Select all

img + ul { margin: ... }

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

[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

[yellowled]

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

[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

[yellowled]

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

[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.

[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

[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

[yellowled]

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.

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

[yellowled]

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:

Code: Select all

ul { margin: 0 0 0.5em -0.2em; }

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