WordPress.org

1. jabrieske
   Member
   Posted 2 years ago #

   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!!!

2. moshu
   Member
   Posted 2 years ago #

   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;
   }

3. jabrieske
   Member
   Posted 2 years ago #

   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!

4. whooami
   Member
   Posted 2 years ago #

   .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 />

5. jabrieske
   Member
   Posted 2 years ago #

   NICE! Works like a charm. Thanks so much!

Topic Closed

This topic has been closed to new replies.