Wordpress Themes - WP Forum at BFA - What's the easiest way to wrap text around image in a page?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)

- - What's the easiest way to wrap text around image in a page? (http://forum.bytesforall.com/showthread.php?t=6987)

What's the easiest way to wrap text around image in a page?

Hi,

I'd like to place description text to the right of an image, then another image below the first one and then more text to the right of the second image, etc. Paragraphs and brakes didn't seem to work. Do I use DIV for the image and the text or only the text? The images are aligned left. The <pre></pre> tag changes the font type.

Do I need to create CSS properties for each image and text block? Is there a simpler way to do this?

PS. Here's a link: http://www.fla-ewa.com/wpblog/?page_id=22

Thanks!

George

It would seem what you have to do is:

Add first image
Add text below image
Add second image below text
Add second block of text below second image
Click on first image and go into properties and select float left
Go into second image properties and select float right
Tweak

The way the text floats will depend on how much text you have and the space allotted for it.

Thanks Larry,

maybe I didn't explain well... I'd like description text to float to the right of each image. The method you described doesn't work as expected - I already tried that. "Float left" is CSS property right? I setup "alignleft" for the images. It looks right in the Dashboard box, but not after the page is updated.
Is there a way to add text into an invisible text box to right of the image in a div kind of like this:

HTML Code:

<div style="position:absolute; left:450px; top:385px; width:407px; height:118px; padding: 10px; overflow: auto;">..text here...</div>

..or that's not a good idea?

Thanks!

__________________

George

position:absolute can be problematic. how about using tables?

Well, I was trying to avoid tables. It definitely looks really weird... I'm trying to work in the Contacts page. It kind works if when I have the image laignleft and put the text in a div which I aligncenter, but then I need to have a section name (wrapped <h4>) which places itself right under the div text no matter what I did. I tried to alignleft to no success.

Why this basic stuff is so hard to accomplish? Do I need to create a custom CSS for positioning?

Thanks!

George

If this page indicates what you are trying to do then the addition of

HTML Code:

<div style="clear:both;"> </div>

between each image/text combo is what I did. I put the first image in and set it to align left. I then added the text for the image. Then I went into HTML mode and added the clear:both item. Then I added the second image and set it to align right. Then I added the second text block.

setting up the table is not too hard, try this for your post

HTML Code:

<table><tr><td><div id="attachment_85" class="wp-caption alignnone" style="width: 160px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/ul_logo.jpg">



<img class="size-thumbnail wp-image-85" title="ul_logo" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/ul_logo-150x150.jpg" alt="" width="150" height="150" />

</a>

<p class="wp-caption-text">Underwriter Laboratories

</p>

</div>

</td><td>

</td><td><blockquote>

<p>Underwriter Laboratories was founded in 1894. It has undisputed reputation as a leader in U.S. product safety testing and certification with more than 17 billion UL marks applied to products worldwide.

</p>

</blockquote>

</td></tr></table>



<table><tr><td><div id="attachment_58" class="wp-caption alignnone" style="width: 115px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/iso_logo.png">

<img class="size-full wp-image-58" title="iso_logo" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/iso_logo.png" alt="ISO Seal" width="105" height="97" />

</a>

<p class="wp-caption-text">ISO Seal

</p>

</div>



</td><td><blockquote>

<p>A sign of commitment to quality manufacturing processes, procedures and continuous improvement. Passed extensive third-party examination of our testing, inspection, manufacturing, employee training and customer service programs. Demonstrated ablity to achieve customer satisfaction.

<br />

Nearly 100 percent customer satisfaction rate, according to an independent survey.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_122" class="wp-caption alignnone" style="width: 140px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/certificatelogo.gif">

<img class="size-thumbnail wp-image-122" title="eurocertificatelogo" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/certificatelogo-130x150.gif" alt="" width="130" height="150" />

</a>

<p class="wp-caption-text">European Certification

</p>

</div>



</td><td><blockquote>

<p>CE certification indicates that our products conform to essential heath and safety requirements as established by the European Union.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_57" class="wp-caption alignnone" style="width: 110px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/iaqa.png">

<img class="size-full wp-image-57" title="IAQA" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/iaqa.png" alt="" width="100" height="115" />

</a>

<p class="wp-caption-text">Indoor Air Quality

</p>

</div>



</td><td><blockquote>

<p>The Indoor Air Quality is a nonprofit, multi-disciplined organization, dedicated to promoting the exchange of indoor environmental information though education and research, for the safety and well being of the general public.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_86" class="wp-caption alignnone" style="width: 75px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/WQA-Seal.png">

<img class="size-full wp-image-86" title="WQA-Seal" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/WQA-Seal.png" alt="" width="65" height="65" />

</a>

<p class="wp-caption-text">Water Quality Association

</p>

</div>



</td><td><blockquote>

<p>Water Quality Association tests and certifies water treatment equipment. Gold Seal-certified systems meet or exceed industry stands for:

<br />

Contaminate reduction, Product performance, Structural integrity, and Materials safety.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_67" class="wp-caption alignnone" style="width: 93px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/rohs.png">

<img class="size-full wp-image-67" title="ROHS" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/rohs.png" alt="" width="83" height="100" />

</a>

<p class="wp-caption-text">RoHS

</p>

</div>



</td><td><blockquote>

<p>The RoHS regulations implement EU directive 2002/95 which bans the placing of the EU market of new electrical and electronic equipment contaning more than agreed levels of lead, cadmium, mercury, hexavalent chromium, polybrominated biphenyl (PBB) and polybrominated diphenyl ether (PBDE) flame retardants.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_62" class="wp-caption alignnone" style="width: 160px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/nsf_logo.png">

<img class="size-thumbnail wp-image-62" title="NSF" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/nsf_logo-150x150.png" alt="" width="150" height="150" />

</a>

<p class="wp-caption-text">National Sanitation Foundation

</p>

</div>



</td><td><blockquote>

<p>National Sanitation Foundation is a leader in developing standards and independent testing of residential and commercial water treatment devices.

<br />

Conducts annual facility inspections and periodic product retesting to ensure compliance with national public heath standards.

</p>

</blockquote></td></tr></table>



<table><tr><td><div id="attachment_68" class="wp-caption alignnone" style="width: 114px">

<a href="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/sa_logo.jpg">

<img class="size-full wp-image-68" title="SA" src="http://www.fla-ewa.com/wpblog/wp-content/uploads/2010/05/sa_logo.jpg" alt="" width="104" height="105" />

</a>

<p class="wp-caption-text">Canadian Standards Association

</p>

</div>



</td><td><blockquote>

<p>Canadian Standards Association accredits products based on the National Standards Systems in Canada.

<br />

Each standard is reviewed at least every five years as part of a process of continual improvement.

</p>

</blockquote></td></tr></table>

Thank you!

It worked out nicely! I had the images "alighleft" and for the text <blockquote class="alignright"> which kind of worked. It would have been nice If there's was a way to float the text abour 20px to the right of each image. It's all good now, the tables will be fine.

George

seems to me that you should set a width for teh image so the columns all line up nicely

Hello,
I'm a new user of Atahualpa, and I'm also having problems with text wrapping. I have a post with an image and caption on the right and some blockquotes in the body. The blockquotes won't wrap with the image, instead appearing below the caption. If I reformat the text as just paragraphs, the problem resolves. How can I get images (with captions) to play nice with blockquotes?
The post in question can be found at http://maizeresearch.org/pioneer-geneticists/
Thanks very much!
Anastasia

Using 3.4 and I don't understand why this is such a problem.
Text wrapping an image is basic.
I do not want to have to teach clients how to create tables and make it harder for them to use thier sites.

The blockquotes won't wrap. The only thing I could do is create my own "blockquote" using a div like this.

HTML Code:

<div style="background-color:#xxxxxx;border:1px solid black;padding:5px;margin-left:200px;">Text for blockquote</div>

The left margin has to be enough to clear a right aligned picture. If you have a left aligned picture you would use a different margin.

Quote:

Originally Posted by abodnar (Post 32850)

This isn't a matter of Atahualpa but HTML. Wrapping and clearing wraps can be problematic and I sometimes have to dive into the HTML itself making sure part of the image code hasn't gotten messed up with the wrapped text code.

The "easiest" way I have found to wrap text is go to the Visual editor and put in the first image hit enter to go to next line and add the text for the first image. Then hit enter again to go to the next line and add another image, enter, text, etc. Not click on the images and set the align left or right as desired.

I THINK that process should work OK.

Yikes. So if I want to use this theme, I can't use blockquotes and photos in the same post. That's not so good.

Hurray! Thanks very much, Larry!
I used <div style=margin-left:40px>text</div>, and it worked great.

I saw your last post and I'm glad you got something working but I wanted to respond and say again that this problems is not related to Atahualpa. It's just the way HTML works.

Quote:

Originally Posted by abodnar (Post 32924)

Yikes. So if I want to use this theme, I can't use blockquotes and photos in the same post. That's not so good.

Looking for a cure to WP text-wrap not working. From what I know, its supposed to wrap automatically in WP 3.0 when you put the cursor at the beginning of the text and insert the image. Mine is not text wrapping. What could be the problem?

I have never heard anything about automatic text wrapping. When you put the image in you can select to align left or right which is a function of html not WordPress.