Support » Themes and Templates » [Resolved] trouble with the width of center algined images!

[Resolved] trouble with the width of center algined images!

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


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


    Forum moderator

    You need to post the HTML as well

    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>
    <a rel="attachment wp-att-220" href="http://localhost/tthemesf/?attachment_id=220">
    <img class="aligncenter size-medium wp-image-220" width="150" height="150" alt="" src="http://localhost/tthemesf/wp-content/uploads/2012/07/dtutslogo4fb-150x150.png" title="dtutslogo4fb">
    <p> </p>
    <div id="comments_template">

    Moderator Andrew Nevins


    Forum moderator

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

    Well I wrote the codes, but if you need to see an example of it, here is an online one :
    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!

    Moderator Andrew Nevins


    Forum moderator

    line 1007 style.css

    display: block

    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!

    Moderator Andrew Nevins


    Forum moderator

    Can’t replicate that problem.

    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!


    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!


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