✔ Transparente Box und Schrift

H

hinkel11

Mitglied
Gelöst: Transparente Box und Schrift

Hallo,

Auf der unten angegebenen Seite habe ich folgendes Problem. Ich habe mir einen Tooltip zusammengebastelt, wobei ich die Box etwas Transparenz gegeben hab. In der untersten Zeile vom Tooltip, d.h. dort wo steht "Fan von:.." ist es nun so, dass der Text dahinter ebenfalls transparent ist. Kann ich dies irgendwie vermeiden?

Hier die Seite:
http://sccg09.cockerspaniel-gehren....tent&view=article&id=58:team&catid=36:presse#

Hier der CSS-Code vom tooltip:
Code: 
.center {
align: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}

/*
span span {
display:none;
}

span:hover span {
display:block;
position:absolute;
right:1100px;
top:155px;
} 
*/

a.tooltip{		
/*	border-bottom: 1px dashed green; */
	text-decoration: none;
}

a:hover.tooltip{ 
	padding: 0;

} 

.tooltip:hover span span{
        display: block;
}

.tooltip span{	
	position: absolute;	
	text-decoration: none;	
}

.tooltip span span{ 
	display: none;	
	position: absolute;
	background-color: #000000; 
	border: 1px solid #3a3a3a;	
	color: black;
	text-decoration: none;
	width: 200px;
	opacity: 0.9;
	-moz-border-radius:3px;
	bottom: 100px;
	left: 60px;
} 

.table {
	background-color: #ffffff;
	font-size: 11px;
	font-weight: 100;
	position: relative;
}

   DIV.shadow5 IMG {
   border: 0px solid #666;
   display:block;
   position: relative;
   -moz-opacity:0.67;
   }

   DIV.shadow5:hover IMG {
   -moz-opacity:1;
   }
 
Zuletzt bearbeitet:
Hi,

der Tooltip-Box fehlt lediglich eine Schichtpositionierung mittels der z-index-Eigenschaft, damit sie vom nachfolgenden Element an dieser Stelle nicht überdeckt wird.

mfg Maik
 
z-index Problem im IE7, Transparenz

Hallo,

auf der unten angegebenen Seite wird eine transparente Box angezeigt wenn man mit der Maus über eines der Bilder fährt. Im Firefox wird der Boxinhalt korrekt angezeigt, d.h. die Schrift wird, so wie sie es soll, nicht transparent angezeigt. Im Internet Explorer 7 wird die Schrift jedoch transparent dargestellt. Hängt dies evtl. mit der unterschiedlichen Interpretation der z-index Anweisung zusammen.
Das Problem besteht zwar auch im Internet Explorer 6, ist dort aber nicht so deutlich sichtbar, da dieser die Box wo anders erscheinen lässt wie Firefox 2 & 3 oder Internet Explorer 7.
Hat jemand eine Idee warum Internet Explorer und Firefox die transparente Box unterschiedlich erscheinen lassen? Danke.

Hier die Seite:
http://www.corona-gehren.de/main/in...ntent&view=article&id=58:team&catid=36:presse
 
Hi,

du müsstest dem Tooltip einen weitaus höheren z-index-Wert wie blos "2" geben, und den einzelnen Bildern von links nach rechts eine absteigende Schichtposition zuordnen, damit sie im IE den "Tooltip" nicht überdecken.

mfg Maik
 
Also nochmal zum Verständnis: ich muss jedem einzelnen Bild von links nach rechts eine absteigende Schichtposition zuordnen, und das muss ich direkt im img-Tag angeben, oder wo?
D.h. ich hab 18 Bilder - das 1. Bild (links oben) bekommt die Schichtposition 18 und das letzte Bild (rechts unten) die Schichtposition 1, und der Tooltip die Position 19.
hab ich das richtig verstanden? Danke.
 
Soweit brauchst du mit den Schichtpositionswerten nicht zu gehen, denn pro Zeile existieren ja nur vier Bilder.

mfg Maik
 
Ok, hab jetzt den ersten 4 Bildern von links nach rechts eine absteigende Schichtpopsition zugeordnet indem ich im img-Tag folgendes hinzugefügt hab: style="z-index: 1" (fürs erste Bild), und dem Tooltip hab ich die Schichtposition 5 gegeben. Nun rutscht der Tooltip aber unter das jeweilige Bild.

Ich poste hier einfach nochmal den css-Code, weil der hat sich inzwischen geändert:
Code: 
/* Dies ist für den Tooltip, d.h. die transparente Box. */
.tooltip span span{ 
	display: none;	
	position: absolute;
	background-color: #000000; 
	border: 1px solid #3a3a3a;
	color: black;
	text-decoration: none;
	width: 200px;
	-moz-opacity: 0.9;
        filter:alpha(opacity=90);
	opacity: 0.9;
	-moz-border-radius:3px;
	bottom: 100px;
	/* top: -20px;	*/
	left: 60px;
        z-index: 5;
	text-align: left;
} 

/* Dies ist für die Bilder ohne MouseOver. */
   DIV.shadow5 IMG {
   border: 0px solid #666;
   display:block;
   position: relative;
   -moz-opacity:0.67;
   filter:alpha(opacity=67);
   opacity: 0.67;
   }

/* Dies ist für die Bilder bei Mouseover */
   DIV.shadow5:hover IMG {
   -moz-opacity:1;
   filter:alpha(opacity=100);
   opacity: 1;	
   }
 
hinkel11 hat gesagt.:
Ok, hab jetzt den ersten 4 Bildern von links nach rechts eine absteigende Schichtpopsition zugeordnet indem ich im img-Tag folgendes hinzugefügt hab: style="z-index: 1" (fürs erste Bild), und dem Tooltip hab ich die Schichtposition 5 gegeben.
Zum Vergrößern anklicken....
z-index funktioniert nur in Verbindung mit der position-Eigenschaft (absolute oder relative).

mfg Maik
 
Hab beim ersten Bild position: relative hinzugefügt, aber es ändert sich nichts. Wär ja auch doppelt gemoppelt, da in der class "DIV.shadow5 IMG" schon position:relative steht.
Ich glaub das problem liegt irgendwo bei der class "DIV.shadow5:hover IMG".
Und wenn ich mit "position: absolute" arbeite, verschieben sich die Bilder nach unten.
Versteh ich nicht, weil beim 4. Bild in der 1. Reihe wirds doch korrekt angezeigt, ohne das die Box unters Bild rutscht.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück