✔ z-Index <=> Ebenen sind falsch dargestellt

napsi · 15. März 2012

hallo an alle:

Habe das Problem, dass sich die navigation unter ein bild schiebt, was natürlich nicht besonders förderlich ist.

Wer kann mir abhilfe verschaffen.

habe die z-index beim menü auf 1000 und beim bild auf 1 gestellt - trotzdem funktioniert es nicht.

bitte um hilfe:

Code:

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
z-index:1000;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
margin:0;
list-style-type:none;
width:150px;
padding-left:5px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#d4d8bd;
height:26px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
	font-size:10pt;
	text-decoration:none;

}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#949e7c;}

.menu :hover > a {
background:#949e7c;
	text-decoration:none;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->




<%session("TopNav")="Produkte"%>
<!--#include virtual="script/header.inc"-->
<!--#include virtual="script/RSopen.inc"-->
<div id="contflinks">
		<a href="index.htm"><img src="img/hpelemente/logo.gif" alt="" border="0" style="position:relative; top:-7px; left:70px"></a>
		<p></p>	<div id="subnav">
<div class="menu">
	<ul>
		<li class="sub"><a href="#">euro<strong>therm</strong> »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub">
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=2">euro<strong>therm</strong> 4</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=7">euro<strong>therm</strong> 6</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=8">euro<strong>therm</strong> 8</a></li>
            <li><a href="http://www.kaschuetz.at/produkte.asp?item=9">euro<strong>therm</strong> 10</a></li>
			<!--<li><a href="http://www.kaschuetz.at/produkte.asp?item=4">euro<strong>therm</strong> 11</a></li>-->
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=3">euro<strong>therm</strong> 12</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=11">euro<strong>therm</strong> Hinterlader</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=10">euro<strong>therm</strong> Tunnel</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=50">euro<strong>therm</strong> Slide</a></li>

		  </ul>
		</li>
		<li class="sub"><a href="#">euro<strong>matic</strong> »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=62">euro<strong>matik</strong> Luftkasten</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=61">euro<strong>matik</strong> Rohrklappe</a></li>

		  </ul>
		</li>	  	
        <li class="sub"><a href="#">euro<strong>flux</strong> »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<!--<li><a href="http://www.kaschuetz.at/produkte.asp?item=4">euro<strong>flux</strong> 5</a></li>-->
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=6">euro<strong>flux</strong> 10</a></li>

		  </ul>
		</li>	
		<li class="sub"><a href="#">Heiztüren »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=48">kachelofentüren</a></li>
			<li class="sub"><a href="#">Türvariationen »<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>

					<li><a href="http://www.kaschuetz.at/produkte.asp?item=12">Elegance</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=14">Trend Radius 47/52 Radius 45</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=52">Aurea 44/52 Standard</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=57">Aurea 34/52 Standard</a></li>
					<!--<li><a href="http://www.kaschuetz.at/produkte.asp?item=11">Aurea 46/54 Standard</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=11">Aurea 36/54 Standard</a></li>-->
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=51">Aurea 46/54 Nische</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=59">Aurea 36/54 Nische</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=54">Aurea 44/52 Radius 35</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=53">Aurea 44/52 Radius 45</a></li>
					<!--<li><a href="http://www.kaschuetz.at/produkte.asp?item=11">Aurea 36/54 Radius 35</a></li>
					<li><a href="http://www.kaschuetz.at/produkte.asp?item=11">Sonderanfertigung</a></li>-->
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
        <li class="sub"><a href="#">Einbauzarge »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=28">Schamottezarge</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=60">Gusszarge</a></li>

		  </ul>
		</li>
        <li class="sub"><a href="#">Zubehör »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=40">Nachheizkasten</a></li>
			<!--<li><a href="http://www.kaschuetz.at/produkte.asp?item=4">Rauchrohrartikel</a></li>-->
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=37">Einbaurahmen</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=4">Gussrohr</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=38">Aussenluftadapter</a></li>
			<li><a href="http://www.kaschuetz.at/produkte.asp?item=39">Flexrohre</a></li>

		  </ul>
		</li>
		<li><a href="http://www.kaschuetz.at/produkte.asp?item=55">MIO</a></li>
	</ul>
</div>

<%
'	E1=Request("E1"):If(Len(E1)>0 And Len(E1)<=5 And IsNumeric(E1)) Then E1=cInt(E1) Else E1=-1
'	E2=Request("E2"):If(Len(E2)>0 And Len(E2)<=5 And IsNumeric(E2)) Then E2=cInt(E2) Else E2=-1
'	E3=Request("E3"):If(Len(E3)>0 And Len(E3)<=5 And IsNumeric(E3)) Then E3=cInt(E3) Else E3=-1
'
'	sql="Select pk1.*,pk2.*,pk3.* from (ProduktKat as pk1"+_
'		" left join produktkat as pk2 on pk2.previd=pk1.id and (pk2.previd)="& E1 &" and (pk2.show)<>0"+_
'		") left join produktkat as pk3 on pk3.previd=pk2.id and (pk3.previd)="& E2 &" and (pk3.show)<>0"+_
'		" Where pk1.Ebene=1 and (pk1.show)<>0 Order by pk1.Rank,pk2.Rank,pk3.rank;"
'	On Error Goto 0 'on error resume next
'	'response.write "##"+sql+"##"
'	RS.open SQL, Conn
'
'	dim group:set group=New_GroupingController(3)
'	group.FromField rs(0),1
'	group.FromField rs("pk2.ID"),2
'	group.FromField rs("pk3.ID"),3
'	group.NewValues
'
'	Do While Not RS.EOF
'		vCurLvl=0
'		If(Not IsNull(rs("pk3.ID"))) Then vCurLvl=3:_
'		Else If(Not IsNull(rs("pk2.ID"))) Then vCurLvl=2:_
'		Else If(Not IsNull(rs("pk1.ID"))) Then vCurLvl=1
'
'		If(group.Showing(1)) Then
'			sActive="":If E1=cInt(RS(0)) Then sActive=" class='active'"
'			Response.Write Chr(10)+"<li><a href='produkte.asp?E1="& RS(0) &"&item="& RS("pk1.ItemID") &"'"& sActive &_
'				">"& RS("pk1.Kategorie") &"</a></li>"
'		End If
'
'		If(group.Entering(2)) Then
'			Response.Write "<ul class=sl>"
'		End If
'		If(group.Showing(2) And Not IsNull(RS("pk2.ID"))) Then
'			sActive="":If E2=cInt(RS("pk2.ID")) Then sActive=" class='active'"
'			Response.Write "<li><a href='produkte.asp?E1="& RS(0) &"&E2="& RS("pk2.ID") &"&item="& RS("pk2.ItemID") &"'"& sActive &_
'				">"& RS("pk2.Kategorie") &"</a></li>"
'		End If
'
'		If(group.Entering(3)) Then
'			Response.Write "<ul class=sll>"
'		End If
'		If(group.Showing(3) And Not IsNull(RS("pk3.ID"))) Then
'			sActive="":If E3=cInt(RS("pk3.ID")) Then sActive=" class='active'"
'			Response.Write "<li><a href='produkte.asp?E1="& RS(0) &"&E2="& RS("pk2.ID") &"&E3="& RS("pk3.ID") &"&item="& RS("pk3.ItemID") &"'"& sActive &_
'				">"& RS("pk3.Kategorie") &"</a></li>"
'		End If
'
'		RS.MoveNext:group.NewValues
'
'		If(group.Leaving(3)) Then
'			Response.Write "</ul sll>"
'		End If
'		If(group.Leaving(2)) Then
'			Response.Write "</ul sl>"
'		End If
'		If(group.Leaving(1)) Then
'			Response.Write "</ul vert>"
'		End If
'	Loop
'	rs.Close
%>
	</div>
<%If Request.QueryString("item")<>"" Then

	sql="Select * from Produkt p left join ProduktDocs pd on pd.PID=p.ID Where p.ID=" & cStr(cInt(Request.QueryString("item")))
	'sql="Select * from Produkt Where ID=" & Request.QueryString("item")
	'on error resume next
	RS.open SQL, Conn
	if not RS.EOF then
	%>
			<%If RS("Bild1")<>"" Then%>
				<div id="picturethumbnail1" style="position:relative; z-index:0">
				<img src="<%=RS("Bild1")%>" class="picture" alt="">
				</div>
			<%End If%>

	<%
	''RS.movenext
	end if
	%>
<%End If%>
</div>

<div id="contfrechts">
	<div class="scrolling">
	<%itemfound=0
	If Request.QueryString("item")<>"" Then

	'recordset still open & usable...
	'On Error Goto 0 'On Error Resume Next
	'RS.open SQL, Conn
	if not RS.EOF then
	%>
		<p align="right" class="headline"><%=RS("Name")%></p>
		<div id="contnews_product">
			<ul>
			<li><p class="rubrik_name">Beschreibung</p>
			<p class="content"><%=RS("Beschreibung")%></p></li><br>
			<li><p class="rubrik_name">Zahlen und Fakten</p>
			<p class="content"><%=RS("Zahlen")%></p></li><br>
			<li><p class="rubrik_name">Dokumente</p>
			<%
			Do Until RS.EOF
				Response.Write("<p><a target='_blank' href='Dokumente/"& RS("link") &"'>"& RS("Bezeichnung") &"</a></p>")
				RS.movenext
			Loop
			%>
			</li>
			</ul>
		</div>

			<!--<p class="verweis" align="right"><< <a href="produkte.asp?<%=link%>&item=<%=Request.QueryString("item")%>&page=2">mehr Informationen</a> >></p>-->
	</div>
	<%
	''link=""
	itemfound=1
	end if
	rs.Close
	end if
	%>
	<%if 0=itemfound then%>
	<p align="right" class="headline">Produkte</p>
	<p class="content">Hier finden Sie unsere Produktpalette. Wir sind bemüht, diese immer am neuesten Stand zu halten.</p>
	<%End If%>
	</div>

</div>
<!--#include virtual="script/footer.inc"-->

die seite, wo das ergebnis zu sehen ist: http://www.kaschuetz.at/produkte.asp?item=4

bitte um dringende hilfe

lg.

napsi

DiDiJo · 15. März 2012

folgende Zeile behebt bei mir das Problem:

Code:

/*Datei: produkte.asp?item=4 (Zeile 61*/
.menu ul ul {
    left: 150px;
    position: absolute;
    top: 0;
    visibility: hidden;
    z-index: 2000;
}

ansosnten bau dir mal die HTML Struktur so um, dass zuerst das Bild im Quellcode steht und erst danach die Navigation

napsi · 15. März 2012

Danke Brokat, warum ich nicht selber darauf gekommen bin, es an dieser stelle zu setzen weiß ich nicht.

danke nochmals

lg.

napsi

✔ z-Index <=> Ebenen sind falsch dargestellt

napsi

Erfahrenes Mitglied

DiDiJo

Erfahrenes Mitglied

napsi

Erfahrenes Mitglied

Neue Beiträge