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:
List Margin with floating image
List Margin with floating image
- Attachments
-
- with additional margin
- Screen shot 2011-05-17 at 10.18.07.png (53.41 KiB) Viewed 10470 times
-
- without additional margin
- Screen shot 2011-05-17 at 10.17.32.png (54.44 KiB) Viewed 10470 times
Re: List Margin with floating image
As always, it depends.danst0 wrote:Is there a way to automatically increase a lists margin when next to a (left) float image?
If "next to" means "after it in the source", the adjacent sibling selector should work, i.e.
Code: Select all
img + ul { margin: ... }
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
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
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
- Attachments
-
- without Float
- Screen shot 2011-05-17 at 13.30.43.png (71.85 KiB) Viewed 10462 times
-
- With UL float: left
- Screen shot 2011-05-17 at 13.31.14.png (82.23 KiB) Viewed 10462 times
Re: List Margin with floating image
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?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.
YL
Re: List Margin with floating image
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
http://scrmblog.com/archives/246-This-W ... -2011.html
Daniel
Re: List Margin with floating image
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.danst0 wrote:I already have a temporary fix on the blog (by spliting the list in two)
Code: Select all
.serendipity_img_left + ul li:first-child { margin-left: 90px; }
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
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
Re: List Margin with floating image
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.
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.
=Don=
Re: List Margin with floating image
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
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
- Attachments
-
- Screen shot 2011-05-17 at 18.19.08.png (83.57 KiB) Viewed 10453 times
Re: List Margin with floating image
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:
I now have:
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
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;
}
Code: Select all
li {
position: relative;
left: 1em;
}
ul {
margin-left: -0.2em;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0.5em;
}
Daniel
Re: List Margin with floating image
Actually, that's just how I would expect it to turn out.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).
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.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?
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
You can write the latter way shorter, BTW: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; }
Code: Select all
ul { margin: 0 0 0.5em -0.2em; }
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.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)?
YL