WordPress.org

Ready to get started?Download WordPress

Forums

Images with captions and margin (20 posts)

  1. mRoy62
    Member
    Posted 2 years ago #

    Using the 2010 theme.
    Using the Visual editor.
    Insert an image, right aligned with a caption. Looks good.
    As soon as I add a left margin of, say, 30px to create more space between the image and the text, image is shift right by 30px. The caption is on a grey background and looks to be in the correct location, but no margin is applied between it and the text.

    Hope I've described this well enough for someone to understand the problem I'm having.

    Can someone give me some advice about to handle this. I'm happy to add some css if that's the solution.

  2. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    Are you using "padding"?

  3. mRoy62
    Member
    Posted 2 years ago #

    I am using whatever is standard for the 2010 theme. I have made no CSS edits and only apply margins by using the edit panel by clicking on an image.

  4. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    Ok, so you are in the dashboard. You pick a post to edit. You click on the image and then the "tree" icon and a pop-up comes up where you can change things. Is this what you are doing?

  5. mRoy62
    Member
    Posted 2 years ago #

    I'm actually putting the image on a page.
    I have inserted it.
    I click it and in the top left hand corner you get two icons. One to delete the other to edit properties. I go to the Advanced tab and enter the margin parameters here.

  6. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    How are you entering margin parameters? There is only vertical and horizontal space.

    BTW, the text will look close in the visual editor but be fine in the post itself. More space between the caption and image can be done in CSS.

  7. mRoy62
    Member
    Posted 2 years ago #

    There's a section for entering Styles. If you actually specify a horizontal value the Styles section is populated. You can then edit this.

    Does this help you determine what I need to do?

  8. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    You can use margin, margin-top, etc. Padding, padding-top, etc. to get what you want. Like padding-bottom: 10px; margin-bottom: 30px;

    Also keep in mind the are really two boxes there with handles so you can drag one to make the image larger and the other to center the caption.

    You can also add space between the caption and image by going to the html mode and entering a non-breaking space just before the closing tag, /image> but I don't think this is a good way.

  9. mRoy62
    Member
    Posted 2 years ago #

    Appreciate you trying to help. Not sure I've successfully transmitted what I'm struggling with. Here's a screenshot that shows the image offset to the right and I don't want it to be. This only happens when I add a caption. Without the caption everything is positioned where I would expect it to be.

  10. Troy Chaplin
    Member
    Posted 2 years ago #

    When you add padding or margin to the style in the advanced image editing area it is only applied to the image itself, not to the class that contains the caption and image.

    I would suggest editing the themes css file to add the margin or padding there (for images with captions, the style is usually .wp-caption-text, use firebug to see exactly what it is)

    If you do not have access, or are not confident in editing the css file, switch over to the HTML view in the editor, locate your image and add style="margin-left:40px;border:2px solid black;" in the image ref

  11. mRoy62
    Member
    Posted 2 years ago #

    Thanks, Troy. That helps a lot.

    Basically, this means that unless one is willing to edit the css (or add a style) the caption feature is useless, if you are trying to add a margin between an image and text.

  12. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    It seems to me the image may have been inserted inline with existing text and is anchored there with a span or other element....try adding the image first then adding text that does not include any encoded elements (paste plain text).

  13. mRoy62
    Member
    Posted 2 years ago #

    So I just tried adding a new image to new page. NO TEXT.
    I add the image from the media library.
    I get the same problem.

  14. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    Thanks for the screen shot. I am not sure how you got the background/caption in that position. Probably with the advanced setting.

    Using 2010 and the visual editor I brought in an image with the a caption. I can click on the image and the little edit image and delete buttons show but also is a set of handles where I can size the image. Resizing, the background stays in the correct position relative to the image but the caption moves.

    If I click in the caption area, a different set of handles appear and using them I can adjust the size of gray area. The image stays the same size except when I make the gray area too small and then the image is resized also. I can place a cusor on the caption and move it with the space bar or change what it says.

    Whatever I do, moving the background or resizing the picture, the picture stays in the horizontal center.

  15. mRoy62
    Member
    Posted 2 years ago #

    @kmessinger: Are you using the 201 theme?

  16. kmessinger
    Volunteer Moderator
    Posted 2 years ago #

    I have checked this in the 2010 theme and the Weaver II Pro theme, both running wp3.3.1. I also checked the Atahualpa 3.6.7 theme using wp3.4-alpha-19672. Everything works correctly.

  17. jedeso
    Member
    Posted 2 years ago #

    hello,
    i am using the weaver II theme with nextgen plug in for my images. i have finally figured out how to get the captions to appear only on the enlarged (clicked on) thumbs, but unfortunately the captions do not center under the image.
    here is a screen shot:
    /Users/debrawarshaw/Desktop/Screen shot 2012-04-02 at 8.04.35 PM.png

    any help with this css is greatly appreciated!
    jedeso

  18. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @jedeso

    please start your own topic and post a link to your site to illustrate the problem.

  19. jedeso
    Member
    Posted 2 years ago #

    i see why you call yourself the sweeper

  20. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    i see why you call yourself the sweeper

    yupp - that's what I do - taking care of things ...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.