#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    40
    Rep Power
    1

    Can't get my icons to stay put.


    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?

    I will be copy/pasting this onto every page as well.

    The code is as follows:
    Code:
    <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>
  2. #2
  3. Come play with me!
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    13,749
    Rep Power
    9397
    Originally Posted by JCKnoell
    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?
    What you're describing isn't what I see on the site: the only social media buttons I see are in the bottom-left corner of the page and the Get Started is in the top-right corner.

    Exactly what you do depends but in general you either (a) all the buttons share one common ancestor container, probably a div, and you CSS them so the social ones appear below or (b) you apply whatever positioning strategy you have for the Get Started button to (a container of) the social buttons.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    40
    Rep Power
    1
    Originally Posted by requinix
    What you're describing isn't what I see on the site: the only social media buttons I see are in the bottom-left corner of the page and the Get Started is in the top-right corner.

    Exactly what you do depends but in general you either (a) all the buttons share one common ancestor container, probably a div, and you CSS them so the social ones appear below or (b) you apply whatever positioning strategy you have for the Get Started button to (a container of) the social buttons.
    Keep in mind that all of my attempts are on a stage site, so they are not live.

    the problem with the second option in that the get started button is in the header, and the social icons needs to be in the black bar.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    40
    Rep Power
    1
    Originally Posted by JCKnoell
    Keep in mind that all of my attempts are on a stage site, so they are not live.

    the problem with the second option in that the get started button is in the header, and the social icons needs to be in the black bar.
    Pretty sure I figured out a way to show you the site.

    Try:
    www.cleantelligent.com/StageTemp
  8. #5
  9. Come play with me!
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    13,749
    Rep Power
    9397
    So option (b). Your header sits in a width:960px div and the button is float:right. Duplicate that with the social buttons. Fortunately you already have things with that width (like that div#slider-1) so you can put it in there next to the heading.

    If you remove the margin-right:8px on the buttons they just barely fit.


    IMO that's kinda weird looking...
    Attached Images
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    40
    Rep Power
    1
    IMO that's kinda weird looking...
    True, but we will likely be moving or deleting that headline anyway, so it won't look as weird.

    Thank you for your help! Any thoughts on what would look better?

IMN logo majestic logo threadwatch logo seochat tools logo