[Gast]  Foren Web allgemein HTML und CSS / Stylesheets vertikales Menü: ie blendet layer nicht mehr aus

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web allgemein
Themen
Beiträge
Moderatoren
Letzter Beitrag
HTML und CSS / Stylesheets
1193
6413
FSt
19. Dez 2022, 21:28
Vitus
 

vertikales Menü: ie blendet layer nicht mehr aus

Trimer
Beiträge gesamt: 236
17. Dez 2009, 13:44
Beitrag # 1 von 4
Bewertung:
(1690 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Zusammen,

und wieder muss ich mich mit den Eigenheiten des IE rumärgern. Nachfolgender Code ist ein Auzug einer Seite. Es existiert ein großes Div mit einer Hintergrund-Grafik. Innerhalb dieses Div sollen mehrere kleinere Divs dargestellt werden, um eine Art Unternavigation darzustellen. In Safari und Firefox Mac ist soweit alles okay. IE blendet die einzelnen Unternavigationen nicht aus, nachdem er sie eingeblendet hat. Außerdem soll beim Rollover der Unternavigationspunkte das Wort farblich hinterlegt werden. Klappt auch, jedoch nicht über die gesamte Breite der einzelnen Divs. Ich würde mich freuen, wenn ihr mir mal wieder unter die Arme greifen könntet.

Hier der Code:
Code 
<html> 
<head> 
<title>green_shop_GR_948px</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
 
body { 
	font-family: arial, helvetica, serif; 
	} 
 
#nav, #nav ul { /* all lists */ 
	padding: 0; 
	margin: 0; 
	list-style: none; 
	line-height: 1; 
	} 
 
#nav a { 
	display: block; 
	width: 10em; 
	color:#006633; 
	text-decoration:none; 
	font-size:12px; 
	line-height:150%; 
	} 
 
#nav li { /* all list items */ 
	float: left; 
	width: 10em; /* width needed or else Opera goes nuts */ 
	} 
 
#nav li ul { /* second-level lists */ 
	position: absolute; 
	background: #f4fbe5; 
	width: 10em; 
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
	} 
 
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
	left: auto; 
	width: 10em; 
	} 
 
.categories { 
	line-height:100%; 
	} 
 
li.items:hover { /* rollover der navipunkte */ 
	display:block; 
	text-decoration:underline; 
	background-color:#c6e48c; 
	width:10em; 
	} 
 
#categorie1, #categorie2, #categorie3 { 
	float: left; 
	color: #ccc; 
	margin-top:325px; 
	width: 10em; 
	} 
 
#categorie1, #categorie4, #categorie7, #categorie10 { 
	margin-left:385px; 
	} 
 
#categorie2, #categorie5, #categorie8, #categorie11 { 
	margin-left:55px; 
	} 
 
#categorie3, #categorie6, #categorie9, #categorie12 { 
	margin-left:115px; 
	} 
 
#categorie4, #categorie5, #categorie6 { 
	float: left; 
	color: #ccc; 
	margin-top:155px; 
	width: 10em; 
	} 
 
#categorie7, #categorie8, #categorie9 { 
	float: left; 
	color: #ccc; 
	margin-top:160px; 
	width: 10em; 
	} 
 
#categorie10, #categorie11, #categorie12 { 
	float: left; 
	color: #ccc; 
	margin-top:150px; 
	width: 10em; 
	} 
 
</style> 
 
<script type="text/javascript"><!--//--><![CDATA[//><!-- 
 
sfHover = function() { 
	var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() { 
			this.className+=" sfhover"; 
		} 
		sfEls[i].onmouseout=function() { 
			this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
		} 
	} 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 
 
//--><!]]></script> 
 
</head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<div style="width:948px; height:930px; background-image:url(speciallinks/de/vkg/images/green_shop_gr_948px.jpg); background-repeat:no-repeat;"> 
<div id="categorie1"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">B&uuml;romaschinen &amp; Zubeh&ouml;r</span></a> 
					<ul> 
						<li class="items"><a href="#">Drucker</a></li> 
						<li class="items"><a href="#">Faxger&auml;te &amp; Zubeh&ouml;r</a></li> 
						<li class="items"><a href="#">Multifunktionsger&auml;te</a></li> 
						<li class="items"><a href="#">Scanner</a></li> 
						<li class="items"><a href="#">Telefone &amp; Anrufbeantworter</a></li> 
						<li class="items"><a href="#">Tisch-/Taschenrechner &amp; Zubeh&ouml;r</a></li> 
						<li class="items"><a href="#">Akku-Ladeger&auml;te, Akkus &amp; Netzger&auml;te</a></li> 
						<li class="items"><a href="#">Speichermedien &amp; Zubeh&ouml;r</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie2"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Haftnotizen, Bl&ouml;cke<br/> und Formulare</span></a> 
					<ul> 
						<li class="items"><a href="#">Bl&ouml;cke, Hefte &amp; Zettel</a></li> 
						<li class="items"><a href="#">Haftnotizen &amp; Index-Haftstreifen</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie3"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Einrichtungsgegenst&auml;nde</span></a> 
					<ul> 
						<li class="items"><a href="#">B&uuml;rost&uuml;hle</a></li> 
						<li class="items"><a href="#">Einrichtungsgegenst&auml;nde</a></li> 
						<li class="items"><a href="#">Schutzmatten</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie4"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Haushalt &amp; Hygiene</span></a> 
					<ul> 
						<li class="items"><a href="#">Hygieneartikel</a></li> 
						<li class="items"><a href="#">Kaffee &amp; Tee</a></li> 
						<li class="items"><a href="#">K&uuml;chen &amp; Haushaltsartikel</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie5"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Lager &amp; Versand</span></a> 
					<ul> 
						<li class="items"><a href="#">Briefumschl&auml;ge &amp; Versandtaschen</a></li> 
						<li class="items"><a href="#">Verpackungsmaterial &amp; Lagerung</a></li> 
						<li class="items"><a href="#">Waagen &amp; Falzmaschinen</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie6"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Ordnung im B&uuml;ro</span></a> 
					<ul> 
						<li class="items"><a href="#">H&auml;ngemappen &amp; Zubeh&ouml;r</a></li> 
						<li class="items"><a href="#">Ordner</a></li> 
						<li class="items"><a href="#">Ringb&uuml;cher &amp; R&uuml;ckenschilder</a></li> 
						<li class="items"><a href="#">Schnellhefter</a></li> 
						<li class="items"><a href="#">Mappen</a></li> 
						<li class="items"><a href="#">Trennbl&auml;tter</a></li> 
						<li class="items"><a href="#">Register</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie7"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Papier &amp; Papierprodukte</span></a> 
					<ul> 
						<li class="items"><a href="#">Etiketten</a></li> 
						<li class="items"><a href="#">Kopier- &amp; Laserpapier</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie8"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Pr&auml;sentieren</span></a> 
					<ul> 
						<li class="items"><a href="#">Bindesysteme &amp; Zubeh&ouml;</a></li> 
						<li class="items"><a href="#">Flipcharts &amp; Flipchartbl&ouml;cke</a></li> 
						<li class="items"><a href="#">Whiteboard-Tafeln &amp; Pinnw&auml;nde</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie9"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Stifte, Kleben &amp; Korrekturmittel</span></a> 
					<ul> 
						<li class="items"><a href="#">Stifte</a></li> 
						<li class="items"><a href="#">Kleben</a></li> 
						<li class="items"><a href="#">Korrekturmittel</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie10"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Stempel &amp; kunden-individuelle Produkte</span></a> 
					<!--<ul> 
						<li class="items"><a href="#">Link 1</a></li> 
						<li class="items"><a href="#">Link 2</a></li> 
						<li class="items"><a href="#">Link 3</a></li> 
						<li class="items"><a href="#">Link 4</a></li> 
					</ul>--> 
				</li> 
			</ul> 
		</div> 
		<div id="categorie11"> 
			<ul id="nav"> 
				<li><a href="#"><span class="categories">Tinten- &amp; Tonerprodukte</span></a> 
					<ul> 
						<li class="items"><a href="#">Tintenpartronen</a></li> 
						<li class="items"><a href="#">Toner</a></li> 
					</ul> 
				</li> 
			</ul> 
		</div> 
	</div> 
	datum: 17.12.09 
</body> 
</html>


(Dieser Beitrag wurde von SabineP am 17. Dez 2009, 14:09 geändert)
X

vertikales Menü: ie blendet layer nicht mehr aus

SabineP
Beiträge gesamt: 7586
17. Dez 2009, 15:02
Beitrag # 2 von 4
Beitrag ID: #428168
Bewertung:
(1677 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Trimer,

woher stammt der Code?

Es sieht so aus als ob der Code von hier stammt:
http://www.htmldog.com/...uckerfish/dropdowns/

Funktioniert diese Demo im IE?
http://www.htmldog.com/.../example/bones1.html

Welche IE-Version meinst Du eigentlich?

Der Orginalartikel zum "Suckerfish Dropdown Menü" mit Beispielen ist hier zu finden,
die Version von htmldoc.com (siehe oben) wurde modifiziert:
http://www.alistapart.com/articles/dropdowns/

Hier noch der Link zu den Beispielen:
http://www.htmldog.com/...es/suckerfish/bones/
http://www.htmldog.com/.../suckerfish/example/

Teste mal die Demo oben und die beiden Beispiele.

Dein Code enthält noch weitere Fehler.
Die ID "nav" wurde mehrfach angegeben.
Der Name einer ID darf aber nur ein einziges mal verwendet werden.

als Antwort auf: [#428160]
(Dieser Beitrag wurde von SabineP am 17. Dez 2009, 15:09 geändert)

vertikales Menü: ie blendet layer nicht mehr aus

FSt
  
Beiträge gesamt: 1965
17. Dez 2009, 15:22
Beitrag # 3 von 4
Beitrag ID: #428169
Bewertung:
(1672 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

>>Funktioniert diese Demo im IE?
>>http://www.htmldog.com/.../example/bones1.html

IE8, IE7, IE6. IE5.55 unter Win XP getestet. Funktioniert!

Gruss
Martin

als Antwort auf: [#428168]

vertikales Menü: ie blendet layer nicht mehr aus

Trimer
Beiträge gesamt: 236
5. Jan 2010, 15:11
Beitrag # 4 von 4
Beitrag ID: #429230
Bewertung:
(1544 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine und Martin,

entschuldigt bitte, dass ich mich jetzt erst melde. Vor den Feiertagen hatte ich viel um die Ohren und habe im ganzen Stress vergessen, mich bei Euch zu melden.
Sabine, Deine Frage woher der Code stammt, hat mich dazu gebracht, noch einmal vom Originalcode auszugehen und es hat funktioniert. Vielen Dank mal wieder für Eure Antworten. Euch einen schönen Tag.

als Antwort auf: [#428169]
X

Aktuell

Diverses
axaio veröffentlicht neue MadeToTag-Version 2.9.126

| 12.09.2023

300x300_05_2023
Weitere Events

Neuste Foreneinträge


Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Quark Objekte lassen sich nicht neben Layout ziehen.

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren
medienjobs
Weitere Stellenangebote