Photos in same line

  • Author
    Posts
  • #1130424

    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.

    #1130593

    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.

    #1130594

    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>

    #1130604

    justpi
    Member

    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.

    #1130608

    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.

    #1130612

    justpi
    Member

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

    #1130613

    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.

    #1130616

    justpi
    Member

    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.

    #1130617

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

    #1130618

    justpi
    Member

    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.

    #1130622

    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.

    #1130624

    justpi
    Member

    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.

    #1130625

    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!

    #1130626

    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.

The topic ‘Photos in same line’ is closed to new replies.