Need help? Check out our Support site, then


Align text in blog

  1. chilecopadevino
    Member

    OK I use the Word publish from kitchen sink and sometimes it works sometimes it doesn’t.

    How do I keep my alignment of my written content??

    See http://www.chilecopadevino.com

    Look at the Jan 4th Altair entry and the Dec entries the last line wraps to the left, how do I stop this????

    The blog I need help with is chilecopadevino.com.

  2. That happens because the text longer than the height of the image so the text "wraps" the image and the next lines goes down the image... try to enlarge the image a little, or try to reduce the ammount of text on each of that posts...

    Best Regards.

  3. chilecopadevino
    Member

    Thanks but those solutions don't work for me, first I what consistency on the blog, so different sized pictures are out (besides I tried that, it looked bad) and secondly, I write what is necessary, shorten a wine review!!!! Mine are short and to the point as they are.

    Can I use columns in the post??? Or something else that is simple, I don’t write code.

  4. I gotta agree, i am very fond of consistency myself and i really think your reviews are quite short, but that is just characteristic of the text orientation, you may try using tables, but that would need a little knowledge on HTML, if you structure tables inside your post like, first cell on the left the image, next cell the text, it will not happen that thing like text going left under the image.

    Best regards.

  5. Have you tried using windows live writer? https://en.support.wordpress.com/xml-rpc/windows-live-writer/

  6. Copying and pasting text from elsewhere without using either icon 5 or icon 6 in Row 2 of the visual editor is always an issue. See: http://en.support.wordpress.com/visual-editor/#pasting-text

    Have you done what follows?

    Go to Settings > Writing and select “ ___ WordPress should correct invalidly nested XHTML automatically” and then scroll down and click “Save Changes.”

    Posts > All Posts, change all your latest posts to Draft, click Update, change them back to Published, click Update again. (You can edit all 3 of them at once: tick the square in front of their titles then select Edit from the Bulk Actions dropdown and click Apply.)

    re: image alignment and text wrapping
    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. http://en.support.wordpress.com/visual-editor/#alignment They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that's centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.
    Align-right means position right, with the rest of the content wrapping around the left side of the image.
    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    Every theme has a maximum displayed image width http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ so it's important to keep that in mind when posting multiple images side-by-side. If you want two images to be side by side on the same line start by setting the alignment of both images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
    <p style="clear:both;">TEXT HERE</p>

  7. chilecopadevino
    Member

    What I see is non justified left in the visual when setting up a post (not wrapped), then the last line justifies left if the post is over 8 lines long, is there a bit of code I could use WHEN it justifies left under the photo to hold it as a column? The link I want lower and justified left.

  8. Did you read what I posted?

  9. chilecopadevino
    Member

    Yes and I looked at the pages and reset the " ___ WordPress should correct invalidly nested XHTML automatically” and then scroll down and click"

    I never post images side by side, so that I didn't look into.

    What you are saying is I'm SOL ;)

  10. chilecopadevino
    Member

    "Posts > All Posts, change all your latest posts to Draft, click Update, change them back to Published, click Update again. (You can edit all 3 of them at once: tick the square in front of their titles then select Edit from the Bulk Actions dropdown and click Apply.)"

    Tried this on one offending post, it didn't do anything

  11. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
    <p style="clear:both;">TEXT HERE</p>

  12. Please post an active link starting with http:// to the post with this issue in it.

  13. chilecopadevino
    Member

    Thanks here is the code.....Wher does it go?

    <img class="alignleft size-thumbnail wp-image-851" alt="IMG_0594" src="http://chilecopadevino.files.wordpress.com/2012/12/img_0594.jpg?w=112" width="112" height="150" />Grape variety: Cabernet Sauvignon 75%, Carmenère 17%, Merlot 6%, Syrah 3%, Cabernet Franc 1%
    <p style="text-align:justify;">Outstanding wine with mixed ripe red/black raspberries and black cherries over a complex of baking spice, cocoa and sweet herbs. The fruit has very good concentration and medium plus intensity. The wine has very good structure, great complexity and a long finish. Drink now, will improve for 3-4 years then drink for 7-10 years.</p>
    http://www.altairwines.com/

  14. chilecopadevino
    Member

  15. chilecopadevino, try using HTML tag table:

    <table width=100%>
    <tr>
    <td width=(a little larger than image width)>
    [insert image here]
    </td>
    <td>
    [insert text here]
    </td>
    </tr>
    </table>

    its should work...

    Best regards

  16. The table idea is correct, but the suggested coding isn't. Should be:

    <table>
    <tbody>
    <tr>
    <td style="width:140px;vertical-align:top;">
    IMAGE CODE HERE
    </td>
    <td style="vertical-align:top;">
    REST OF CONTENT HERE
    </td>
    </tr>
    </tbody>
    </table>
  17. justpi the code i posted should work fine, <tbody> is not necessary and i don't think that is necessary to use style to define width of column, the width property of td should be enough.

  18. a) tbody isn't strictly necessary but it will be added by the editor anyway.
    b) Specifying the table width the way you did would have no effect: you'd need the style attribute. But you don't need to specify a 100% width anyway, because that's the default in the theme the OP is using.
    c) In this theme (and in most of the newer ones), your coding would make the text start at the bottom of the image. So you need to add the style attribute to correct the vertical alignment.
    d) The td width would work the way you put it, but since you have to add the style attribute because of c, there's no point specifying the alignment one way and the width another way.

    And I forgot that there are default borders as well. So it needs to be:

    <table style="border: none;">
    <tbody>
    <tr>
    <td style="width: 140px; vertical-align: top; border: none;">
    IMAGE CODE HERE
    </td>
    <td style="vertical-align: top; border: none;">
    REST OF CONTENT HERE
    </td>
    </tr>
    </tbody>
    </table>
  19. Well, you are talking about how wordpress need then... but still, i used <td width="..."> on my blog and worked fine...

  20. Only answers which work on WordPress.com are appropriate here. And styling depends on the theme: does your blog use the same theme?

  21. Hey man, calm down, i'm not arguing with you or questioning your answers, in fact, what you said taught me something... You gotta relax a little more.

  22. You gotta stop telling me what to do, sweetheart.

  23. @ciencias4all:
    I'm talking about how chilecopadevino needs it: your suggestion wouldn't produce the intended result, because of the default vertical alignment. The coding must take into account the CSS of the theme (which, as raincoaster said, varies from theme to theme).
    As for the td width, I didn't say it wouldn't work your way - see d above.

  24. Oh justpi, i misunderstood that d item. I wasn't aware of the vertical alignment and that enlightened my mind also...

    That was cool.

  25. chilecopadevino
    Member

    ciencias4all thanks it worked fine see:

    http://chilecopadevino.com/2013/01/04/altair-2007-by-vina-san-pedro/

    Justpi and raincoaster you be wrong ;)

  26. chilecopadevino
    Member

    justpi tried your code works the same as ciencias4all so you only be wrong in saying his code would not work

  27. chilecopadevino
    Member

    Thankyou for solving my problem

  28. Yeah right.
    Here's a screenshot of your post in one browser:
    http://wpbtips.files.wordpress.com/2013/03/altairf.png
    And here's a screenshot of your post in another browser:
    http://wpbtips.files.wordpress.com/2013/03/altairs.png

  29. chilecopadevino
    Member

    Looks fine in IE to me

  30. But the majority of internet users use other browsers.

    My deepest apologies for trying to help you make your posts display correctly no matter what the browser.

Topic Closed

This topic has been closed to new replies.

About this Topic