Images on the left, text next to them on the right
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:
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.
The blog I need help with is singularityuniverse.me.
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.)
Thanks Panos, that worked out perfectly! You saved me again, mate!:)
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.
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
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>
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!
Oh yeah, hell yeah!
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!
The topic ‘Images on the left, text next to them on the right’ is closed to new replies.