WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using hspace/vspace around images (13 posts)

  1. petit
    Member
    Posted 8 years ago #

    Issue of WP 2.0 RC2.
    This might have been addressed before, but unfortunately the the Codex search and resulting links doesn't work just now.

    In the Rich Text form for posting in WP 2.0 RC2, you can insert an uploaded image into a post. By using the Image Insert/Edit button, you are able to align text around the image by align="top | bottom | left | right | * " . That way you can wrap the text around the image, but you get no space between the image and the text.

    I try to switch to the HTML editing mode and insert hspace="10", but this attribute doesn't survive the save operation. Is this attribute filtering due to the XHTML compliance? Do I in fact have to make space in my stylesheet?

  2. Thanatos0
    Member
    Posted 8 years ago #

    I'd use css to set a border, or even use the HTML border tag. Don't use archaic methods of setting padding/spacing.

  3. petit
    Member
    Posted 8 years ago #

    Oki - Thanx!

    By studying the CSS for the default theme I’m using, I found that there are img classes called alignleft and alignright with padding and margin settings. By attributing my left aligned image class=�alignleft�, I got the space I wanted.

  4. gregbd
    Member
    Posted 8 years ago #

    petit - that is a great idea and thanks for sharing, that is something I will add to my CSS

  5. Khesrau
    Member
    Posted 8 years ago #

    I tried to set class=alignleft - it works fine.
    It doesn't work if I try to set class=alignright. The text floats around the picture - but still no space between text and picture. I took a look into style.css:

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }

    img.center, img[align="right"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright, img[align="right"] {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft, img[align="left"] {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    Everything seems to be fine. But the class=alignright doesn't work.

    Any ideas how to solve this problem?

    Thanks in advance,
    Khesrau

  6. petit
    Member
    Posted 8 years ago #

    I'm not sure about this, but your rules seem to be rather elaborate. I'm using the MODERN theme by Ulf Pettersson ( http://ulfpettersson.se/design/modern/)and his rules are a bit simpler:

    /* Begin Images */
    p img {
    padding: 0;
    max-width: 100%;
    }

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }
    /* End Images */

    My guess is that the img[align="right"] and the padding may confuse things. It may also well be that different browsers renders the padding/margin thing a bit differently. It's a known fact that Firefox and MSIE treats the CSS box model differently.
    With the CSS from MODERN it works well in the latest versions of FF and MSIE on a Windows system, which I'm using.

  7. Jbreit
    Member
    Posted 8 years ago #

    Hi,
    I want to add the html attribute hspace=10 to the CSS sheet. I'm too new to html and css...

    That's how it looks like currently:
    img.alignright {
    float: right;
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    float: left;
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    What should I do if I want to have hspace=10 added?
    Thanks for your help guys.
    Your newbie
    J.

  8. petit
    Member
    Posted 8 years ago #

    For the alignright class you have the margin set as
    margin: 0 0 2px 7px;

    These are the margin setting for the four sides of the block or image, starting from the top and and going clockwise:
    top, right, bottom, left side.

    It should work if you change the 7px to 10px.
    The same holds for alignleft.

    Your style rule states no margin at the top and 2pixels at the bottom. this is because normally the text flow gives you the space you need vertically.

    If you want 10 pixels on both to the right and to the left you use
    margin: 0 10px 2px 10px;

    Be aware that the name of the class is generated by your theme, and if you decide to change theme, you have to correct the theme to generate the correct class name and the stylesheet has to be corrected too.

  9. Jbreit
    Member
    Posted 8 years ago #

    Hi petit,
    thanks for that useful hints. Unfortunately, it looks that the changes are not used. I'm using the "Pool" Theme with WP2.0. I've changed all the values to try around, but the pictures are always sticking directly to the text around. No space at all. 7px would have been enough, but it's not used... Maybe Pool-Theme is not working with WP2.0?
    Thank you!

  10. petit
    Member
    Posted 8 years ago #

    Well, I wouldn't know. On the site http://www.jbreit.de/blog you use the Fluidity3c theme, but you are obviously talking about some other blog.

    Maybe the CSS rules you presented above are overridden by some later rule in the CSS document or even some hard coded rule in the img tag itself?

  11. Jbreit
    Member
    Posted 8 years ago #

    Hi Petit. Yes there was a problem with the Pool theme CSS rules, I remember. After all trying around, I switched to the fluidity theme and worked several hours on it. I've learned a lot while trying around with style sheets etc. I'm only receiving minor error reports with the XHTML validation. But that's off-topic now. Thanks for your hints, they lead me on the right way! Rgds, J.

  12. petit
    Member
    Posted 8 years ago #

    Good to hear Jbreit!

  13. pgholyfield
    Member
    Posted 7 years ago #

    Thanks... the fastest answer to a question I've ever experienced through a forum search!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags