Broken image layout

bibliokaren · Member · Mar 26, 2009 at 9:44 pm
Copy link

Add topic to favorites
All —

I’ve tried searching the forums to no avail, but I might not be using the right search terms.

As (I hope) you can see in my blog, the format of my images is wonky. What I’d like is a list, aligned left, with an image and text next to the image, then a space and the next image. It looks fine in the editor, but when I update the post it seems to be removing the line breaks between elements.

I’ve tried forcing line breaks with
and <p> tags, and it doesn’t work. I’ve checked to make sure my images aren’t too big for my theme, and they aren’t. This is driving me absolutely batty, and I really hope someone will tell me this is a simple problem and help me fix it!

Thanks,
Karen

The blog I need help with is: (visible only to logged in users)
bibliokaren · Member · Mar 26, 2009 at 9:46 pm
Copy link
my apologies — accidentally posted twice.
bibliokaren · Member · Mar 26, 2009 at 10:22 pm
Copy link
And one more update…the url is http://clpteensburgh.wordpress.com
1tess · Moderator Emeritus · Mar 27, 2009 at 12:17 am
Copy link
bibliokaren,
In my opinion, you should use a table to make your images and text align with each other as you are describing. You could use an offline editor such as Windows Live Writer (? I’m using a Mac so I think that is right ¿) or an online table generator. Or write the HTML yourself. All you need is a simple table.
Something like this:
```
<table border="0" align="left">
<tbody>
<tr>
<td>IMAGE_1_CODE_HERE</td>
<td>TEXT_HERE</td>
</tr>
<tr>
<td>IMAGE_1_CODE_HERE</td>
<td>TEXT_HERE</td>
</tr>
<tr>
<td>IMAGE_1_CODE_HERE</td>
<td>TEXT_HERE</td>
</tr>
</tbody></table>
```
There are refinements if you need them.
ellaella · Member · Mar 27, 2009 at 12:24 am
Copy link
Hi, Karen. You certainly do have a bazillion <p> tags there. Try this. Switch to the HTML tab. Remove all the extraneous <p> tags. Then instead of using align for those images, use float, as outlined here:

https://en.forums.wordpress.com/topic/text-around-the-image?replies=3#post-59191

You’ll need to remove the alignment code and you would, of course, change right to left for the float. You’ll see a bit more code than in the example b/c you’re using thumbnails. Just copy this (still in html tab) and make sure to paste it just before the alt tag.

style="margin: 10px; float: left"

If you’re satisfied with the effect, in future, when uploading the images/thumbs, instead of specifying left align in the uploader, choose none. Then apply the styling for float. You can adjust the margin as you like too.
1tess · Moderator Emeritus · Mar 27, 2009 at 12:39 am
Copy link
ellaella,
An elegant solution I think. Bow to your more experience! I’ve only used “float” left or right for making columns in a post. Thanks—I’ll play with this when my brain recovers from these past 2 days of stressful work.
ellaella · Member · Mar 27, 2009 at 1:04 am
Copy link
Thank you, tess. I love float and use it with all l/r images within posts. I believe it’s deprecated but still works without fuss. CSS I can understand, but I am one of those HTML wimps who resorts to WLW for tables.
1tess · Moderator Emeritus · Mar 27, 2009 at 2:00 am
Copy link
WLW? Windows Live Writer? Yes?
I’m on a Mac, so have not experience with it.
CSS looks like a mystery to me. The little I have experimented with HTML, it seems very logical, unlike CSS.
ellaella · Member · Mar 27, 2009 at 2:37 am
Copy link
Yes, Windows Live Writer. Tables without having to think. :)
bibliokaren · Member · Mar 27, 2009 at 3:25 am
Copy link
Thank you for your help! I’ll try to fix tomorrow and let y’all know how it works.
bibliokaren · Member · Mar 27, 2009 at 3:41 am
Copy link
I’m far more of an html wimp, since I rely heaving on the visual editor! I tried your fix and it looks better, but still off. Am I missing something? http://clpteensburgh.wordpress.com.

Oh — and I know the extraneous <p> tags are there, but I can’t see them in the html editor, so I’m not sure how to remove them…I think wordpress is hiding them from me.
ellaella · Member · Mar 27, 2009 at 3:57 am
Copy link
I only looked at one and you have:

<img class="" height="100" width="66" alt="" style="margin: 10px; float: left;" src="http://syndetics.com/index.aspx?isbn=0689852223/SC.GIF&client=einet&type=hw7" title="house of the scorpion"/>

The style is supposed to go before alt and the rest of that is a mess.

The major, major concern is you are hotlinking the image and that is verboten. You’d be shocked if you saw the image I put up in place of hotlinked images. The thieves take them down in no time.

Download the images to your hard drive. Upload them to your space as outlined above. Your space and bandwidth here are free. Don’t steal them from those who pay for them.
bibliokaren · Member · Mar 27, 2009 at 3:35 pm
Copy link
Okay…they’re not stolen — syndetics is a service my library subscribes to, and we’re allowed to use the images for booklists like these. But if downloading them will make it work better, I’ll give it a shot. And I did put the style before alt and when I updated, wordpress moved it — I actually redid it several times. I’ll continue fiddling.
bibliokaren · Member · Mar 27, 2009 at 4:14 pm
Copy link
I tried all that and it still wasn’t working right. I ended up using unordered lists, with each book being its own list entry. I know it’s not pretty, code wise, but it looks okay.

No items found.