WordPress.com

1. singularityuniverse
   Member
   Jun 12, 2012, 5:54 PM

   Hi,

   I still can't figure out how to do this:D

   What I want is an image on the left and a text description next to the image on the right.

   I actually managed to do just that on http://singularityuniverse.me/universe/ just with using enter button, but I have absolutely no idea how!:D

   Then I tried applying the following code to the custom css:

   .alignleft,
   img.alignleft {
   display: inline;
   float: left;
   margin-right: 1.5em;
   }
   .alignright,
   img.alignright {
   display: inline;
   float: right;
   margin-left: 1.5em;
   }
   .aligncenter,
   img.aligncenter {
   clear: both;
   display: block;
   margin-left: auto;
   margin-right: auto;
   }
   p {
   clear: both;
   }

   But that works only half way. I get images vertically lined up on the left side but it's somewhat impossible to position text next to them.

   Please help:)

   Martin

   The blog I need help with is singularityuniverse.me.

2. justpi
   Member
   Jun 12, 2012, 6:30 PM

   You just need some coding in the HTML editor of the post or page. For each image/text pair you need this:
   

   IMAGE CODE HERE
   <p style="margin-top:90px;">TEXT HERE</p>
   <br style="clear:both;">

   (Or you can use coding for tables.)

3. singularityuniverse
   Member
   Jun 12, 2012, 7:20 PM

   Thanks Panos, that worked out perfectly! You saved me again, mate!:)

4. justpi
   Member
   Jun 12, 2012, 7:29 PM

   You're welcome!

5. singularityuniverse
   Member
   Jun 12, 2012, 8:01 PM

   Panos, if you would be so kind, I used the code and everything seems to work great but when I hit Preview Changes, parts of the code get deleted for some reason.

   Namely:

   <br style="clear:both;">

   When I Update the site, it seems to stay there. However, is there something I could do about positioning of the text?

   Please, take a look at this to know what I mean

   http://singularityuniverse.me/2012/05/31/batman-arkham-asylum/

   Thanks!:)

6. justpi
   Member
   Jun 13, 2012, 2:23 PM

   1) Same thing happens if you switch from HTML to Visual. That's WP's fault: the editor tends to think no-content elements are wrong and removes them. Personally I never use previewing: I set the post to private, visit the actual blog page to check it, continue editing, turn to public once I'm done.

   2) The clear:both command cancels the wrap-around effect. It would stay put if you added it to the img tag instead of the br tg. But my original suggestion was based on the content I saw when I first replied (single line texts). Since the text I'm seeing now vary in size, better use a table:
   

   <table style="background:transparent;">
   <col width="150">
   
   <tr>
   <td style="padding:0;">IMAGE1 CODE HERE</td><td>TEXT1 HERE</td>
   </tr>
   
   <tr>
   <td style="padding:0;">IMAGE2 CODE HERE</td><td>TEXT2 HERE</td>
   </tr>
   
   ETC ETC FOR THE REST OF THE IMAGE/TEXT PAIRS
   
   </table>

7. singularityuniverse
   Member
   Jun 13, 2012, 2:57 PM

   Thank you very much, sir! Your knowledge truly is astonishing.

   Yes, that was an error on my part, sorry about that. For a few lines, it works great as you suggested before:)

   Will try this one as soon as I get a chance!

   Cheers, mate!

8. singularityuniverse
   Member
   Jun 13, 2012, 8:04 PM

   Oh yeah, hell yeah!

   Works perfectly!

   I had some troubles at first with the TEXT1 HERE until I figured that I had to put code AND text in not just simple text :D

   Thanks Panos, I owe you one!

Topic Closed

This topic has been closed to new replies.