Need help? Check out our Support site, then


WordPress.com Forums » Support

Images being re-aligned from edit page to preview page

  1. rossmcgowan09
    Member

    Hello,

    I'm trying to setup an about us page for my blog and am having some trouble. I would like to include LinkedIn and Email links along with a picture of the user (we have four users). I have tried pasting a table from word to give me the format that I would like and align the images correctly. For example, I have 3 columns and 1 row with a profile picture in the left column, a LinkedIn and Email picture with hyperlinks in the middle column, and a short summary in the right column. This looks fine on the "Edit Page" but when I preview the post or update the post the right column stays in the position I want it to, while the middle column shifts down the page and re-aligns itself. I have tried playing around with the auto-correct xhtml settings and have not had any luck.

    Please help!

    Thanks,

    Ross

    The blog I need help with is biznxt.co.

  2. timethief
    Member

    We Volunteers cannot view any drafts. We can only view published pages and posts.

  3. macmanx
    Happiness Engineer

    Don't paste a table from Word, that will only lead to pain and heartache. Word is a word processor, not an HTML editor. Word uses plenty of proprietary text formatting we can't understand.

    Instead, try an HTML table: http://www.w3schools.com/html/html_tables.asp

  4. rossmcgowan09
    Member

    Hopefully this will make my problem a bit easier to understand.

    Here is a picture of what I was talking about in the "Edit Page" view:

    http://biznxt.co/?attachment_id=197

    And this is what it looks like when I publish the post:

    http://biznxt.co/?attachment_id=196

    Hopefully this clarifies what I was talking about a little bit.

  5. macmanx
    Happiness Engineer

    I do see, but please try HTML tables, not tables copied and pasted from Word.

  6. rossmcgowan09
    Member

    I just tried using an HTML table and it seems to be giving me the same alignment problems. Any other potential solutions?

  7. macmanx
    Happiness Engineer

    Did you wind up with the same third column as you have in your screenshot? If so, try removing the right column.

  8. rossmcgowan09
    Member

    Yeah for some reason it results in the same problem even if I delete the 3rd column. The LinkedIn and email icons show up below the "profile picture" and are shifted to the right, whereas I would like them to be next to the picture.

  9. justpi
    Member

    This is happening because of the default vertical alignment of images. You can paste here the code you tried to use so I can tell you what you need to change. Paste it between backticks (see the note on "Allowed markup").

  10. timethief
    Member

    The backtick ` not to be confused with the single quote mark ' is located to the left of the number 1 key in lower case under the tilde ~.
    backtick
    code
    backtick

  11. justpi
    Member

    "located to the left of the number 1 key in lower case under the tilde"
    Not necessarily. There are various keyboard layouts.

  12. timethief
    Member

    True but I thought it was a safe bet in this case. :)

  13. rossmcgowan09
    Member

    Here is the HTML code I'm using:

    <table border="0">
<tbody>
<tr>
<td><a href="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg"><img class="alignnone  wp-image-55" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="120" height="120" /></a></td>
<td><a href="http://biznxt.files.wordpress.com/2013/03/linkedin.png"><img class=" wp-image-53 aligncenter" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" /></a>
<p style="text-align: center;"><a href="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif"><img class=" wp-image-51 aligncenter" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="27" height="27" /></a></p>
</td>
<td>Sample Text Here</td>
</tr>
</tbody>
</table>

  14. justpi
    Member

    1) border="0" is outdated coding that has no effect.
    2) The image width as usually expressed has no effect inside a table cell: when "Sample Text Here" becomes real text, it will squeeze the profile image and make it tiny.
    3) I don't see what the p style="text-align: center;" is doing there.
    4) And, as I said, the vertical alignment needs to be corrected.

    So start with this then tell us if and what you'd like to change:

    <table style="border:none;">
<tbody>
<tr>
<td style="border:none;vertical-align:top;width:30%;">
PROFILE IMAGE CODE
</td>
<td style="border:none;vertical-align:top;text-align:center;width:13%;">
ICON1 CODE
ICON2 CODE
</td>
<td style="border:none;vertical-align:top;width:57%;">
TEXT
</td>
</tr>
</tbody>
</table>

  15. rossmcgowan09
    Member

    That looks great, thanks so much for the help. One small thing, is there anyway to bring the icons in the 2nd column closer to the profile picture so that it looks a bit more clean?

    '<table style="border: none;">
    <tbody>
    <tr>
    <td style="border: none; vertical-align: top; width: 30%;"><img class="wp-image-55 alignright" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="160" height="160" /></td>
    <td style="border: none; vertical-align: top; text-align: center; width: 13%;"><img class="wp-image-53" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" />
    <img class="wp-image-52" alt="twitter_small_logo1" src="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png" width="30" height="30" /><img class="alignnone wp-image-51" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="29" height="29" /></td>
    <td style="border: none; vertical-align: top; width: 57%;">SAMPLE

    SAMPLE

    SAMPLE

    SAMPLE</td>
    </tr>
    </tbody>
    </table>'

  16. rossmcgowan09
    Member

    Oops...

    <table style="border: none;">
<tbody>
<tr>
<td style="border: none; vertical-align: top; width: 30%;"><a href="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg"><img class="wp-image-55 alignright" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="160" height="160" /></a></td>
<td style="border: none; vertical-align: top; text-align: center; width: 13%;"><a href="http://biznxt.files.wordpress.com/2013/03/linkedin.png"><img class="wp-image-53" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" /></a>
<a href="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png"><img class="wp-image-52" alt="twitter_small_logo1" src="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png" width="30" height="30" /></a><a href="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif"><img class="alignnone  wp-image-51" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="29" height="29" /></a></td>
<td style="border: none; vertical-align: top; width: 57%;">SAMPLE

SAMPLE

SAMPLE

SAMPLE</td>
</tr>
</tbody>
</table>

  17. justpi
    Member

    You're welcome.
    Yes, of course you can decrease the space: among other things, you can remove the default horizontal padding of each cell.
    You also need to lower the text a little bit.
    So try turning the three opening td tags to this:

    <td style="border:none;vertical-align:top;width:30%;padding:0;">

<td style="border:none;vertical-align:top;text-align:left;width:13%;padding:0;">

<td style="border:none;vertical-align:top;width:57%;padding:1em 0 0 2em;">

    By the way, once you've published it you no longer need to paste the code here: we can see it in the sourcecode of your page.

  18. rossmcgowan09
    Member

    Great, this is definitely much more in tune with what I had in mind. Thanks again for all your help!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags