Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WP: Image alignment & Captions. Completely stuck.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #35598
    desttE
    Member

    Hello

    I have been working on my own theme for my personal blog for the last week or so. I’m having a great deal of trouble with my image alignment styling.

    I want the pure basics including a 10px margin on either side depending on which side the image is aligned too. So if the image is aligned to the left: margin: 10px 10px 10px 0px; and if it is aligned to the right: margin: 10px 0px 10px 10px;.

    I run into trouble when I add captions to my images. The addition of captions seem to create a nasty extra margin on all of my images that throws them out of alignment.

    If you take a look at http://www.inlmbrt.com you will see.

    Can anyone lend a helping hand?
    It would be extremely appreciated.

    Ian.

    #92500
    Brightonmike
    Member

    I think your problem is your align styles have a lower specificity than the default caption styles. You might fix this by prefixing them with your post class.

    #92642
    desttE
    Member

    Tried a few different post classes and still get nothing.

    :[

    #92643
    Senff
    Participant

    I’m not really sure what it’s supposed to look, can you give us an example of a correct alignment? Post a few images without captions maybe?

    #92652
    desttE
    Member

    Senff, I have added a few images without captions.

    I also noticed that with the center captionless image, there is an awkward top border I can’t seem to get rid of.

    I hope this helped a bit.

    #92660
    Senff
    Participant

    It’s standard for WordPress, that when an image is used in a post and you add a caption, it will be wrapped in a DIV that has an inline style width that is 10 pixels more than the image it contains. I assume that’s your main issue.

    So, if I post an image that is 100 pixels wide and I add a caption, WordPress will change the markup to this (simplified):



    Caption goes here


    I would say your problem would be solved best if you would just style this code accordingly (get rid of the border, light grey background color and override that inline style width). Something like this:

    .wp-caption {
    border:0;
    background:none;
    padding:0;
    text-align:center;
    width:auto !important; /* <-- A HA! */
    }

    As for the middle (un-captioned) image having an “awkward top border”, I assume you mean it has more top margin than all the others. This is because both the first image and the second have floats, and so the space between them is the sum of the bottom margin of the first and the top margin of the second: 20 pixels.

    This space is NOT there between the second and the third image, because only the second image has a float (the third one doesn’t). Because of this, the space between them will not be the sum of the margins (bottom margin of 10 + top margin of 10), but the largest of the two; in this case, just 10 pixels.

    This is quite theoretical stuff, but the point is that the (vertical) space between two items will be the SUM if they are both floated, or overlap (and result in the maximum of the two) if one (or none) are floated.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.