Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

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


  #1  
Old May 5, 2010, 02:41 PM
digeorge
 
5 posts · May 2010
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
  #2  
Old May 5, 2010, 04:15 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old May 6, 2010, 07:54 AM
digeorge
 
5 posts · May 2010
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
  #4  
Old May 6, 2010, 08:03 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
position:absolute can be problematic. how about using tables?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old May 6, 2010, 08:16 AM
digeorge
 
5 posts · May 2010
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
  #6  
Old May 6, 2010, 08:50 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
If this page indicates what you are trying to do then the addition of
HTML Code:
<div style="clear:both;">&nbsp;</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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 6, 2010, 09:47 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old May 7, 2010, 09:54 AM
digeorge
 
5 posts · May 2010
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
  #9  
Old May 7, 2010, 10:10 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
seems to me that you should set a width for teh image so the columns all line up nicely
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old May 26, 2010, 04:00 PM
abodnar
 
8 posts · May 2010
Ames, Iowa
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
  #11  
Old May 27, 2010, 09:54 AM
ngb222
 
28 posts · Jun 2009
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.
  #12  
Old May 27, 2010, 10:29 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 27, 2010, 10:34 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #14  
Old May 27, 2010, 10:38 AM
abodnar
 
8 posts · May 2010
Ames, Iowa
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.
  #15  
Old May 27, 2010, 10:45 AM
abodnar
 
8 posts · May 2010
Ames, Iowa
Hurray! Thanks very much, Larry!
I used <div style=margin-left:40px>text</div>, and it worked great.
  #16  
Old May 27, 2010, 10:50 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Jul 21, 2010, 08:36 PM
wadams92101's Avatar
wadams92101
 
46 posts · May 2010
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?
  #18  
Old Jul 21, 2010, 09:23 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tearing out hair over getting text to wrap around image Meg Center area post/pages 10 Oct 27, 2010 01:56 PM
What is the easiest way to have a new look for a certain category of posts? X-Evolutionist Atahualpa 3 Wordpress theme 0 Mar 5, 2010 01:11 PM
Text Widget Image Link to Page Zona Sidebars & Widgets 3 Jan 26, 2010 03:17 AM
[SOLVED] How to wrap the text around a picture ireneeng Forum How-To 2 Oct 20, 2009 09:07 PM
Tiny Contact Form - problem with text wrap krystyna Plugins & Atahualpa 3 Jun 1, 2009 04:04 PM


All times are GMT -6. The time now is 06:29 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.