nicht angemeldet
Tooltipp-Problem mit "relative" bei Opera
Hallo Zusammen,
Ich habe innerhalb meiner Seite ein paar Bilder, bei denen beim rübergehen mit der Maus ein kurzer Text erscheinen soll.
Damit die Tooltipps an einer vernünftigen Stelle angezeigt werden, habe ich direkt beim Tooltipp "position: relative;" ausgewählt.
Unter Firefox und IE sieht das auch vernünftig aus (Text erscheint unter dem Bild, egal wie groß das Bild ist!); nur bei Opera erscheint der Text irgendwo mittig im Bild, als wenn der Ausgangspunkt nicht das Bild, sondern die obere Kante vom Bild wäre.
Weiß jemand eine Lösung für das Problem?
Danke im vorraus
Micha
P.S.: Ich habe von html kaum Ahnung, also bitte noob-gerechte Antworten ;)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>test</title>
<style type="text/css">
<!--
/* Tooltip */
a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
position: absolute;
top: 20px;
left:;
width: 150px;
z-index: 100;
color: #000000;
border:1px solid #000000;
background: #FFFFCC;
font: 12px Verdana, sans-serif;
text-align: center;
}
}
-->
</style>
</head><body>
<br /><br /><br /><br />
<a class="tooltip"><input type="image" value="Formular abschicken..." style="width:70px;height:85"
name="Geraete_auswaehlen"
src="Bilder/warenkorb.jpg"> <span>select items for occupation calender</span>
</a>
<a class="tooltip"><input type="image" value="Formular abschicken3..." style="width:70px;height:85"
name="Geraete_loeschen"
src="Bilder/96px-User-trash.svg.png"> <span>Delete selected items from personal list</span>
</a>
<br /><br /><br /><br />
<a class="tooltip">
<input type="hidden" value="eigene_Belegung" name="eigene_Belegung">
<input type="image" src="Bilder/Meins2.jpg"> <span>my reserved items</span>
</a>
</body></html>
-
Ich habe innerhalb meiner Seite ein paar Bilder, bei denen beim rübergehen mit der Maus ein kurzer Text erscheinen soll.
Nein, bilder sind das nicht - das sind Formular-Buttons vom typ "image" die zudem keine korrekte Höhenangabe haben.
Wie hoch sind die 85 Marillenknödel? 85 Klafter?
Damit die Tooltipps an einer vernünftigen Stelle angezeigt werden, habe ich direkt beim Tooltipp "position: relative;" ausgewählt.
Nein, du hast dem a-Element in dem das Zeug drinnen ist ein position: relative verpasst.
Unter Firefox und IE sieht das auch vernünftig aus (Text erscheint unter dem Bild, egal wie groß das Bild ist!); nur bei Opera erscheint der Text irgendwo mittig im Bild, als wenn der Ausgangspunkt nicht das Bild, sondern die obere Kante vom Bild wäre.
Ist sie ja auch - der Ursprungspunkt für den Tooltip selbst (das span-Element) ist wie du angibst die linke obere Ecke (du gibst top an und left "nix") des a-Elementes mit position: relative.
Weiß jemand eine Lösung für das Problem?
Vernünftigen, fehlerfreien Code - dann klappts auch mit dem nachbarn.
<br /> ist in HTML 4.01 zwar nicht falsch, aber vermutlich nicht das was du erwartest - ersetz es durch <br> oder noch besser: weg damit.
In Summe würde ich sage Opera macht es richtiger als die anderen genannten Browser - das bestätigt auch ein prüfender Blick in Safari und Chrome.
-
Hallo suit,
erstmal Danke für die Antwort.
Habe Deine Verbesserungen umgesetzt.
Aber mein Hauptproblem bleibt erstmal immer noch.
Gibt es eine Möglichkeit bei den Buttons als Ausgangspunkt (für alle Browser) immer die Linke UNTERE Ecke zu nehmen oder muss ich für jeden Button die Höhe einzeln bestimmen?Gruß Micha
-
Gibt es eine Möglichkeit bei den Buttons als Ausgangspunkt (für alle Browser) immer die Linke UNTERE Ecke zu nehmen oder muss ich für jeden Button die Höhe einzeln bestimmen?
Sicher - mit scharf nachdenken und einem Grundverständnis der englischen Sprache klappt das.
Ich sagte bereits das 'top' und 'left' für 'oben' und 'links' stehen.
-
-