9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Can't center topheader images in wordpress

by nelsonbiglar
7 replies
I'm having some difficulty with centering images in wordpress header.

When I move to different resolution screens or larger monitors than I normally work from, the images are way outta whack...

Can someone let me know what's happening.

website is: wwwdot fishingnorthernontario dotcom

Hopefully someone can help...
#center #images #topheader #wordpress
  • Profile picture of the author Mohsin Rasool
    Hi Nelson,

    I checkout your site, and everything seems normal...

    Can you point out specific page with specific image creating problem..
    or better take screenshot of that page and attach..

    Best Regards,
    Mohsin
    Signature
    Warriors4Hire: WordPress & GENESIS Experts | Custom WP Theme | WordPress Troubleshooting | Customizations | WP Security | Responsive Themes

    My Business site: WarMarks - Web Development | My Personal Blog: Mohsin Rasool
    {{ DiscussionBoard.errors[2196243].message }}
  • Profile picture of the author nelsonbiglar
    Here is a copy of my header showing in a 19" lcd monitor... seems that I can't center the logo and the right social media icons I have.


    Here is what I have for PHP code...

    <div class=fnologo>
    <a href= "http://www.fishingnorthernontario.com" title="Fishing Northern Ontario" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/newlogo.png" alt="Fishing Northern Ontario" border:none; /></a>

    </div>

    And for CSS


    .fnologo {
    position:absolute;
    border:0px;
    top:0px;
    left:50px;

    }

    Signature

    On the other side:
    www.fishingnorthernontario.com

    {{ DiscussionBoard.errors[2237633].message }}
  • Profile picture of the author EarnBig
    Your "header" element is the problem, there's a typo, it should be 960px (px is not included). See you CSS file.

    #header {
    width: 960; <-- should be 960px



    Then for the logo try this:

    .fnologo {
    float:left;
    padding-left:20px;
    }
    Signature


    Outsource your projects :: Hire Workers and Freelancers ::
    (Step up to the next level)!

    Add me on Twitter :: @EarnBig
    {{ DiscussionBoard.errors[2237818].message }}
    • Profile picture of the author nelsonbiglar
      Originally Posted by EarnBig View Post

      Your "header" element is the problem, there's a typo, it should be 960px (px is not included). See you CSS file.

      #header {
      width: 960; <-- should be 960px



      Then for the logo try this:

      .fnologo {
      float:left;
      padding-left:20px;
      }
      Seems that has fixed the problem. Wow something so simple and I didn't pick that up. I have been trying for weeks to get this fixed and haven't had any luck at all.

      Thank you so much!!!
      Signature

      On the other side:
      www.fishingnorthernontario.com

      {{ DiscussionBoard.errors[2253584].message }}
  • Profile picture of the author nelsonbiglar
    How did you know #header had that typo... I didn't even have that code typed in here?
    Signature

    On the other side:
    www.fishingnorthernontario.com

    {{ DiscussionBoard.errors[2237902].message }}
    • Profile picture of the author Harrison Ortega
      Originally Posted by nelsonbiglar View Post

      How did you know #header had that typo... I didn't even have that code typed in here?
      He probably did by looking at your style.css http://fishingnorthernontario.com/wp...Blue/style.css and the use of firefox firebug add-on.

      There are a couple of issues on your code. Mainly due to improper use of absolute values. You should have the fnologo inside the header using float:left and the social media icons also inside the header but using float:right. No absolute values needed.

      Since that would be quite a few changes to make, then the quick fix for your problem it is to replace the fnologo code from this:
      Code:
      .fnologo {
border:0 none;
left:50px;
position:absolute;
top:0;


}
      into this:
      Code:
       .fnologo {
border:0 none;
left:180px;
position:absolute;
top:0;


}
      Signature
      NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.
      {{ DiscussionBoard.errors[2238155].message }}

Trending Topics