Overlapping pics and posts
I’ve been using
<div>tags to keep multiple photos in one post from overlapping each other, as advised by one of the nice tech support guys at SF Wordcamp ’08 a few months ago. That seemed to help keep two images from overlapping on a stand-alone page, but it clearly is not the right solution when dealing with multiple two images in a blog post.
This week, for example, I tried to publish a post with four images, and it’s a mess. The images aren’t just overlapping each other in the post, they’re overlapping previous blog posts.
You can take a look at it at http://100w.wordpress.com/. (BTW, this is a class blog and the pics relate to a class research project.)
My question: Is there a way to make multiple images work in a blog post? Or do I have to create multiple blog posts of one pic each if I have multiple images?
I’d appreciate any suggestions.
Why not try tables?
Replace “row1, cell 1” below with the image URLs, and/or adjust the table according to how you want because below code is for four box square table.
<table border="0"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
@cmccune: Yes it’s an impressive mess (but easily corrected), and yes that advice is wrong. Every tag within brackets, such as the one you pasted, is an “opening” tag. It needs to have its companion closing tag along the way (same tag with a slash before the word), otherwise it’s effect is not over and carries over to the rest of yourmain blog page (with obvious results…).
For starters go to your html post editor and delete all those stand-alone div tags. Next tell us what exactly you mean by overlapping and/or how exactly you want your images (in relation to one another as well as with the text) so we can suggest solutions. Of course you can manage multiple images in a single post – in more ways than one.
(For the moment forget the suggestion about tables.)
I’m assuming she’s closing the div tags of course. If I’m not mistaking, the div tag doesn’t always works perfectly on all themes.
@arifsali: Have you seen the blog page and the source code? She’s got each image enclosed in div tags with the style attribute, PLUS an opening div tag before, that never gets closed and messes the rest of her blog page.
Thanks. That works! I really appreciate it.
My hand coding is usually limited to simple formatting and linking, so I haven’t really done much with tables. Nice to add this to my (limited) repertoire.
What I noticed in the blog post that was screwing up is that it seemed like WP was automatically throwing in closing tags at the end of the post. I ended up with a pile-up of several of them. So I deleted what I thought were the extras…which may be where I went wrong in the first place. Maybe they weren’t “extras.”
I looked at a previous post where I used the div tag with two photos, to try to keep them from overlapping. I think I opened and I closed the div tag around every pic.
For example, in that post, here’s how I coded it using the div tag:
<div><a href="http://100w.files.wordpress.com/2008/10/fly_nite.jpg"><img class="alignleft size-full wp-image-144" style="border:1px solid black;margin:10px;" title="fly_nite" src="http://100w.wordpress.com/files/2008/10/fly_nite.jpg" alt="" width="332" height="400" /></a></div> <div style="margin-top:50px;"><a href="http://100w.files.wordpress.com/2008/10/byrds_450p.jpg"><img class="alignleft size-full wp-image-148" style="border:1px solid black;margin:10px;" title="byrds_450p" src="http://100w.wordpress.com/files/2008/10/byrds_450p.jpg" alt="" width="450" height="557" /></a></div>
Can you tell me if I did something wrong there?
@panaghiotisadam: I just read your comment again, and this time I think it sank in. I see what you mean. For some reason I thought I needed a stand-along div tag, plus one that specified the style. So I was doubling the tag up without realizing it. Duh.
Thank you all so much for your help.
@cmccune: Yeah, that’s it – and WP was quite correctly throwing in the closing tags! To put it otherwise, the number of appearances of “<div” must equal the number of “</div”.
And the div-style-margin command, although correctly coded, is unnecessary. Why are you using it?
Now, I understand that by overlapping you meant images jumping the one next to the other instead of below it. All you had to do (when initially uploading them) is set the alignment to None* and hit return after inserting each one. And note that this complication arose because you were using Andreas 09, a flexible-width theme: with a fixed-width theme there would simply be no room for side-by-side images.
* For future uploads, you can set that once for all in Settings>Media.
For batch processing of multiple images there’s also the “gallery” feature, which will automatically arrange your images in columns (the number of which you can specify). See the FAQs on gallery, or -better- see this post by our justjennifer:
The topic ‘Overlapping pics and posts’ is closed to new replies.