Jump to content

Cannot get icons to size correctly


JCKnoell
 Share

Recommended Posts

I am trying to copy and paste code from our footer and place it into our header. We wanted to move the social media icons from the bottom to the top of the page, among other things. There are a lot of div tags and a few CSS class tags as well, in the footer. However, I copied only the link and imagde code into the header so that it doesn't try to link to class and css for the footer. My problem is that when I put the code into my header, it ends up bliowing up the first icon and discplacing everything else on the page (in fact, everything else is now missing completely. See the image I've uploaded.) I've tried resizing manuaaly using style="width:;height:;" and I've tried using the width and height within the img tag itself, but nothing is working. The website is www.cleantelligent.com. I can't find any styling within the header that would be affecting this either. We want the social media icons right under the "get started" button. Any thoughts would be very helpful. Thanks!

post-164581-0-41878300-1372260064_thumb.png

Link to comment
Share on other sites

images are inline elements, so height and width will not apply to them. you could give it

display: inline-block

style if you wanted, and then it would work

Edited by thescientist
Link to comment
Share on other sites

@thescientist, can you be a littlre more specific? How would I go about doing that? Is it to clear the formatting from the CSS? or do I put that into the CSS, and if so, would that not ruin the rest of my site? @MarkT, what code would you like me to post? The code I'm trying to copy/paste? The footer? the header? You can access it all from cleantelligent.com.

Link to comment
Share on other sites

If you are just simply copying the icon links and images and placing it within the header class called header_img then it going to blow out your icons because the css there is set for 200px wide. You just can't move something over and expect to work. You need to determine what you are moving and where going to be place keeping in mind that the header is going to have an affect on those icons. I would wrap a div around the social stuff and apply any styles to it to make it work without interfering with the other stuff in the header. <div class="header_social_icons"><a target="_blank" href="http://www.facebook.com/CleanTelligent"><img src="/wp-content/themes/cleantelligent/images/facebook.png"></a><a target="_blank" href="http://www.linkedin.com/company/cleantelligent_software"><img src="/wp-content/themes/cleantelligent/images/linkedin.png"></a><a target="_blank" href="https://twitter.com/#!/CleanTelligent1"><img src="/wp-content/themes/cleantelligent/images/twitter.png"></a><a href="/news-and-events/rss.xml"><img src="/wp-content/uploads/2012/05/Blog-button.png"></a></div>

Link to comment
Share on other sites

Thanks for all your help, guys. It seems that in the midst of me asking my question, we changed directions... This thread can be closed or deleted (I can't figure out how...) and I've reposted a more specific question in a new thread. Thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...