WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] trouble with the width of center algined images! (10 posts)

  1. aminb5
    Member
    Posted 1 year 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!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    You need to post the HTML as well

  3. aminb5
    Member
    Posted 1 year ago #

    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="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">
    </a>
    </p>
    <p> </p>
    </div>
    <div id="comments_template">
    </div>
  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  5. aminb5
    Member
    Posted 1 year ago #

    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!

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    line 1007 style.css
    remove

    display: block
  7. aminb5
    Member
    Posted 1 year ago #

    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!

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Can't replicate that problem.

  9. aminb5
    Member
    Posted 1 year ago #

    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

  10. aminb5
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic