?
Solved

Float Button

Posted on 2012-08-20
2
Medium Priority
?
896 Views
Last Modified: 2012-08-20
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?


<!-- Begin TranslateThis Button -->

<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>

<!-- End TranslateThis Button -->
0
Comment
Question by:bdelatte
2 Comments
 
LVL 10

Accepted Solution

by:
jtwcs earned 2000 total points
ID: 38312993
You can float the wrapper div, translate-this, to the right using the following declaration.

#translate-this {
     float: right;
}
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38313090
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.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question