WordPress.org

1. eagerwatcher
   Member
   Posted 3 years ago #

   This code kind of works but, not really :-(

   <div>
   <p>this is above the photo</p>
   <p><img style="margin-left: 10px; margin-right: 10px;" src="http://get-financial-help.org/images/yardsale.jpg" alt="it's a winner" align="left" /></p>
   <p>how will this all work?</p>
   <p>it's really not clear at all</p>
   <p>this is close to the bottom of the photo</p>
   <p> </p>
   <p> </p>
   <p>and this is below it</p>
   <p>and now I'm going to put another photo</p>
   <p><p>this is above the photo</p>
   <p><img style="margin-left: 10px; margin-right: 10px;" src="http://get-financial-help.org/images/yardsale.jpg" alt="it's a winner" align="left" /></p>
   <p>how will this all work?</p>
   <p>it's really not clear at all</p>
   <p>this is close to the bottom of the photo</p>
   <p> </p>
   <p> </p>
   <p>and this is below it</p></p>
   </div>

   I checked it in IE, FF and Chrome and they all display differently.

   http://get-financial-help.org/picture-test/

   Wrapping text in WordPress, apparently doesn't work at all for most mobile devices.

   So should we just forget about it for the time being?

   thanks,

   Jane

2. stvwlf
   Member
   Posted 3 years ago #

   Hi

   You might assign css float: left; to the images, and
   css clear: left; to the first paragraph that you want displayed below an image. Then you don't need all of those paragraphs as spacers. It will also cause the content to display identically across various browsers.

   If you don't understand what float and clear are for, you'd be wise to first do a little Google reading on the subject.

3. eagerwatcher
   Member
   Posted 3 years ago #

   Thanks.

   I tried, for example

   <img src="http://get-financial-help.org/images/yardsale.jpg" alt="yard sale" style="float:left"/>

   A few days ago, and added,

   img.alignright {float:right; margin:0 0 1em 1em}
   img.alignleft {float:left; margin:0 1em 1em 0}
   img.aligncenter {display: block; margin-left: auto; margin-right: auto}
   a img.alignright {float:right; margin:0 0 1em 1em}
   a img.alignleft {float:left; margin:0 1em 1em 0}
   a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

   the above to my style sheets but didn't get the desired results.

   I haven't tried css clear: left; but will do so, please tell me where do I add it in the code?

   Maybe my present style sheet is causing the problem?

   http://get-financial-help.org/misc/style.css

   thanks for taking the time to help,

   Jane

   P.S. There's a lot of info on 'floats' at

   http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

4. stvwlf
   Member
   Posted 3 years ago #

   Hi

   from your original code

   <div>
   <p>this is above the photo</p>
   <p><img style="margin-left: 10px; margin-right: 10px;" src="http://get-financial-help.org/images/yardsale.jpg" alt="it's a winner" align="left" /></p>
   <p>how will this all work?</p>
   <p>it's really not clear at all</p>
   <p>this is close to the bottom of the photo</p>

   these next two lines are unnecessary when you use clear: left
   <p> </p>
   <p> </p>

   <p style="clear: left;">and this is below it</p>
   note where i added clear: left - you wanted this line below the image. Clear: left clears the left float, meaning, the text will be below, not next to, the image

   <p>and now I'm going to put another photo</p>
   <p><p>this is above the photo</p>

5. eagerwatcher
   Member
   Posted 3 years ago #

   Gotcha!

   Thanks very much.

   I want to learn, and am happy to do the work, but there's a LOT to learn.

   Jane

6. stvwlf
   Member
   Posted 3 years ago #

   keeps it interesting...

Topic Closed

This topic has been closed to new replies.