Need help? Check out our Support site, then


Photos in same line

  1. detblirbarapannkaka
    Member

    I want two photos in the same line. ive read the support tip and made them 312 pix each and both left alignment.
    But one always appears one line under the other.
    I would also like the same space betwen th upright photos as between these and the following photos. Ive put 1 pix in the horizontal/vertical space box but it always appears random in the post. Would be so thankful if someone can help me take control of how the photos are posted. i dont use html.
    the post i have this problem with is: http://wp.me/p31fnS-3u
    the password is: problem

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

  2. The main column width is 640 and you need to take some padding into account. Reduce the images to 300 pixels width and see if that works for you.

  3. 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>

  4. 1px is the smallest you can get on a computer screen (the divider lines that separate our replies on this page are 1px thick). So when you add 1px you add pretty little.
    But images in the theme you're using have a default 1.5em top and bottom margin. 1.5em means one and a half times the font size, so it's a lot larger than 1px, so when you changed the "vertical space" to 1px you decreased the space above and below the image.
    And you only did that to the left image: that's why the other one appears lower.
    Left aligned images have a right margin as well (and right aligned images have a left margin), so you do need to eliminate that to make two 315px wide images fit side-by-side.
    But if you set the alignment of both images to left, the right side of the second image won't be flush with the right side of the full-width image below it.

    So:
    a) Set the alignment of the right image to right.
    b) Set the horizontal space of the right image to 0.
    c) Set the horizontal space of the left image to 0 after you delete the previously set margins from the "Styles" field.

  5. detblirbarapannkaka
    Member

    Thanks for your help. Ive tried everythng yog suggested. I made the photos 310 px and both left alignment with the photo edit tool.
    But they still doesnt appear in the same line. And the space between all the photos are different. This is so frustrating, have been trying to figure out this for one week.

  6. I figured it out for you but apparently you didn't bother reading my reply.

  7. detblirbarapannkaka
    Member

    I read it, and I tried it.
    But as you can see in my post they are still not lined, and there are no space between the photos even though I put 5 px in the vertical space field.
    Both photos are now 310 px and there is space to the left of the first photo that I would like to have between the two.

  8. Tried it? At the moment you've got both images aligned right, no vertical and no horizontal space around the one image, 5px vertical space and no horizontal space around the other image. That's not what I suggested.
    You need to set the alignment of the one image to left and the alignment of the other image to right, and you need to set the horizontal space of both images to 0 after you delete the margins you've got now from the "Styles" field.

  9. detblirbarapannkaka
    Member

    Sorry missed that you suggested to put one to the left. I did it now, but it still isn't lined.

  10. Now they are perfectly aligned. The only problem is the next image (mg_1475_5), because you have erroneously added a horizontal margin to it.

  11. detblirbarapannkaka
    Member

    You're right! Thanks a milion! You are my hero.
    Now my only problem is why the third and the fourth photoh have different space between them - even though I put 0 on all horizontal spaces.

  12. a) There's an oversight in the CSS of the theme: images aligned "none" don't have appropriate margins.
    b) But you keep confusing horizontal with vertical space: horizontal space means space left and right, so it has nothing to do with the space between your two full-width images. If you wish to increase the space between the third and the fourth photo, you need to add vertical space to the fourth one.

  13. detblirbarapannkaka
    Member

    Ok, everything lokked gret for 2 minutes - until i added two new photos. I managed to put them on the same line (Hallelujah!) but then the following looks like a mess (even though I put both the vertical an dhorizontal space to 0).
    Arrgggh!

  14. detblirbarapannkaka
    Member

    Does anyone understand why this happens? Why does only the two first line up and not the following two? Ive used exactly the same orders (left, right, 0 horizontal space) for all four.
    Any help is extremely appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.