Need help? Check out our Support site, then


layout slides all over the place--Part 2

  1. I submitted the original query--below--on April 4, 2013, but I'm wondering if I should publicly publish the post, "Fortuny Was Spanish??" so you can see what's going on.

    The first couple of paragraphs are okay, but when images get involved it's mayhem.

    For instance, I have a large long image on the right without caption. On the left I have a smaller picture and a manually-composed caption for it under it; under that a manual caption for the for the long picture on the right; and under that a manual caption for a small bottom image.

    So, on the left is image/caption/caption/caption/image and on the right is as a long large image.

    Ideally, the left and right images should align at top and bottom, and should abut, or almost abut, vertically.

    IN FULL SCREEN:
    At this very moment, in that segment of the post in full screen, the tops of two images align, but not the bottoms, most likely because the space between the 3 captions has shifted. The left images do not abut the right, but leave a space into which the first word ("Like") of the next paragraph has crawled pretty far up.

    IN EDIT POST SCREEN:
    The large long right-flush image is so large that neither the two smaller ones nor the 3 captions can fit in the space to its left.

    IN PREVIEW:
    This particular segment is almost perfect--the spacing between captions still off, and the images don't abut, but there's no word wrap creep.

    As I keep working on image placement, however, images disappear, paragraphs disappear, I have to retype in hope of getting rid of blank lines, I can't bold or unbold, italicize or unitalicize, I can't flush captions right or left only center, text suddenly gets underlined and ctrl+U doesn't change it back, the little mountain icon freezes on a picture (or several at a time) and refuses to let me into the Edit Image box.

    As I mentioned in my original query, I tried clean word in kitchen sink, and since then have cleared my cache and cookies. I've had the same problem with my first two posts and now with the third. This feels like a code problem, but I haven't worked with code in 15 years and I don't want to take a chance with this.

    In the meantime, I'd been hoping the responses to the April 3 layout query from elsieshaven might contain some clues but outside of the link to microsoft--which I haven't tried--I can't see anything that might help me.

    Here's my original post from Thursday afternoon:

    layout slides all over the place

    I've been spending more time trying to control my layout than I'm spending writing. I've got a lot of pictures, italic captions and bf body text.
    No matter whether I write in full page or the regular edit page, their layouts don't match each other and the preview doesn't match either.

    I used the Word cleaner in kitchensink and I'm halfway through restoring the images, but still can't figure out where anything will be if and when I ever get around to publishing.

    Any and all help will be appreciated.

    the blog is [email redacted]. I am using the journalist format

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

  2. thistimethisspace
    Member

    Hi there,
    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).

    Not to worry as another Volunteer is bound to chime in with specific help.

  3. @jdavidsen:
    a) The "Visual" editor is not a WYSIWYG editor: it has the same width and the same font no matter what the theme (with a few exceptions), while each theme has a different width and a different font. So you can't rely on the Visual editor for arranging things.
    b) What you're describing is impossible to do without a bit of coding in the so-called "Text" editor. I'm TTTS's "another volunteer", so yes, if you need specific help you should publish the post (first because it's easier to discuss the issues using the actual image names and such, second and most important because I can copy the whole code of your post and replicate the exact situation in my tests blog).

    @TT: Seems I must make a post about this sort of thing...

  4. I just published it. Thanks for everything.

  5. Seems I must make a post about this sort of thing...

    @justpi
    Please do that.

  6. 1) There's some junk you need to delete (and I'm talking about the first section only - didn't go any further).

    Delete this useless pair after the "arabwtapestry" image code:
    <i></i>

    Delete these from before "Mariano Fortuny y Madrazo, himself" etc:

    <div><i> </i></div>
    <div></div>
    <div>

    and this from the end of that sentence:
    </div>

    Delete all these from before the "parsifal136kb" shortcode, and before "Like much" etc:

    <p><i> </i></p>
    <p><strong>   </strong></p>
    <p><strong>      </strong></p>
    <p><strong>   </strong></p>
    <p><strong>          </strong></p>
    <p><strong>              </strong></p>

    (You're probably not seeing the p tags in the Text editor; doesn't matter, delete all those i and strong tags, and the useless lines they occupy.)

    2) To prevent the "Like much" section from wrapping around the previous one, paste this between the "fortunyturban" image code and the "parsifal136kb" shortcode:
    <div style="clear:both;height:36px;"></div>
    Change the height value to adjust the amount of blank space.

    3) I suggest you decrease the line spacing of the three manually composed captions. If you agree, format each one this way:
    <p style="line-height:1.2em;">TEXT HERE</p>

    4) I cannot think of any way to really align the bottom of "fortunyturban" with the bottom of "arabwtapestry" in a secure way. I can simulate it (without guaranteeing it'll be ok in all browsers) after you adopt or discard suggestion #3. If you adopt it, how should the vertical spacing be? captions 1 and 2 close to the upper image and caption 3 close to the lower one?

    5) At the beginning you've got a wide left-aligned image, with a centered link below it: doesn't make sense. Is that really how you want them?

    6) Forgot to ask something I don't understand: what does "should abut, or almost abut, vertically" mean? If you mean no space between left and right images, it would look terrible, in my opinion.

  7. Thanks so much, justpi. It's probably going to take a while to get my head around all this, but I did want to respond to some of your concerns:

    4) I can live with a little misalignment at the bottom of "fortunyturban" and "arabwtapestry."

    5) I plan to address the opening image and caption, but as long as they're staying put, I'm okay with it for the time being.

    6) I rather like having the occasional group of images with no space in between, but I can live with a small amount of space.

    Again, thanks, and thanks, too, to thistimethisspace.

Topic Closed

This topic has been closed to new replies.

About this Topic