• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Google Translator im Browser-Fenster fixieren

Rippie

Neues Mitglied
Hallo zusammen,

Ich habe hier mal eine Testseite:
Unbenanntes Dokument

Ich habe auf meiner Testseite den Google-Übersetzer eingeparkt. Nun würde ich diesen jedoch gerne auf meiner Seite so platzieren, dass dieser immer an der gleichen Stelle im Browserfenster sitzt. Scrollt man nun runter, dann soll er quasie mit wandern.

Kann mir da jemand bei helfen?
 
ich vermute mal dass in dem gelöschten Beitrag etwas gegen Google propagandiert hat... :D
Ich bin auch kein Fan dieser ganzen Google-Sachen, aber der Übersetzer macht es für mich deutlich einfacher die Website auch für fremdsprachige Besucher ( rund 50% aller nicht *.net oder *.com - Besucher ) zugänglich zu machen. Die Übersetzung ist besser als ich erwartet hatte. Es gibt Mängel, aber "bether than less".
Aber zurück zum Thema.
Ich hab mir das jetzt mal durchgelesen und auch einen Teilerfolg erziehlt. Aber wie ich es auch anstelle, der Google-Translator will sich da nicht einbinden lassen.
Sobald ich das erschaffene Kästchen gegen den Google-Code austausche, lädt sich die Seite ins unendliche.
Ich brächte da eventuell mal etwas hilfe.
Code:
Danke fürs Helfen :D

<head>
<style type="text/css">
#google_translate_element { position:fixed; top:9px; right:0px; width:100; hight:120; background:#630;}
</style>
</head>

<body>
<div id="google_translate_element"><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'de'
  }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</div>
</body>
Das war für mich jetzt die logischste Lösung. Höhe und breite hatte ich nur angegeben,w eil ich dachte, dass ich ein Element setzen muss, dass größer ist, als das Google-Ding.
 
Das sollte eigentlich auch funktionieren. Hast Du auch einen Link parat unter dem man es sich mal anschauen könnte?
 
natürliuch funktioniert es. Ich hab mich mal wieder selbst ausgebremst -.-
Es muss schon nach dem ersten Test funktioniert haben. Ich hab bloß vergessen, dass ich die Daten nicht von meinem PC aus aufrufen kann, wenn das Google-Script aktiv ist. Ich deaktiviere es dann immer so lange ich an der jeweiligen Seite arbeite. Beim reaktivieren hab ich mich dann gewundert warum nichts mehr geht.
Hat alles geklappt auch ohne die angegebene Box.
Ich habs mal eben ins Haus übertragen:
Unbenanntes Dokument

So... ich hab mal etwas weiter gearbeitet und meine Buttons von JS auf CSS umgesetzt. Das ist aktuell noch eher suboptimal, da die Buttons nur leuchten sollen, wenn sie auch wirklich unter dem Mauszeiger sitzen. Das hatte ich auch schon mit <div id="X"; > gelöst, allerdings hatte ich das Problem, dass ich dem DIV keine größe zuordnen konnte und somit der Button nur so groß angezeigt wurde, wie die Schrift hoch war. Dafür bräuchte ich ggf. noch einen Lösungsansatz. Auch bei Self-html konnte ich nun keine direkte Lösung entdecken.
Aber ich habe noch ein vermutlich sehr simples Problem. Der Text müsste sich um 2px nach oben und 2px nach links bewegen (vom IST zum SOLL).
Ich hatte auch irgendwas mit "a:hover" gelesen, aber nicht verstanden wie und wo man diesen Befehl jetzt einsetzt.

Das wären eigentlich die letzten beiden Punkte die für meine Seite fehlen. Dann habe ich nur noch das üble Problem eine Tabelle gut aussehen zu lassen, aber das ist viel mehr vom persönlichen Geschmack abhängig, als von der Umsetzung...
Wäre echt toll, wenn mir dabei noch jemand helfen könnte.

Achso, der bisherige entwurf: http://kadett-info.de/house/house7.html
 
Zuletzt bearbeitet:
allerdings hatte ich das Problem, dass ich dem DIV keine größe zuordnen konnte und somit der Button nur so groß angezeigt wurde, wie die Schrift hoch war.

Die Antwort auf diese Frage ist der grundlegende Unterschied zwischen Elementen: es gibt Inlineelemente und es gibt Blockelemente.

Ein <div> ist ein Blockelement. Ein Link ist ein Inlineelement.

Blockelemente nehmen immer die ihnen zur Verfügung stehende Breite komplett ein außer man gibt ihnen eine feste Breite.
Inlineelemente sind nur genau so groß wie ihr Inhalt es ihnen vorgibt, sowohl in der Breite wie auch in der Höhe.

Für deinen Fall brauchst Du also eigentlich einen Link:

HTML:
<a href="#">Linktext</a>

Der lässt sich dann per CSS stylen. Dazu gehört dann auch die Pseudoklasse :hover (das ist kein "Befehl" oder so) mit der Du den Effekt beeinflussen kannst der zu sehen ist, wenn man mit der Maus drüber fährt.

Grundlagen die Du dir anschauen solltest:
CSS 4 You - The Finest in Stylesheets: Workshop: Elemente
SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen
:hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
 
deawegen "a:hover". Nun hab ich den Sinn des a´s erst verstanden ;)
*grübel*
Damit fällt A:hover raus, denn die Bewegung soll vom Mouseover der Tabellenzelle abhängen nicht von der Verwendung eines Links.
[...]

EDIT:
Ich hab nun vieles durchprobiert und keine Lösung dafür gefunden. Der einfachste weg wäre, die Buttons anzupassen, dass diese sich nicht mehr "bewegen" sondern nur noch die Farbe ändern. Dann könnte ich einfachen Text draufsetzen und müsste keinen Gedanken mehr an die Hover-Geschichte verschwenden.

E-.-
 
Zuletzt bearbeitet:
Die Pseudoklasse hover kann auch an andere Elemente gehängt werden, auch an eine Tabellenzelle. Das sähe dann z.B. so aus:

Code:
td:hover { .. }
 
Ja, das war mir bekannt, aber ich habe der Tabelle bereits eine Klasse zugewiesen, nämlich die,die das BG-Image wechselt. Wenn ich da einen weiteren Hover-Befehl einsetze verschiebt es nur das Hintergrundbild :D
 
Dann schaff dir Hilfselemente wie ein <div> innerhalb der Tabellenzelle.

HTML:
<td><div>Inhalt</div></td>
Code:
td { background-image: url(bild1.png); }
td div { background-image: url(bild2.png); }
td div:hover { background-image: url(bild3.png); }

oder ähnlich.
 
Angewandt auf die bisherige Tabelle ergibt sich das Gleiche Bild. Das BG-Image ist zentriert, aber der Text steht top und lässt sich nicht zentrieren.
Das muss doch irgendwie gehen :(
 
ich habs jetzt aufgegeben und einen Button erstellt der einfach die Farbe wechselt. Damit ist das Problem für mich erstmal gelöst.
Der CSS-Code der eigentlichen Seite wird später extern sein, so, dass Änderungen für alle Seiten jederzeit umsetzbar sind, sollte ich denn doch einmal eine Idee haben.

Gruß Chris

Danke nochmal.
 
genial...
ich habe nun 2 Wochen rumgebastelt, dann den entschluss gefasst, dass ich auf den move-Effekt verzichte um letzten Ende festzustellen, dass es garkeine Rolle spielt ob sich der Text bewegt oder nicht, weil es für die Umsetzung keinen Unterschied macht. Das Problem ist geblieben.
Durch die Zellenformatierung (Tabellenzelle als Link) entsteht automatisch ein nues div, dessen Text ist wieder nicht zentriert steht. Inzwischen konnte ich das Problem dann scheinbar doch, wenn auch weniger zufriedenstellend, lösen.
Ich muss die Daten jetzt nochmal anpassen und dann zeige ich mal das Ergebnis.

EDIT 14:15:

So, ich hab noch eine deutlich bessere Lösung gefunden als die vorherige. Das ist wohl einfacher als jede Andere Möglichkeit. Allerdings ist in dieser Version ebenfalls kein beweglicher Text vorhanden, aber die Buttons habe ich ja bereits angepasst.
Schade, dass ich keinen Weg gefunden habe den Text auf die alten Buttons anzupassen.
Aber vielleicht wird es ja noch einmal eine Lösung geben und dann lässt sich diese ja immernoch einfügen. Ich bin auf jeden Fall froh, dass ich jetzt endlich mit den Arbeiten an der Seite anfangen kann.
Falls es irgendwas zu bemängeln gibt, lasse ich mich auf jeden Fall gerne belehren. Auch falls jemand einen alternativen Weg kennt oder eine Lösung für das Ursprüngliche Problem hat.
In einigen Tagen wird der gesamte Code und das Design der Seite dann im entsprechenden Bereich zu sehen sein, damit ich noch einmal auf Nummer sicher gehen kann, dass ich alles richtig gemacht habe.

Danke nochmals,

Gruß Chris

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
td.link{
	background: url('../images/buttonhoch1.png'); 
	background-position:center; 
	background-repeat:no-repeat;	
	color: #fff;
	text-align:center;
	cursor:pointer;
}
td.link:hover{
	background: url('../images/buttontief1.png');
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
    cursor:pointer;
}
</style>
</head>

<body>
<table width="200px" height="100px">
  <tr>
    <td height="33%" width="33%" class="link" onClick="location.href='#'">TESTBUTTON</td>
  </tr>
</table>
</body>
</html>
Wer den Code anweden will muss natürlich die Grafiken gegen eine Farbe oder eigene Grafikdateien tauschen.
 
Zuletzt bearbeitet:
Zurück
Oben