[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:
(1692 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:
(1679 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:
(1674 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:
(1546 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

InDesign / Illustrator
MTT_300x300_11_2022

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
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

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

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
20.06.2024

Online
Donnerstag, 20. Juni 2024, 15.00 - 15.45 Uhr

Webinar

Etiketten-Workflows gehören zu den anspruchsvollsten in der grafischen Industrie. Ihre PDF-Dateien sind oft sehr komplex und erfordern eine spezielle Vorbereitung. pdfToolbox bietet viele Möglichkeiten, um diese Arbeit zu automatisieren. Nehmen Sie an unserem Webinar "pdfToolbox für den Etikettendruck" teil und lernen Sie einige der Funktionen kennen, die Ihren Etiketten-Workflow effizienter gestalten. Einige der Bereiche, die Sie kennenlernen werden, sind: Beschnitt erzeugen Beim Etikettendruck ist das Druckmotiv oft nicht rechteckig. Lernen Sie, wie Sie einen passenden Beschnitt für alle Arten von Formen hinzufügen können. Produktionsreife Dateien erstellen nutzen Sie bereits vorliegende Inhalte oder Seiteninformationen, um eine Weißform hinter dem Seiteninhalt hinzuzufügen, eine passgenaue Lackform für bestimmte Objekte zu erzeugen oder eine Stanzlinie mit korrektem Sonderfarbnamen zu erstellen. Ausschießen, Step & Repeat, N-Up Mit der Ausschieß-Engine von pdfToolbox lassen sich Seiten zu größeren Druckbögen zusammenfassen, wobei verschiedene Layouts und Komplexitäten unterstützt werden. Hochwertige Freigabe-Bögen Erstellen Sie automatisch Freigabe-Bögen mit Vorschaubildern Ihrer Produktionsdatei und Auftragsdaten aus dem MIS. Qualitätskontrolle pdfToolbox enthält Standard-Preflight-Profile, die die grundlegenden Anforderungen an PDF-Dateien in Etiketten-Workflows abdecken. Prüfen Sie ob Ihre Dokumente internationalen Standards wie ISO PDF/X oder GWG (Ghent Workgroup) Spezifikationen entspricht. Verpackungs- und etikettenspezifische Vorgaben, wie der ISO-Standard „Processing Steps“, werden ebenfalls unterstützt.

kostenlos

Ja

Organisator: callassoftware

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

pdfToolbox für den Ettikettendruck