Jump to content
Sign in to follow this  
JCKnoell

Cannot get icons to size correctly

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

Share this post


Link to post
Share on other sites

Can you post your CSS/HTML code so I can take a look. Cheers

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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>

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...