- This topic is empty.
-
AuthorPosts
-
January 3, 2010 at 3:31 pm #27415schedalMember
Hello folks,
Hopefully this is really simple, I have an image with float:left assigned. Then some P tags afterwards that wrap around the image. This is all no-problem. But then if I have a ul list of bullets, they don’t respect the position of the image, and get rendered ontop of/underneath the image! If I then set the ul element to float:left, this works fine, only then any subsequent P tags get stuck to the right-side of the UL elements, instead of going to the next line…
:(problem visible here:
http://www.fountain-city.com/beta/page/services
Click: "Information Architecture"
I’m lost as to why this is happening and no changes in firebug that I make seem to resolve it…
:D
Thanks for any help you can offer!!January 3, 2010 at 5:07 pm #68898JaredAMMemberThat’s interesting. You can give your list a margin-left of 200px and a width of 100% and remove the float.
January 3, 2010 at 7:20 pm #68899ThomMemberHello Schedal,
It looks like it has something to do with how you position your image, and floating the image(and shadow images), ul elements.
I managed to get the paragraph under the ul element with a clear: both. Im not sure if it works good in IE, sometimes that browser can be a pain………
Code:As needed on a project-by-project bassis. For some projects, we also break down each design/functional requirements by its cost estimate, so that a project’s scope can also be determined by what features are selected.
you can do it inline or just make a new line for it in your css file.
January 3, 2010 at 8:22 pm #68900schedalMemberThank you both for your replies, unfortunetly, neither of these solutions will work programmatically in all cases, because the bullets are sometimes beneath the image, sometimes to the right of it [depending on how much text comes before it] and the P tag cant get a "clear: both" unless all P tags get one, which would stop any of the P tags from wrapping around the image. The reason I can’t add this to just one P tag, is because all of the content is generated, and I can’t be sure if the text in one page is longer than the distance before the image is done, or shorter… having to decide this on a per-block bassis would be a work around, but a pain…
Isn’t there something I am missing? This just seems silly, do I need to wrap all of my P and UL tags in a DIV perhaps? And make the div float left? Hmm… maybe I’ll try that next…
Thanks to anyone else who may have some light-flashes!
Best,
Seb.
January 3, 2010 at 10:10 pm #68902schedalMemberpfff, no wrapping it in a div didnt help either… I can get it all to wrap "left" but then the bullet pictures get stuck behind (!?!)* the image and the bullet text properly snugs to the side of the image…
:(Am I just doing something CSS was never meant to do? This seems like such a basic thing, there must be some way to wrangle the UL tag into compliance…
:-(*: that little blue dot under the image should be the bullet picture to the left of every LI
(crying)
January 3, 2010 at 10:26 pm #68903schedalMemberalso just tried, overflow:hidden on the parent element, which makes the entire right side look perfect, but it doesn’t wrap around the image anymore when I do this… still struggling…
:(sniffsniff
January 3, 2010 at 10:34 pm #68904schedalMemberYAAY! finally, the solution was to add
Code:ul {
overflow:hidden;
}to the actual UL tag,
phew!!!
April 9, 2012 at 7:45 pm #100935marybaumMemberThank you for having this discussion! Now I can run lists in posts next to an image. I do wish there were a way to have the items wrap back under the visual once they’ve cleared the bottom (not CSS clear – English clear) but I’ll take what I can get. At least this doesn’t make me look as if people’s machines got broken ina wayback machine from 1995.
Mary Baum, April 2012
May 18, 2012 at 2:57 pm #103064Brett1211MemberThanks Schedal! Worked perfectly in both FF, IE, and chrome
December 8, 2012 at 2:33 am #116646simplypixieMemberThank you for this – it is something I have want to resolve before but could never find the answer so just left things. Now I have the solution and so simple I could kick myself.
December 11, 2012 at 11:36 am #116860djdaniel150MemberWhy are you using “float: left;” anyway. If you used absolute positioning then you wouldn’t need to float anything ever. “float: left;” or “margin-top: 5px;”, etc, is like saying, please move this element a little to the left, or a little towards the top, somewhere on the screen. This no longer makes sense when you consider the types of devices that are used to access the internet today. Positioning elements with fixed pixel values, or “float somewhere, but we aren’t sure exactly where”, is pointless. Not all devices have the same resolution, or pixel size for that matter.
December 11, 2012 at 11:43 am #116862Paulie_DMemberOh, FFS
Will you please get off this ‘absolute positioning is the solution for everything’ kick…it just ISN’T.
In fact, it’s probably the last solution I would use…after tables. :)
December 11, 2012 at 3:32 pm #116895Watson90MemberHahaha @Paulie_D.
It seems that @djdaniel150 has been set out to make our forum comments turn into angry comments with his absolute positioning.
When I think of a load absolutely positioned elements, I just think of Dreamweaver wizards that seem to love putting that particular property into every single div.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.