asked on

Float Button

I got a translate button from http://translateth.is for my squarespace site. www.puertacielocr.com

I would like the button to float above header image on the top right side of the screen. Right now it pushes the website down and makes a white bar across the top (ugly).

Any Ideas?



<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

ASKER CERTIFIED SOLUTION

jtwcs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Try this - put your button into the same container as your header - I will assume for the example below something like this

<div id="header">
  <div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://translateth.is/">Translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
  TranslateThis();
</script>
</div>

Open in new window

Then add this styling

<style type="text/css">
#header {
  position: relative;
  z-index: 1;
}
#translate-this {
  position: absolute;
  top: 10px; /* Modify depending on where you want it to go */
  right: 10px; /* Modify depending on where you want it to go */
  z-index: 100;
</style>

Open in new window

Position absolute gives you much greater control for positioning an element exactly where you want it than using float.