trouble with the width of center algined images!

  • Resolved aminb5

    (@aminb5)


    12 years, 7 months ago

    Hi everyone, hope your doing fine,

    ok so I’m having a problem with the center aligned images in my blog!

    the problem is that the images which are aligned to center have a width bigger than the image itself!
    note that the image is displayed in it’s right width and height but when you hover to the left and right side of the image in the content area (where the image is displayed), it links to the image!!!
    this is the css for the center aligning images :

    .aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

    and these are the css codes for the hover status :

    a:focus img[class*="align"],
a:hover img[class*="align"],
a:active img[class*="align"],
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"],
#content .gallery .gallery-icon a:focus img,
#content .gallery .gallery-icon a:hover img,
#content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */
	background: #4aae00;
/*	border-color: #1e201c;*/
	border: none;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
    -moz-box-shadow: 0px 0px 10px #4bae00;
    -webkit-box-shadow: 0px 0px 10px #4bae00;
    box-shadow: 0px 0px 10px #4bae00;
}

    I want the center aligned images to link and take the hover effects only when I point the mouse to the images itself and not when the mouse is on the left or right side of the image!

    don’t know if I could explain the problem correctly!

    I would really appreciate it if anyone could help!

    Regards!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to post the HTML as well

    Thread Starter aminb5

    (@aminb5)

    The HTML is just the wordpress content structure :

    <div id="primary">

      <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
        <div class="content">
          <h2 class="content-title"><a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a></h2>
          <p class="meta">????? ??? ???? <?php the_author(); ?> ?? ????? <?php echo the_date('j F, Y'); ?> </p>
          <?php the_content('????? ????...'); ?>
        </div> <!-- end post-item -->

          <?php endwhile; ?>
          <?php else : ?>
          <p>????? ????? ????? ?? ?? ??????!</p>
          <?php endif; ?>

          <div id="comments_template">
	        <?php comments_template(); ?>
	      </div><!-- end comments_template -->

      </div><!-- end primary -->
     </div> <!-- / end of main -->

    and this is how it’s shown in the browser :

    <div id="primary">
<div class="content">
<h2 class="content-title">
<p class="meta">????? ??? ???? ???? ???? ?? ????? ?? ???, ???? </p>
<p>
<a rel="attachment wp-att-220" href="https://localhost/tthemesf/?attachment_id=220">
<img class="aligncenter size-medium wp-image-220" width="150" height="150" alt="" src="https://localhost/tthemesf/wp-content/uploads/2012/07/dtutslogo4fb-150x150.png" title="dtutslogo4fb">
</a>
</p>
<p> </p>
</div>
<div id="comments_template">
</div>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You know we can’t see the image if it’s on your localhost

    Thread Starter aminb5

    (@aminb5)

    Well I wrote the codes, but if you need to see an example of it, here is an online one :
    Example
    in the page above you can see that the images are 400px × 300px, but when you hover the mouse on the left and right side of the images it still links to the image!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    line 1007 style.css
    remove

    display: block

    Thread Starter aminb5

    (@aminb5)

    Thank you, but when I do that, the image aligns on the right side!
    I tried ‘display: inline’ too, but it still aligns on the right instead of the center!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can’t replicate that problem.

    Thread Starter aminb5

    (@aminb5)

    Thank you for your time, appreciate it!

    I’ll leave this topic unsolved for a few days, see if anyone can find it’s problem!

    Regards

    Thread Starter aminb5

    (@aminb5)

    problem solved!

    I fixed it by changing the margin left and right from auto to 39%!
    and of course changing display block to display inline!

    Regards!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘trouble with the width of center algined images!’ is closed to new replies.