• Resolved jabrieske

    (@jabrieske)


    Is there a trick to overriding the CSS when aligning images in WordPress? For 95% of my images, I want them aligned to the right. I’m unable to align the other 5% to the left, though, even if I add “align=left” to the image tag. Any thoughts?

    Thanks!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You don’t add “align=left”.
    You should add a class, e.g. <img src=….etc. class=”leftpic” />
    and then define that class in the stylesheet 🙂
    .leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    Thread Starter jabrieske

    (@jabrieske)

    Thanks for replying.

    You’ll have to excuse me as I’m learning HTML and CSS as I go along here. I tried a few different things and none worked.

    Here’s the CSS code for my standard image formatting:

    .post img {
    float:right;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    I put the leftpic code right after, and tried a few different formats, including:

    .post leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }
    ———————————-
    leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }
    ———————————-
    and exactly how you wrote it:
    .leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    Any thoughts?

    Thanks!

    .post img {
    float:right;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    that aligns ALL images inside this <div class=”post …>` to the right.

    .post leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    that doesnt do anything since lefttpic is not a tag.

    Similarily, this wont work, as leftpic is not a tag:

    leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    the above 2 examples assume you are doing this:

    <leftpic src="http://www.blah.com/image.gif />

    You arent.

    img.leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    will work, as long as you do this:

    <img class="leftpic" src="http://www.blah.com/image.gif />

    Thread Starter jabrieske

    (@jabrieske)

    NICE! Works like a charm. Thanks so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Override CSS for Image Alignment?’ is closed to new replies.