previous tips on image spacing not working
-
Hi there,
Working on a draft page
http://gratitudeatsea.wordpress.com/about-2/
and having trouble with the images ‘stepping’ instead of lining up in a column, presumably because there isn’t enough space between them. I tried the tips here
http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/
but can’t fix the problem. There was progress at one point, a few of the five images stacking properly, but I couldn’t sustain or duplicate it. I tried starting from scratch because the original code got so messy, and no luck. Will a kind brain out there please help me?Thank you,
MichelleThe blog I need help with is: (visible only to logged in users)
-
As the title says, the tips there refer to text, not images (with the exeption of the “Two columns” section, which is valid for all kinds of content). To help, we need to see a published page (we voluneers don’t have access to your drafts).
-
I used this part for the images:
“For extra space above and below an image, you add this to the image code (again, adjust by changing the numbers):
style=”margin-top:12px;margin-bottom:12px;”
Or, in the visual editor: click image, click edit button (mountain icon), click Advanced Settings, type number in the “Vertical space” box, click Update, update post or page.”Here’s the published page:
http://gratitudeatsea.wordpress.com/voyage/inventory/firstaidandmedical-2/about-draft/Thank you!
-
Unfortunately, that refers to a single image only…
Setting the alignment of an image to left means the content following the image will wrap around: that includes the next image, if there’s enough room – that’s why you’re getting what you’re getting on your page.
The way you’ve done it, you need to cancel the effect of the alignment by pasting this after each one of the five codes:
<br style="clear:both;" />
In that case you’ll need to adjust all the margin numbers, changing the margin-top ones to negative, otherwise the words will be too high in relation to the images.Table coding would have been simpler:
<table border="0"> <tr><td>IMAGE1_CODE_HERE</td><td>WORD1_HERE</td></tr> <tr><td>IMAGE2_CODE_HERE</td><td>WORD2_HERE</td></tr> <tr><td>IMAGE3_CODE_HERE</td><td>WORD3_HERE</td></tr> <tr><td>IMAGE4_CODE_HERE</td><td>WORD4_HERE</td></tr> <tr><td>IMAGE5_CODE_HERE</td><td>WORD5_HERE</td></tr> </table>(And why have you enclosed the first code in the div visibility:hidden thing?)
-
Ah, the alignment — I never thought of that! I didn’t know about the table coding, and the div was left over from trying one of tips and not knowing where to put it, but yes, it hid one of my images…
How does it affect the table code if I want the word next to each image to be a link? I didn’t redo the links yet when I started over because I was just trying to get the layout right. I’m also changing the words’ color, and once all the code is there I’m not sure where the table code goes.
Thank you for all your help!
-
The table is the structure. Use it (the code) in the html editor. You then put your image and link codes into the appropriate cells.
In a draft post or page, get your images sized as you like. Make your links and whatever color or other formatting you want for each word. You can do this in the visual editor.
Switch to the HTML editor.
Then copy each, one by one, and paste the code into the cells where Panos has written IMAGE1_CODE_HERE and WORD1_HERE,
IMAGE2_CODE_HERE and WORD2_HERE, and so on. -
It worked! Thank you so much for the step by step explanation. I enjoyed learning a little more about code in the process, too. Thank you again, both of you!
Best wishes,
Michelle -
- The topic ‘previous tips on image spacing not working’ is closed to new replies.
WordPress.com Forums 