Span style position z-index:

Woodstock · #1 (**permalink**) 12.08.2003, 11:42

Hi,

ich hab folgendes Problem, das ich bis jetzt noch nicht lösen konnte.
Ich habe bestimmte Bereiche die ich mit einem PopUp Effekt mit CSS definiere. Nun möchte ich das PopUp Fenster immer in den Vrdergrund, so das es alle Bereiche überlagert.
Und da sollte man in dem <span> einen z-index definieren können, so dass dieser immer in den Vordergrund kommt.
Und falls es noch hilfreich ist, das ganze soll im Mozilla und IE funktionieren.

Dankeschön
Martin

<--Generelle Definitionen-->
div a:hover {
position: absolute;
left: 0px;
top: 0px;
text-decoration: none;
}

a span {
display: none;
width: 250px;
}

a:hover span {
position: absolute;
display: block;
}

a:hover {
border: none;
}

<--farben für PopUp-->
#popuptao {
font-family: verdana;
font-size: 13px;
font-weight: bold;
text-align: left;
background-color: #000000;
color: #FFFFFF;
padding: 4px;
border: 2px solid #000000;
}

#popuptau {
font-family: verdana;
font-size: 13px;
font-weight: normal;
text-align: left;
background-color: orange;
color: #000000;
padding: 4px;
border: 2px solid #000000;
}

<--Quelltext-->
<div style="position: absolute; left: 50px; top: 50px; z-index: 3">
<a href="#" style="text-decoration: none">
<div style="position: absolute; left: 0px; top: -25px; z-index:
3">
[img]../../bilder/tester.gif[/img]
</div>
<div style="position: absolute; left: 0px; top: 0px; height:
120px; width: 120px; background-color: #0091D3;
border: 2px solid #000000; z-index: 0">

</div>
<div style="position: absolute; left: 8px; top: 8px;
background-color: #F5C600; border: 1px solid #000000;
width: 105px; height: 105px; z-index: 2">
<div style="font-family: verdana; font-size: 13px;
font-weight: bold; color: #000000;
text-align: center; padding: 2px">
Tester
</div>
</div>
<span style="position: absolute; left: 40px; top: -20px;
z-index: 10">
<div id="popuptao">
Überschrift
</div>
<div id="popuptau">
Text
</div>
</span>
</a>
</div>

ulle · #2 (**permalink**) 14.08.2003, 23:04

Ich habe eben versucht aus Deinem Quelltext schlau zu werden

[negativ]

Was soll das denn sein ???

DIVs innerhalb von Links sind sowieso nicht mehr erlaubt [W3C].

Ich habe hier ein Beispiel was Dir evtl. hilft. Es ist This Page Is Valid XHTML 1.0 Strict! und benötigt erstmal keinen z-index.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	
<!--
	html,body	{ 
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 11px;
		background-color: #FFCC99;
		color: #000000;
		}
		
	.box {
		border:1px solid #000000;
		background:#FFEEEE;
		padding: 5px;
		line-height: 120%;
		}
				
	.box a { 
 		text-decoration:none;
		color: #000000;
		background:#66DDFF;
		border:1px solid #66DDFF;
		}
		
	.box a:visited { color: #000000; }
	.box a:hover { color: #000000; border:1px solid #000000; cursor: help;}
	.box a:active { color: #000000; }
		
	.box a .info1 { 
 		display:none;
		}
		
		
	.box a:hover .info1 {
		display:block;
		position:absolute;
		background:#66DDFF;
		top: 5px;
		right: 5px;
		width:200px;
 		padding:5px;
 		border:1px solid #000000;
		}
	.box a .info2 { 
 		display:none;
		}
		
		
	.box a:hover .info2 {
		display:block;
		position:absolute;
		background:#66DDFF;
		bottom: 5px;
		right: 5px;
		width:200px;
 		padding:5px;
 		border:1px solid #000000;
		}

	-->
</style>
</head>
<body>


<div class="box">
	Dies ist ein normaler 
	<a href="#" onfocus="if(this.blur)this.blur();" onmouseover="status='';return true;">&LINK
		<span class="info1">
		Dies ist der Infotext_1 innerhalb des Links;
		Der Border beim box a:hover nuß sein sonst geht es im IE nicht !!!!
		</span>
		<span class="info2">
		Dies ist der Infotext_2 innerhalb des Links;
		Der Border beim box a:hover nuß sein sonst geht es im IE nicht !!!!
		</span>
	</a>
	&innerhalb der Klasse Box
</div>

</body></html>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bildergröße beim verkleinen des Browserfensters	melvinuspo	CSS	3	07.04.2015 16:41
z-index hoch, dennoch grafik nicht ganz oben	bergg	CSS	6	27.10.2010 16:02
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Navigation verschwindet im IE6	emti	CSS	4	12.05.2009 15:01
prblemme mit mein inhalt div	carlos587261	CSS	3	23.04.2008 14:07