PDA

Click to See Complete Forum and Search --> : How to get rid of Text aroud an image?

weee
09-20-2005, 04:55 PM
I have this simple HTML/CSS that shows an image on the left side of the text. What I'm trying to do is simple. I'm trying to make it that way that the text WON'T go under the left image BUT will stay as a block on the right side.


<p><img src="image.gif" style="float: left; padding: 4px 8px 0px 0px;"> <strong>Lorem Ipsum</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquet placerat elit. In enim. Nullam rhoncus mi id tortor. Ut congue velit eget lacus convallis hendrerit. Suspendisse laoreet, mauris a mollis feugiat, arcu lacus eleifend eros, vehicula accumsan quam dui eget justo. Nullam a elit. Sed risus orci, posuere sit amet, fermentum eget, pellentesque vitae, orci.</p>


How can I do it?

Thanks!
bathurst_guy
09-20-2005, 07:10 PM
put the text in a div and float:left this and the image
weee
09-20-2005, 07:17 PM
So whould I keep the <P> or what?
bathurst_guy
09-20-2005, 07:20 PM
what doctype are you going for? if strict then you image needs to be enclosed in a tag still. so eg

<p><img src="image.gif" style="float: left; padding: 4px 8px 0px 0px;"> </p><p style="float: left;"><strong>Lorem Ipsum</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquet placerat elit. In enim. Nullam rhoncus mi id tortor. Ut congue velit eget lacus convallis hendrerit. Suspendisse laoreet, mauris a mollis feugiat, arcu lacus eleifend eros, vehicula accumsan quam dui eget justo. Nullam a elit. Sed risus orci, posuere sit amet, fermentum eget, pellentesque vitae, orci.</p>

this as is should work but only for one paragraph. if there are more just put them in a div
weee
09-20-2005, 07:28 PM
It's not working right.

I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
bathurst_guy
09-20-2005, 07:49 PM
sorry yeh only working in ie,
ill have a play with it later
chrisrock79
09-20-2005, 08:33 PM
It seems that making both your <p> float left throws it off in Mozilla.

Use this and works in both

<p style="float: left; padding: 4px 8px 0 0;">
<img src="logo.gif" /></p>
<p><strong>Lorem Ipsum</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquet placerat elit. In enim. Nullam rhoncus mi id tortor. Ut congue velit eget lacus convallis hendrerit. Suspendisse laoreet, mauris a mollis feugiat, arcu lacus eleifend eros, vehicula accumsan quam dui eget justo. Nullam a elit. Sed risus orci, posuere sit amet, fermentum eget, pellentesque vitae, orci.</p>


Also, I closed your <img> tag. Instead of using <br /> to seperate header info, just make a new paragraph. You could actually get rid of this:


<p><strong>Lorem Ipsum</strong></p>


by using this:

<h1>Lorem Ipsum</h1>


Also, I never thought about it, but what about using a <p> only to hold an image, is this ok?


Chris
IncaWarrior
09-21-2005, 12:33 AM
<p><img src="image.gif" style="display:block; float: left; padding: 4px 8px 0px 0px;"> <strong>Lorem Ipsum</strong><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin aliquet placerat elit. In enim. Nullam rhoncus mi id tortor. Ut congue velit eget lacus convallis hendrerit. Suspendisse laoreet, mauris a mollis feugiat, arcu lacus eleifend eros, vehicula accumsan quam dui eget justo. Nullam a elit. Sed risus orci, posuere sit amet, fermentum eget, pellentesque vitae, orci.</p>

How about that one?