0

I'm experiencing some issues with the footer of my website

I'd like to have the facebook like button, the twitter button and the language selector all aligned at the same level (ie; few px from the bottom of the page). Currently as you can see on the picture all these 3 elements have a different vertical alignment. Could you help me identify and fixing this issue please?

bottom alignment issue

the HTML code:

<div id="footer">
<div id="social"><div class="fb-like" data-href="http://www.gregsitedfds.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div><a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
    <span class="languageselector"><a href="fr/" title="Version Française">FR</a> | <a href="en/" title="English Version">EN</a> | <a href="index.htm" title="Norway Version">NO</a></span></div>

the CSS code:

#footer
{
    position:fixed;
    bottom:0;
    color:#333;
    left:0;
    z-index:999;
    width:96%;
    text-align:right;
    padding:30px 2%;
}

#social
{
    position:absolute;
    vertical-align:middle;
    left:2%;
    color:#333;
}
4

2 に答える 2

1

You need to have:

.fb_iframe_widget, 
iframe.twitter-share-button {
    display: inline-block;
    vertical-align: middle;
}

Adding vertical-align: middle; via Developer Tools solves the problem for me (display: inline-block; was already there).

In order to also align the language menu, you need to have 

span.languageselector {
    display: inline-block;
    height: 20px; /* same height as #social div */
    line-height: 20px; /* same as height */
}
于 2012-07-21T15:46:12.560 に答える
0

With Safari or Chrome you can press Cmd + Opt + I to bring up the Web Inspector (aka Developer Tools). Under the elements tab, you'll find the magnifying glass icon which is the element selector.

Use the element selector to hover over and click on elements in order to inspect them.

With this you'll see that the top-most or parent elements of each button have the following classes (among others):

.fb-like

and

.twitter-share-button

You can now write CSS code for those classes and use margins, padding or position attributes to adjust the position one of the buttons in order to bring them into alignment.

There will be many ways to do it. I was able to align them by selecting for .fb-like and using top: -7px, but that might not be the most eloquent solution.

You can make the CSS changes to a selected element in the right side panel of the Inspector and see those changes reflected live on the page. Then you can just copy the same CSS code into your site's CSS.

于 2012-07-21T16:18:07.177 に答える