Spaces in Posts

  • Resolved smartyd

    (@smartyd)


    14 years, 7 months ago

    I have a couple spacing issues I haven’t been able to fix on my blog https://www.theamazingagingmind.com :
    In the post “stigma-tazing”, I uploaded an image and wanted it to have a border that hugged the image. I did get a border, but it fits around the whole space designated for the image, not around the image itelf. How do I outline the image only? The CSS code currently reads:

    .postcontent img {
    border: 3px solid #efefef;
    padding: 0px 0px 10px 0px;
    }

    Next, I want to eliminate the excessive space between the post title and the post content. The reason I have this space I believe is that I had to include some javascript in the “head” section of the post. The code creates the pop-up you see when you mouse over the word “taze” at the bottom of the post. I tried putting this CSS in the stylesheet, but it didn’t work. The only place I could get it to work was to put it in the post, but its presence creates this extra space. I suspect I should put the code in the functions.php, but then what to name the function, and where to call up that name elsewhere? I’m a complete neophite at php!
    Can anyone please help?
    Thanks
    Marty

Viewing 7 replies - 1 through 7 (of 7 total)

  • the image has a padding-bottom of 10px, and the border will go around that as padding counts as part of the element; you could replace it with margin-bottom.

    the styles do not cause any space.
    as far as i can see in your html code (from the browser) you have an we>rd paragraph just before these styles
    <p><head></p>
    and another weird paragraph with a linebreak at the beginning of the paragraph before the image
    <p><body><img class=...

    check and repair this in the post editor, html setting.

    Thread Starter smartyd

    (@smartyd)

    Hm. I opened the editor in html setting, and this is how it reads on my screen. First line:
    <head><style type=’text/css’>
    …and the other line reads:
    </style><body><img class=”alignleft”

    The <p> must be added automatically by WordPress (it’s not visible in the editor), and I don’t know how to take them out. I tried looking for the file via ftp, but can’t locate it on the host to edit it. Where do posts reside on Bluehost?

    Thanks!

    Thread Starter smartyd

    (@smartyd)

    Also, in the image, I added the 10px at the bottom to give the image a vertical look. The image is actually a lot skinnier than the outline, but the outline doesn’t hug the right and left sides of the image even though I have 0px padding left and right. Argh! Can I put -10px?

    Thread Starter smartyd

    (@smartyd)

    Finally found a solution to the spaces at the top of the post.
    I had to go into the stylesheet and change the spacing before the post to zero, then add spacing after the postdate to 18px. For some reason, that’s the only combo that worked.
    Now, to find a solution to the frame around the image…

    The image is actually a lot skinnier than the outline

    actually, the image (as the thumbnail) is 150px * 150px; maybe the original image was narrower, but the one you are using in the post is square.
    it might be possible to change something in the thumbnail settings(?)

    <head><style type='text/css'>
...and the other line reads:
</style><body><img class="al..

    if the p tags are added by wordpress, remove at least the <head> and <body> because there are causing invalid code where they are; the styles in general also are not valid in this position.
    validation errors.

    Thread Starter smartyd

    (@smartyd)

    Thanks, alchymyth,
    I changed the image altogether, and now the border hugs the image.
    But I still need to know where I should put the javascript I used on the page. I’d like to use it in all posts (or have the option to), but there has to be a way to put it in the stylesheet or function.php so I don’t have to paste it into the post itself. I tried putting the javascript into the stylesheet with no success.
    Can anyone tell me where to put this css code? In Blogger, I just put it in the head section of the main html page (see https://traveling-family.blogspot.com), but am lost in this wordpress theme.
    Thanks!!

    Thread Starter smartyd

    (@smartyd)

    Everything solved. I put the css code into the stylesheet without the <style></style> tags and all is fine!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Spaces in Posts’ is closed to new replies.