✔ z-index im Tooltip

son gohan · 30. Juli 2005

Hallo,

ich habe mir einen CSS Tooltip gebaut und das Problem, das wenn ich zwei nebeneinander baue, der erste Tooltip im zweiten Tooltip rein geht, der Tooltip welcher aber erst bei Mausüberfahrt angezigt wird sollte immer im Vordergrund stehen.

HTML

PHP:

 <p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddd</span>
<span class="popuptext">dddddddd</span>
</span></a>
</p>
<p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddddd</span>
<span class="popuptext">dddd</span>
</span></a>
</p>

CSS:

PHP:

.pic   {
  position:   relative;
  margin:   15px 0px 0px 10px;
		  background:   #fff;
		  border:   1px dotted #333;
  }
.pic a .popup  {
		  display:  none;
		  text-align:  left;
		 border:   none;
		  color:   #fff;
		  width:    1px;
		  height:   1px;
				 z-index:1111111;
  }
.popbild  {
  width:   166px;
				 height:   100px;
				 border:   none;
				 z-index:1111;
				 }
.popuber  {
  padding:  2px;
				 background:  #005F00;
				 color:   #fff;
				 display:   block;
				 font:   normal bold 1em/1.2em arial, verdana, sans-serif;
				 }
.popuptext {
  padding:  2px;
				 }
.pic a.pop:visited {
			border:  0 solid #000;
			display:   block;
			background:   #ffffff;
			text-decoration:  none;
	}
.pic a.pop:hover .popup   {
			height:   100px;
		 width:    166px;
		 position:   absolute;
			left:   150px;
			top:   -60px;
			background:   #009F00;
			display:   block;
			border:   #000000 1px solid;
			}
.pic a.pop:hover   {
	color: 	#000000;
			background:    #fff;
			text-decoration:   none;
	}
.pic a.pop  {
		  width:    166px;
		  display:   block;
		  background:   #ffffff;
		  border: #000000  1px solid;
		  text-decoration:  none;
  }

Also der IE Browser mal wieder, die anderen haben keine Probleme.

Gottox · 30. Juli 2005

Öhm... Erklär mir doch noch mal in verständlichen Worten, wo dein Problem liegt...

son gohan · 30. Juli 2005

Sorry, mir fehlen manchmal die richtigen Worte, so habe jetzt aber auch wieder etwas geändert im Code, ein float:left ist dazu gekommen bei pic und dan sieht das ganze schon anders aus,

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel</title>

<style type="text/css">
<!--
.pic   {
  float:left;
				 position:   relative;
  margin:   15px 0px 0px 10px;
		  background:   #fff;
		  border:   1px dotted #333;
  }
.pic a .popup  {
		  display:  none;
		  text-align:  left;
		 border:   none;
		  color:   #fff;
		  width:    1px;
		  height:   1px;
				 z-index:1111111;
  }
.popbild  {
  width:   166px;
				 height:   100px;
				 border:   none;
				 z-index:1111;
				 }
.popuber  {
  padding:  2px;
				 background:  #005F00;
				 color:   #fff;
				 display:   block;
				 font:   normal bold 1em/1.2em arial, verdana, sans-serif;
				 }
.popuptext {
  padding:  2px;
				 }
.pic a.pop:visited {
			border:  0 solid #000;
			display:   block;
			background:   #ffffff;
			text-decoration:  none;
	}
.pic a.pop:hover .popup   {
			height:   100px;
		 width:    166px;
		 position:   absolute;
			left:   150px;
			top:   -60px;
			background:   #009F00;
			display:   block;
			border:   #000000 1px solid;
			}
.pic a.pop:hover   {
	color: 	#000000;
			background:    #fff;
			text-decoration:   none;
	}
.pic a.pop  {
		  width:    166px;
		  display:   block;
		  background:   #ffffff;
		  border: #000000  1px solid;
		  text-decoration:  none;
  }
-->
</style>
</head>
<body>

<p>&nbsp;</p>
<p>&nbsp;</p>

<p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddd</span>
<span class="popuptext">dddddddd</span>
</span></a>
</p>
<p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddddd</span>
<span class="popuptext">dddd</span>
</span></a>
</p>

</body>
</html>

Jetzt müsste man mein Problem direkt sehen im IE Browser.

Gottox · 30. Juli 2005

Scheint so, als würde im IE der z-index falsch gehandhaben... Seltsam... Aber auch nach einigen Tests bleibt das Ergebnis gleich...

son gohan · 30. Juli 2005

Der IE Browser zeigt den Tooltip hinter dem Bild an welches den Tooltip erzeugt, so verständlicher ausgedruckt.

Ein Beispiel ist jetzt auch online unter www.n-k-s.de/test1.html.

son gohan · 30. Juli 2005

Tja, das ist mal wieder ein Problem das nur die Profis hier bei Tutorials.de lösen könnten :-( .

Gottox · 30. Juli 2005

Ich glaube ich fühle mich herrausgefordert

Gottox · 30. Juli 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel</title>

<style type="text/css">
<!--
.pic   {
  float:left;

  margin:   15px 0px 0px 10px;
          background:   #fff;
          border:   1px dotted #333;
  }
.pic a .popup  {
          display:  none;
          text-align:  left;
         border:   none;
          color:   #fff;
          width:    1px;
          height:   1px;
                 z-index:1111111;
  }
.pic a:hover
{
                 position:   relative;
}
.popbild  {
  width:   166px;
                 height:   100px;
                 border:   none;
                 z-index:1111;
                 }
.popuber  {
  padding:  2px;
                 background:  #005F00;
                 color:   #fff;
                 display:   block;
                 font:   normal bold 1em/1.2em arial, verdana, sans-serif;
                 }
.popuptext {
  padding:  2px;
                 }
.pic a.pop:visited {
            border:  0 solid #000;
            display:   block;
            background:   #ffffff;
            text-decoration:  none;
    }
.pic a.pop:hover .popup   {
            height:   100px;
         width:    166px;
         position:   absolute;
            left:   150px;
            top:   -60px;
            background:   #009F00;
            display:   block;
            border:   #000000 1px solid;
            }
.pic a.pop:hover   {
    color:     #000000;
            background:    #fff;
            text-decoration:   none;
    }
.pic a.pop  {
          width:    166px;
          display:   block;
          background:   #ffffff;
          border: #000000  1px solid;
          text-decoration:  none;
  }
-->
</style>
</head>
<body>

<p>&nbsp;</p>
<p>&nbsp;</p>

<p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddd</span>
<span class="popuptext">dddddddd</span>
</span></a>
</p>
<p class="pic">
<a class="pop" href=""><img class="popbild" src="jpg/b.jpg" alt="" />
<span class="popup">
<span class="popuber">dddddddd</span>
<span class="popuptext">dddd</span>
</span></a>
</p>

</body>
</html>

Ich kann eben doch CSS*freu*

son gohan · 30. Juli 2005

Hammer hart,

ich glaub ich muss da mal wirklich mächtig meinen Hut vor dir ziehen, du kannst es ja doch.

Jetzt will ich mal meinen Fehler studieren, oder kannst du mir so sagen was du alles geändert hast?

Gottox · 30. Juli 2005

Fehler gab es keine.
Es gab nur ein Problem mit dem position:relative. Sieht irgendwie nach einem Bug aus...

Das Problem habe ich gelöst, indem ich ganz einfach nur den Container, auf den die Maus zeigt auf position:relative setze. Der unberührte Container bleibt auf den Standartwert, position:static (bzw. nichts angegeben).

Aber ganz ehrlich... Ne halbe Stunde hab ich mich damit schon beschäftigen müssen...

✔ z-index im Tooltip

son gohan

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

Gottox

Erfahrenes Mitglied

Neue Beiträge