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

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

vertikales Menü: ie blendet layer nicht mehr aus

Trimer
Beiträge gesamt: 236

17. Dez 2009, 13:44
Beitrag # 1 von 4
Bewertung:
(1651 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>

------


Mit einem freundlichen Gruß
Johannes Erhazar

(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:
(1638 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.
Gruß Sabine


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: 1961

17. Dez 2009, 15:22
Beitrag # 3 von 4
Beitrag ID: #428169
Bewertung:
(1633 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(1505 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.
------


Mit einem freundlichen Gruß
Johannes Erhazar


als Antwort auf: [#428169]
X

Aktuell

PDF / Print
Wolken_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
29.09.2022

IDUGS#85 Press2id

Zoom Meeting
Donnerstag, 29. Sept. 2022, 19.00 - 21.00 Uhr

Vortrag

Kennst du WordPress? Vielleicht. Verwendest du WordPress? Ja, klar! WordPress ist das am weitesten verbreitete System für die Erstellung von Webseiten. Um Webseitenbau soll es auf dieser IDUG aber nicht gehen. Gregor zeigt press2id (github.com/grefel/press2id). Seine Open-Source-Lösung für die Verbindung von Web und InDesign. Richtig gelesen: InDesign liest mithilfe von press2id die Inhalte der WordPress-Webseiten und generiert daraus Zeitschriften, Kataloge, Programmhefte oder Bierdeckel (das zeigen wir natürlich auch!). So wird die „Content First“ Theorie zu einer konkret anwendbaren Praxis, ohne gleich die ganz großen Räder zu drehen. Versprochen: Jeder kann nach der IDUG innerhalb kürzester Zeit Daten von WordPress nach InDesign importieren. Aber Achtung: Prinzipiell kann press2id aus jeder Website, oder besser Contentmanagementsystem (CMS) Daten auslesen und nach InDesign importieren! Spannend, oder? Danach geht es in die Praxis: Stefan hat die Webseite des Parktheater Iserlohn (parktheater-iserlohn.de) gestaltet. Die gedruckten Spielpläne (parktheater-iserlohn.de/interaktive-spielplaene) werden mit press2id realisiert. Wir schauen in den Maschinenraum und zeigen, wie die Lösung des Projekts realisiert wurde.

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs85.eventbrite.de/

Von Wordpress nach InDesign
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022