SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    get google element to stay on its own line

    Hi - does anyone know how I can add a google translate box at the top right of this page:

    Automatic Sprouter: GoGreen Sprouter Better than EasyGreen and Freshlife Sprouters

    I want it to float *above* the current .toprgt elements, like this:

    .translate {float:right; margin-right:15px}

    then the html would be:

    <div class="translate">
    <div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
    }, 'google_translate_element');
    }
    </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>

    taken from this page:

    Tools - Google Translate

    BUT the moment I do that - and clear it in the next line (namely, in .toprgt and .logosm) then all hell breaks loose.

    Does anyone know how I can get that google script to stay in its own box in its own line, floated at the top right of the page?

    Besides clearing it in .toprgt (and .logosm although it shouldn't need to clear since it's floating left) I've also tried

    <div class="translate clearfix">

    but it doesn't work.

    Google doesn't give access to the script to see what it's doing.

    I'm wondering if it's even worth sticking a translate choice in there? Surely those people who need to translate pages have installed the google translate button into their web browser?

    It seems to me the whole thing just slows down the page loading time especially on mobiles.

    thanks, Val

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    try clear left on class logosm

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you looked at the code in the mockup frame they provide? There, the translate div is floated right in the h1, being the first element.

    Floated elements should come first in the mark up.

    Code:
    <h1 style="border-bottom: 1px solid rgb(102, 136, 204); padding-bottom: 5px; vertical-align: middle; overflow: hidden;">
    
    <div style="float: right; font-weight: normal;">
    <div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" style="">
    <div id=":1.targetLanguage"><select class="goog-te-combo"><option value="">Select Language</option></select></div>Powered by <span style="white-space: nowrap;"><a target="_blank" href="http://translate.google.com" class="goog-logo-link"><img src="http://translate.googleapis.com/translate_static/img/mini_google.png">Translate</a></span></div></div><script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
    }
    </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>
    
    Your Fancy Web Site
    </h1>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi noonnope - thank you! That works when I put the translate div inside a clearfix div (instead of inside an h1)

    So this did not work:

    <div class="translate clearfix">

    but this works:

    <div class="clearfix"> [ or as you point out <h1> ]
    <div class="translate"></div>
    </div> [ or </h1> ]

    I left out the overflow:hidden. Hope that's ok...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •