Search the Community

I have anchor links on icons for social media at the top of my page. As far as I can tell, the links and anchors are coded correctly.But for some reason, I can't get the icons to be clickable.The website is www.cleantelligent.comHere's the code for the icons themselves: <!--SOCIAL LINKS--><style>#UpperLinks{ position: absolute; left: 50%; margin-left: 380px; white-space: nowrap; padding-top: 27px;}#UpperLinks img{ width:auto;}#PhoneTop{ font-family: 'News Cycle', sans-serif; color:#D1D1D1; position: absolute; left: 50%; margin-left: 345px; white-space: nowrap; margin-top: -12px;}</style><div id="PhoneTop"><img style="position:relative; top: 8px;" src="/wp-content/themes/cleantelligent/images/phonetrans.png" />(801) 375-0375</div><div id="UpperLinks"><a href="http://www.linkedin.com/company/cleantelligent_software" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="http://www.facebook.com/CleanTelligent" target="_blank" ><img height="22" width="22" src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="https://www.youtube.com/CTsoftware" target="_blank" ><img class="socialicons" height="22" width="22" src="/wp-content/themes/cleantelligent/images/YouTubePlay.png" /></a></div><!--END OF SOCIAL LINKS-->

I am trying to get our social media icons to stay in place, no matter how zoomed in or out you are (ctrl+scroll). We have clients with varying monitor sizes, technologies, browsers, etc. The website is www.cleantelligent.com Currently our icons are floated and aligned right, so no matter how you look at it, they line up with the right side of the screen. How do I get them to "stick" right under the "get started" button, no matter where you look? There's a lot of CSS formatting on this page that deals with the slider right below and I don't want to displace or mess anything else up. Is there any way to get them to stay right under the button while in their own div, span, aside, or whatever? The code is as follows:Quote:<div id="main"> <div id="primary" class="showcase"> <div id="content" role="main"> <article id="post-89" class="post-89 page type-page status-publish hentry intro"><header class="entry-header"><h2 class="entry-title">Home</h2> </header><!-- .entry-header --> <div class="entry-content"><!--SOCIAL MEDIA ICONS--><div style="align: right; float: right; padding-right: 50px;" id="first" class="widget-area" role="complementary"><aside id="text-2" class="widget widget_text"><div class="textwidget"><div class='footer_social_icons'><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><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></div></div><!--END OF SOCIAL MEDIA ICONS--> <div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /><div class='slide-desc'><h2>Productivity</h2>We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a> </div></div>

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!