Need help? Check out our Support site, then


Offset Table (image alignment)

  1. libraryexample
    Member

    On any table I create with HTML, the image and text do not line up (image in first column, text in next column) and are staggered instead. In the visual editor, everything looks fine, but the page itself does not. I've tried adjusting the column widths but it doesn't help. Any ideas?
    http://bmcipad.wordpress.com/app-review/be-a-teaching-genius/study-aids-and-reference/

    thanks!
    abigail

    The blog I need help with is bmcipad.wordpress.com.

  2. If a table was needed, you'd need to turn all opening td tags to this:
    <td style="vertical-align:top;">

    (You'd also need to add some padding to the image or text cells, to create space between the image and the text.)

    But you don't need a table at all in the post you linked to. All you need is left-aligned images, with the accompanying text right next to each image code, plus this after each image-text pair:
    <br style="clear:both;" />

  3. libraryexample
    Member

    Panos, you are the best!!!!!
    I only put it as a table because it looked *really* horrible otherwise- something with the theme default formatting I guess?
    Makes me kind of wish I actually knew what I was doing with this HTML stuff.

  4. No, it wasn't due to the theme. Setting the alignment of an image to left means that the rest of the content should wrap around; when the accompanying text is shorter than the image, it leaves some room next to the image, so the next image also wraps around, and you get a staggered arrangement. What the code snippet I suggested does is cancel the wrap-around effect.

  5. libraryexample
    Member

    Is there a way to get it to stop wrapping for the whole text portion- to get the text to stay in a defined column instead of aligning far left under the image when the text exceeds the height of the image? For an example http://bmcipad.wordpress.com/app-review/be-a-teaching-genius/classroom-management/ (look at Banckle)

  6. libraryexample
    Member

    Also, each time I make adjustments to the page, that code snippet gets cleared off- any idea how to keep it there?

  7. a) If that's what you prefer, then you do need a table...

    b) That's WP's fault. You can use this alternative:
    <p style="clear:both;">IMAGE CODE HERE THEN FIRST PARAGRAPH OF ACCOMPANYING TEXT</p>

  8. libraryexample
    Member

    It still disappears about 20% of the time (especially the closing tags) but a lot better than before. Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic