Images being re-aligned from edit page to preview page

  • Author
    Posts
  • #1183878

    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.

    #1183982

    timethief
    Member

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

    #1183985

    macmanx
    Staff

    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

    #1183989

    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.

    #1183991

    macmanx
    Staff

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

    #1183993

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

    #1183995

    macmanx
    Staff

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

    #1183997

    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.

    #1184021

    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”).

    #1184023

    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

    #1184024

    justpi
    Member

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

    #1184025

    timethief
    Member

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

    #1184026

    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>
    #1184033

    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>
    #1184035

    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>’

    #1184036

    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>
    #1184113

    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.

    #1184127

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

The topic ‘Images being re-aligned from edit page to preview page’ is closed to new replies.