Arranging photos and text
-
I’m having a problem arranging photos with text. I want to put photos on the left with text on the right. I have marked the photo to sit on the left but now when I preview the page, all the photos arrange themselves diagonally down the page, like this:
Photo – text
Photo – text
Photo – text
Photo -textI want it to look like this
Photo – text
Photo – text
Photo – text
Photo – textPlease help!
The blog I need help with is: (visible only to logged in users)
-
It did not show the text as I did – the top on arranges itself diagonally down the page the bottom one straight down
-
-
-
-
You can’t effectively format in the forums,
Please give us the URL of your blog, starting with http. We can’t do anything without that.
-
-
Thanks for that. Actually, the page looks kinda cool, but I can see how it might irritate you.
You have a few options: you can put the whole thing in a TABLE, which involves learning some HTML codes or using one of the online table-makers you can google.
You can alternate the images, so one is on the left, the next on the right, etc.
Or you can add in some code-based spacers in the HTML editor following these instructions:
Formatting text pt. 3: space between lines, characters, and words
-
@roystevens: Setting the image alignment to left means the rest of the content will wrap around, i.e. start next to the image instead of below it. Rest of the content includes next image, if there’s room enough – hence the staggered arrangement you’re getting.
Basic table coding for six images in one column, as raincoaster suggested, would be this (in the html editor):
<table> <tr><td>IMAGE1 CODE HERE</td><td>TEXT1 HERE</td></tr> <tr><td>IMAGE2 CODE HERE</td><td>TEXT2 HERE</td></tr> <tr><td>IMAGE3 CODE HERE</td><td>TEXT3 HERE</td></tr> <tr><td>IMAGE4 CODE HERE</td><td>TEXT4 HERE</td></tr> <tr><td>IMAGE5 CODE HERE</td><td>TEXT5 HERE</td></tr> <tr><td>IMAGE6 CODE HERE</td><td>TEXT6 HERE</td></tr> </table>It can be fine-tuned for spacing, vertical alignment etc.
Easier alternative: paste this after each image/text pair to cancel the wrapping (again in the html editor):
<br style="clear:both;" />In my opinion, however, 6 images in a column with those texts next to each one won’t look good – too much empty space. I would put the images in rows of three, with the texts below each one. We can give you the coding for that too, if you think you’d like it that way.
-
Sorry I took so long to respond – had some business to attend to. I am about to try what has been suggested and will keep you posted. Thanks!
-
Thanks for the advice – appreciate your help!
I used the code <br style=”clear:both;” /> that panaghiotisadam suggested and it works but puts the text at the top of the right hand side of the image. What code will move the picture to be more central on the image?
-
-
I managed to do it without using code for now. (I know code is invovled but I think you get what I mean) – I just put a dot in two lines above and changed their color to white. It works but I’m sure you know a better way.
-
To really center the texts in relation to the images, you need the table code I suggested above, with an added command:
<table style="vertical-align:middle;"> <tr><td>IMAGE1 CODE HERE</td><td>TEXT1 HERE</td></tr> <tr><td>IMAGE2 CODE HERE</td><td>TEXT2 HERE</td></tr> <tr><td>IMAGE3 CODE HERE</td><td>TEXT3 HERE</td></tr> <tr><td>IMAGE4 CODE HERE</td><td>TEXT4 HERE</td></tr> <tr><td>IMAGE5 CODE HERE</td><td>TEXT5 HERE</td></tr> <tr><td>IMAGE6 CODE HERE</td><td>TEXT6 HERE</td></tr> </table>
- The topic ‘Arranging photos and text’ is closed to new replies.
WordPress.com Forums 