Infobox

[MarcusB]

Hallo zusammen,

Ich hab da ein Problem. Wahrscheinlich habt ihr das noch nicht oft gelesen ^^.

Ich hab mir folgendes Beispiel angesehen: Beispiel

Hab das soweit auch alles hinbekommen bis auf 2 Sachen:

1. Der Tooltip erscheint bei eine kleinen PNG Bild, welches einen transparenten Hintergrund hat. Dummerweise entsteht ja durch <a href="#"> ein blauer Rahmen um das Bild.
Wie bekomme ich den weg ??

2. Wenn der Tooltip sich öffnet und dabei über ein anderes Bild geht, ist dieses immer im Vordergrund. Meine also vor dem Tooltip. Ist halt blöd, wenn man mehrere Bilder hat die recht eng zusammen sind und wenn dann ein Tooltip aufgeht überlappen alle Bilder.
Wie bekomme ich den <span> immer zwingend in den Vordergrund?

Hoffe ich hab mich halbwegs verständlich ausgedrückt.

Gute Nacht
Marcus

[Gunnar Bittersmann]

@@MarcusB:

nuqneH

Ich hab mir folgendes Beispiel angesehen: Beispiel

Hab das soweit auch alles hinbekommen bis auf 2 Sachen:

Es wäre durchaus sinnvoller, _deine_ Seite zu verlinken, nicht (nur) das SELFHTML-Beispiel.

1. Der Tooltip erscheint bei eine kleinen PNG Bild, welches einen transparenten Hintergrund hat. Dummerweise entsteht ja durch <a href="#"> ein blauer Rahmen um das Bild.
   Wie bekomme ich den weg ??

a img { boder: none }

Die Frage ist aber: Warum kriegst du den überhaupt hin? Für etwas anderes als einen Link zum Seitenanfang ist @href="#" falsch. Und wenn der Anker gar nicht auf eine andere Stelle/andere Seite weist, ist ein @href-Attribut falsch.

Damit der Anker ohne @href auch per Tastatur angewählt werden kann, bietet sich @tabindex="0" an.

Wie bekomme ich den <span> immer zwingend in den Vordergrund?

Mit z-index (und von "static" abweichender Positionierung).

Qapla'

[MarcusB]

@@MarcusB:

nuqneH

Ich hab mir folgendes Beispiel angesehen: Beispiel

Hab das soweit auch alles hinbekommen bis auf 2 Sachen:

Es wäre durchaus sinnvoller, _deine_ Seite zu verlinken, nicht (nur) das SELFHTML-Beispiel.

Gibt´s leider noch nicht Online, daher ist´s mir nicht möglich was zu verlinken.

1. Der Tooltip erscheint bei eine kleinen PNG Bild, welches einen transparenten Hintergrund hat. Dummerweise entsteht ja durch <a href="#"> ein blauer Rahmen um das Bild.
   Wie bekomme ich den weg ??

a img { boder: none }

Ich habe bemerkt, dass der Rahmen nur beim IE da ist, FF macht da keine Probs. Leider brauch ich IE. Deine Angaben haben aber funktioniert

Die Frage ist aber: Warum kriegst du den überhaupt hin? Für etwas anderes als einen Link zum Seitenanfang ist @href="#" falsch. Und wenn der Anker gar nicht auf eine andere Stelle/andere Seite weist, ist ein @href-Attribut falsch.

Ganz einfach: Unwissen ! Mach ich ihn weg klappt nix. Hab mich mit CSS noch nicht beschäftig und werde es wahrscheinlich, außer dieses eine mal, so schnell nicht wieder brauchen.

Damit der Anker ohne @href auch per Tastatur angewählt werden kann, bietet sich @tabindex="0" an.

Wie gesagt weis ich keine Alternative. Wichtig ist, das der Mouseovereffekt erhalten bleibt

Wie bekomme ich den <span> immer zwingend in den Vordergrund?

Mit z-index (und von "static" abweichender Positionierung).

z-index kann ich ändern wie ich will, passiert nix. Static wird doch nirgens benutzt oder seh ich das irgendwie falsch?

Qapla'

[Gunther]

@@MarcusB:

nuqneH

Es wäre durchaus sinnvoller, _deine_ Seite zu verlinken, nicht (nur) das SELFHTML-Beispiel.

Gibt´s leider noch nicht Online, daher ist´s mir nicht möglich was zu verlinken.

Das mag vielleicht ein Hindernis sein, ist aber noch lange kein Grund:
http://tinkerbin.com/
http://tinker.io/
http://jsfiddle.net
http://dabblet.com
http://cssdesk.com
http://jsbin.com

Da du offensichtlich mit den Beispielen auf SelfHTML alleine nicht zurechtkommst, und auch Gunnars Tipps scheinbar nicht entsprechend "zu interpretieren" vermagst, ist es imho ziemlich schwierig dir zu helfen,_ohne_deinen HTML- und CSS-Code zu sehen.

Gruß Gunther

[MarcusB]

@@MarcusB:

nuqneH

Es wäre durchaus sinnvoller, _deine_ Seite zu verlinken, nicht (nur) das SELFHTML-Beispiel.

Recht hast ja. Auf die Schnelle mal ein Beispiel-Code. Hoffe hab später noch Zeit mich mit deinen Links zu befassen.

<html>  
  
<head>  
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">  
<style type="text/css">  
<!--  
  
#box0 {position:absolute; top:50px; left:50px; z-index:1;}  
#box0 a:hover {color:black;}  
#box0 a span {display:none;}  
#box0 a:hover span {color:black; background:#ffffff; font:normal 14px courier, sans-serif; display:block; padding:5px;}  
  
#box1 {position:absolute; top:100px; left:100px; z-index:2;}  
#box1 a:hover {color:black;}  
#box1 a span {display:none;}  
#box1 a:hover span {color:black; background:#ffffff; font:normal 14px courier, sans-serif; display:block; padding:5px;}  
-->  
</style>  
  
</head>  
  
<body lang=DE>  
  
<div><p class=MsoNormal><img width=2112 height=1457 id="Grafik 1" src="bg.jpg"></p></div>  
<div id="box0"><a href="#"><img width=50 height=50 border=none src="i1.png"><span>erste Zeile</br>zweite Zeile</span></a></div>  
<div id="box1"><a href="#"><img width=50 height=50 border=none src="i2.png"><span><h1 style="color:black" lang="de">Willkommen!</h1></span></a></div>  
</body>  
  
</html>  

[Gunnar Bittersmann]

@@MarcusB:

nuqneH

a img { boder: none }
Deine Angaben haben aber funktioniert

Das kann ich nicht glauben.

[…] @href="#" falsch. […] @href-Attribut falsch.
Mach ich ihn weg klappt nix.

Du sollst nicht den Anker (das 'a'-Element) wegmachen, sondern dessen @href=Attribut. Also <a href="#"> ersetzen durch <a tabindex="0">.

Mit z-index (und von "static" abweichender Positionierung).
z-index kann ich ändern wie ich will, passiert nix. Static wird doch nirgens benutzt

Eben. "static" ist der Defaultwert. 'z-index' wirkt aber nur, wenn der Wert der 'position'-Eigenschaft NICHT "static" ist. Sprich: auf einen anderen Wert gesetzt ist. "relative" dürfte passend sein.

Qapla'

[MarcusB]

Hab alles hinbeokmmen. Dank euch allen