Need help? Check out our Support site, then


Images on the left, text next to them on the right

  1. 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. 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. Thanks Panos, that worked out perfectly! You saved me again, mate!:)

  4. You're welcome!

  5. 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. 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. 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. 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.

About this Topic

Tags

No tags yet.