HTML and CSS

Images

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2008

Posts: 15

Reputation: cab_driver is an unknown quantity at this point

Solved Threads: 0

cab_driver cab_driver is offline

Offline

Newbie Poster

Images

Aug 15th, 2009

I'm trying to get text to wrap around an image. I put in:

<img src="picture.gif" align="right">
then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?

Thanks

Last edited by peter_budo; Aug 16th, 2009 at 4:25 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Images

Aug 16th, 2009

Help with Code Tags

(Toggle Plain Text)

<p><img src="picture.gif" style="float:right">then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?</p>

•

Join Date: Aug 2009

Posts: 12

Reputation: Gerald19 is an unknown quantity at this point

Solved Threads: 0

Gerald19

Offline

Newbie Poster

Re: Images

Aug 17th, 2009

I don't know if this is what you are looking for, but I always use tables to wrap text around images. Makes it very easy to align too.
Let me know if this works for you, goodluck!

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<HTML>
<HEAD>
<TITLE>wrapping text around image</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
	<TR>
		<TD colspan=3>** text goes here **</TD>
	</TR>
	<TR>
		<TD>** text goes here **</TD>
		<TD>** image goes here</TD>
		<TD>** text goes here **</TD>
	</TR>
	<TR>
		<TD colspan=3>** text goes here **</TD>
	</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>wrapping text around image</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
	<TR>
		<TD colspan=3>** text goes here **</TD>
	</TR>
	<TR>
		<TD>** text goes here **</TD>
		<TD>** image goes here</TD>
		<TD>** text goes here **</TD>
	</TR>
	<TR>
		<TD colspan=3>** text goes here **</TD>
	</TR>
</TABLE>
</BODY>
</HTML>

Last edited by Gerald19; Aug 17th, 2009 at 2:37 am.

•

Join Date: Jul 2008

Posts: 101

Reputation: ingeva is an unknown quantity at this point

Solved Threads: 9

ingeva

Offline

Junior Poster

Re: Images

Aug 18th, 2009

•

Originally Posted by Troy III

Help with Code Tags

(Toggle Plain Text)
<img src="picture.gif" style="float:right">then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?
<img src="picture.gif" style="float:right">then add my text, but it only seems to allow one line of text, then everything else drops beneath the image. I've looked at various sites and they all say that this is how it's done. Does anyone els have a suggestion?

Should be very easy. Just move the BEHIND the image specification.

Yes, I'm running Ubuntu. Of course.

•

Join Date: Jan 2009

Posts: 1,396

Reputation: almostbob has a spectacular aura about

Solved Threads: 170

almostbob

Offline

Nearly a Posting Virtuoso

Re: Images

Aug 18th, 2009

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<img height='100' height='100' alt='alt text' style='float:right'>
<img height='100' height='100' alt='alt text' style='float:right'>

works as expected with the sizes specified

Note: with the <img> inside the element, only the text of that will wrap around the image. (examples assuming elements are not styled elsewhere )

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div><p><img height='100' height='100' alt='alt text' style='float:right'>this text will wrap around the image</p>
<p>this text will not</p>
</div>
 
<div><img height='100' height='100' alt='alt text' style='float:right'><p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>
<div><p><img height='100' height='100' alt='alt text' style='float:right'>this text will wrap around the image</p>
<p>this text will not</p>
</div>

<div><img height='100' height='100' alt='alt text' style='float:right'><p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>
<p>this text will wrap around the image</p>

Last edited by almostbob; Aug 18th, 2009 at 7:08 am.

Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Images

Aug 19th, 2009

why do you suggest using " height='100' height='100' " when <img src="picture.gif" style="float:right">then add my text,... , will be more generic and will work for all sizes of a given image?

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Images

Aug 19th, 2009

•

Originally Posted by ingeva

Should be very easy. Just move the BEHIND the image specification.

That was my answer to cab_driver, and there is nothing wrong with that code, yet in rare cases when the image has (contectually) nothing to do with the text content, your suggestion will be better siuted, but thanks anyway.

Last edited by Troy III; Aug 19th, 2009 at 7:14 am.

•

Join Date: Jan 2009

Posts: 1,396

Reputation: almostbob has a spectacular aura about

Solved Threads: 170

almostbob

Offline

Nearly a Posting Virtuoso

Re: Images

Aug 19th, 2009

•

Originally Posted by Troy III

why do you suggest using " height='100' height='100' " when <img src="picture.gif" style="float:right">then add my text,... , will be more generic and will work for all sizes of a given image?

•

Originally Posted by w3schools

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).http://www.w3schools.com/tags/att_img_width.asp

'work' is such a subjective description,
html & xhtml get more strict with each iteration,
'work correctly' is better,
'work correctly tomorrow' is better still
a "generic" page would likely load the image from a database in which the src alt width and height are stored in table columns
<img <?php echo $sqlqueryresultcontaining_src_alt_width_height ?> />

Last edited by almostbob; Aug 19th, 2009 at 9:14 am.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Images

Aug 19th, 2009

You are twisting the issue...
Your statement was:
<img height='100' height='100' alt='alt text' style='float:right'> "works as expected with the sizes specified"

Meaning, it will not work without size specs.
But that's missinformal and untrue since <img src="picture.gif" style="float:right">... will work perfectly and -especially as expected!

I'm a coder, not a sourcerer. And I was not in possition to pressume that his image is 100x100px of size as you did - so what if your code enforces his f.i: 170x90px to get stretched and squeezed sametime.

This is the reason why I didn't give myself a luxury to specify the hight and width of an image I never saw before, and especially not when dealing with: how to make text wrap arund image without dropping all other lines under it and especially, and because alt='' height='' width='' or any other attributes are a part of his duty and their values out of my knowlledge and precognition abilities.

Tip: It is a good practice to specify both the height and width attributes for an image only when you know its dimensions and absolutely sure that the source image will be available. Otherwise, if these attributes are set, the space required for the image is reserved and when the page is loaded your paragraphs will render unequal and without a visual clue of a missing image that will make your page look ugly. However, without these attributes, the browser does not know the size of the image, and will not reserve blank unnecessary space for it. The effect will be that the page layout will not change during loading nor after it has loaded and the client will never know that the page is not finished.
www.schoolsOfCodingExperience.com

But in all other cases and when certain - I strongly recommend to pecify image dimensions because of at least one minor benefit, which is: the content will not be forced to reflow if loaded before the browser gets image dimensions.
But an independently floating element - when present - will allways happen to make a part or the whole document content reflow at least once. Therefore I strongly advise to float only elements that are part of some imediate block-level element container as in my given example.

Regards, and thank you very much for your shed light and insight on this matter.