|
|||
Mehrspaltiges Submenü
Hallo.
Seit heute Früh kämpf ich schon um eine Lösung für mein Problem, bin aber noch nicht drauf gekommen. Es ist so, dass ich für eine neue Webseite eine horizontale Navigation erstellen muss, bei der sich die Submenüs vertikal nach unten hin öffnen, wenn ich mit der Maus über einen Navigationspunkt fahre. So weit so gut. Das funktioniert auch ohne Probleme. Nur ist es so, dass ich bei einem Menüpunkt so viele Submenüpunkte habe, dass ich diese gerne in 3 Spalten nebeneinander darstellen möchte. Ist eigentlich auch kein Problem - außer im IE. Im FF funktioniert alles einwandfrei, aber der IE legt die 3 <ul>, die im FF nebeneinander sind, übereinander. Ich komm leider nicht drauf. Kann jemand helfen? Code:
body, p a { font: normal 100.01% Verdana, Geneva, sans-serif; color: black; background-color: #ffffe0; } div#Rahmen { width: 960px; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 960px; w\idth: 960px; } div#Rahmen div { clear: left; } ul#Navigation { /* ganze Navigation */ margin: 0; padding: 0; } ul#Navigation li { /* ALLE LIs */ list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; padding: 0; margin-bottom: -0.4em; } * html ul#Navigation li { /* Korrektur fuer den IE */ margin-bottom: -0.4em; } ul#Navigation li ul { /* Submenue */ margin: 10px 0 0 0; padding: 0; position: absolute; top: 16px; display: none; /* Unternavigation ausblenden */ } * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */ left: 0; lef\t: 0; } ul#Navigation li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } ul#Navigation li ul li { float: none; display: block; border: solid 1px #395588; } * html ul#Navigation li ul li { /* Korrektur fuer IE */ float: none; display: block; border: solid 1px #395588; } ul#Navigation li ul li a.unternehmenliste { width: 260px; height: 25px; padding-left: 5px; } ul#Navigation li ul li a.serviceliste, ul#Navigation li ul li a.refnewsliste { width: 200px; height: 25px; padding-left: 5px; } ul#Navigation li ul li a.produkt1 { width: 280px; height: 25px; padding-left: 5px; } ul#Navigation li ul li a.produkt2 { width: 260px; height: 25px; padding-left: 5px; } ul#Navigation li ul li a.produkt3 { width: 220px; height: 25px; padding-left: 5px; } * ul#Navigation li ul li a { /* Korrektur fuer den IE */ height: 29px; } ul#Navigation a { display: block; width: 160px; /* Breite den in li enthaltenen Elementen zuweisen */ text-decoration: none; color: #395588; background-color: #fff; } * html ul#Navigation a, * html ul#Navigation span { width: 160px; /* Breite nach altem MS-Boxmodell für IE 5.x */ w\idth: 160px; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */ } ul#Navigation a:hover { color: #dd8c19; background-color: white; } /* ............................. BUTTONS ................................. */ li#unternehmen a.topmenue { background-image: url(material/navigation/unternehmen.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#unternehmen a.topmenue:hover { background-image: url(material/navigation/unternehmen-hover.jpg); width: 160px; height: 25px; } li#produkte a.topmenue { background-image: url(material/navigation/produkte.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#produkte a.topmenue:hover { background-image: url(material/navigation/produkte-hover.jpg); width: 160px; height: 25px; } li#service a.topmenue { background-image: url(material/navigation/service.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#service a.topmenue:hover { background-image: url(material/navigation/service-hover.jpg); width: 160px; height: 25px; } li#referenzen a.topmenue { background-image: url(material/navigation/referenzen.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#referenzen a.topmenue:hover { background-image: url(material/navigation/referenzen-hover.jpg); width: 160px; height: 25px; } li#aktuelles a.topmenue { background-image: url(material/navigation/aktuelles.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#aktuelles a.topmenue:hover { background-image: url(material/navigation/aktuelles-hover.jpg); width: 160px; height: 25px; } li#kontakt a.topmenue { background-image: url(material/navigation/kontakt.jpg); width: 160px; height: 25px; text-indent: -9999px; } li#kontakt a.topmenue:hover { background-image: url(material/navigation/kontakt-hover.jpg); width: 160px; height: 25px; } #produktliste1 { z-index: 102; } #produktliste2 { z-index: 101; left: 285px; } #produktliste3 { z-index: 100; left: 550px; } HTML-Code:
<body> <div id="Rahmen"> <ul id="Navigation"> <li id="unternehmen"><a href="#Beispiel" class="topmenue">Unternehmen</a> <ul> <li><a href="#Beispiel" class="unternehmenliste">Polysan: Rohrsysteme für alle Anwendungen</a></li> <li><a href="#Beispiel" class="unternehmenliste">Experten für hochwertige Lösungen</a></li> <li><a href="#Beispiel" class="unternehmenliste">Vorteile durch starke Marken</a></li> <li><a href="#Beispiel" class="unternehmenliste">Sicherheit für Jahrzehnte</a></li> <li><a href="#Beispiel" class="unternehmenliste">Lageplan</a></li> <li><a href="#Beispiel" class="unternehmenliste">Offenlegung</a></li> </ul> </li> <li id="produkte"> <a href="#Beispiel" class="topmenue">Produkte</a> <ul id="produktliste1"> <li><a href="#Beispiel" class="produkt1">ALFASAN-PP-R-Trinkwassersystem dunkelblau</a></li> <li><a href="#Beispiel" class="produkt1">AUSTROSAN-PP-R-Trinkwassersystem hellblau</a></li> <li><a href="#Beispiel" class="produkt1">ALU-PE-X-Verbundrohre</a></li> <li><a href="#Beispiel" class="produkt1">HENCO-ALU-PE-X-Verbundrohre</a></li> <li><a href="#Beispiel" class="produkt1">REVI-Kunststoff-Schiebehülsensystem</a></li> <li><a href="#Beispiel" class="produkt1">HENCO-Kunststoffpress-System</a></li> <li><a href="#Beispiel" class="produkt1">HENCO-VISION-Stecksystem</a></li> <li><a href="#Beispiel" class="produkt1">POLYSAN-Press-System</a></li> <li><a href="#Beispiel" class="produkt1">POLYSAN-Pressfittings TH-Compact</a></li> </ul> <ul id="produktliste2"> <li><a href="#Beispiel" class="produkt2">EUROTUBI Edelstahl-Press-System WASSER</a></li> <li><a href="#Beispiel" class="produkt2">EUROTUBI Edelstahl-Press-System GAS</a></li> <li><a href="#Beispiel" class="produkt2">EUROTUBI-C-Stahl-Press-System Heizung</a></li> <li><a href="#Beispiel" class="produkt2">CONEX Push-Fit-Steckfitting</a></li> <li><a href="#Beispiel" class="produkt2">OYSTER-Fittings</a></li> <li><a href="#Beispiel" class="produkt2">AUSTROFLEX-Solarrohrsysteme</a></li> <li><a href="#Beispiel" class="produkt2">AUSTROFLEX-Fernwärmesysteme</a></li> <li><a href="#Beispiel" class="produkt2">EDELSTAHL-FBH-Verteiler & -stämme</a></li> <li><a href="#Beispiel" class="produkt2">ALUMINIUM-Sole-Verteiler</a></li> </ul> <ul id="produktliste3"> <li><a href="#Beispiel" class="produkt3">Wand- und Fußbodenheizung</a></li> <li><a href="#Beispiel" class="produkt3">Kugelhähne, Armaturen</a></li> <li><a href="#Beispiel" class="produkt3">Verschraubungen, Rotguss-Fittings</a></li> <li><a href="#Beispiel" class="produkt3">HT-Abfluss-System</a></li> <li><a href="#Beispiel" class="produkt3">VALSIR-TRIPLUS-Abfluss-System</a></li> <li><a href="#Beispiel" class="produkt3">SILERE Schallschutz-Abfluss-System</a></li> <li><a href="#Beispiel" class="produkt3">MONTAGEBOXEN</a></li> <li><a href="#Beispiel" class="produkt3">x</a></li> <li><a href="#Beispiel" class="produkt3">x</a></li> </ul> </li> <li id="service"><a href="#Beispiel" class="topmenue">Service</a> <ul> <li><a href="#Beispiel" class="serviceliste">Barcode</a></li> <li><a href="#Beispiel" class="serviceliste">HENCO-Montage-Videos</a></li> <li><a href="#Beispiel" class="serviceliste">Ausschreibungstexte</a></li> <li><a href="#Beispiel" class="serviceliste">Downloads</a></li> <li><a href="#Beispiel" class="serviceliste">Katalog-Bestellung</a></li> <li><a href="#Beispiel" class="serviceliste">Sitemap</a></li> </ul> </li> <li id="referenzen"><a href="#Beispiel" class="topmenue">Referenzen</a> <ul> <li><a href="#Beispiel" class="refnewsliste">Referenzen Übersicht</a></li> <li><a href="#Beispiel" class="refnewsliste">Referenzen Archiv / Suche</a></li> </ul> </li> <li id="aktuelles"><a href="#Beispiel" class="topmenue">Aktuelles</a> <ul> <li><a href="#Beispiel" class="refnewsliste">Aktuelles Übersicht</a></li> <li><a href="#Beispiel" class="refnewsliste">Aktuelles Archiv / Suche</a></li> </ul> </li> <li id="kontakt"><a href="#Beispiel" class="topmenue">Kontakt</a></li> </ul> </div> </body> |
Sponsored Links |
|
|||
Zitat:
Wenn ich vom Menüpunkt nicht schnell genug is Menü komme, klappt es zu bevor ich ankomme. Aber vielleicht liegt es daran, dass ich den Quelltext mühsam zusammenkopieren musste. Zitat:
Ach, du hast entweder keinen Doctype angegeben oder meinst IE7? Sag das doch gleich Nun, IE7 ist sehr empfindlich, wenn Positionierungsangaben fehlen. In deinem Fall fehlt für die ul-Elemente, die die Untermenüs darstellen, die Angabe left: 0; die hast du zwar für IE 5 und 6 drin, aber nicht für IE7. Mache die Angabe auch im IE7 verfügbar und pass auf, dass du die Angaben für #produktliste2 und -3 dadurch nicht überschrieben werden.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Also Doctype hab ich folgenden drinnen:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Code:
*+html ul#Navigation li ul { /* IE 7 */ left: 0; } Es funktioniert nämlich immer noch nicht. Irgendwas muss ich also falsch machen, nur hab ich gar keine Ahnung was. |
|
|||
Sehr gut.
Wo genau hast du es ergänzt? Jain. Mit dieser Angabe überschreibst du die Angaben für #produktliste2 und -3. Am einfachsten (wenn auch nicht am schönsten) löst du das Problem, indem du statt #produktliste 2 schreibst ul#Navigation li ul#produktliste2 bzw. -3 Das liegt an der Spezifität. |
|
|||
Zitat:
Und zwar, wenn ich mir NUR die Navigation aufrufe, dann wird es richtig dargestellt. Siehe: http://neu.polysan.at/navigation_ie.asp Funktioniert im FF sowie im IE tadellos. Nur wenn ich diese Navigation nun als Include einbinde, zerschießt mir Dreamweaver 1. die Entwurfsansicht und 2. machts der IE wieder falsch: POLYSAN Rohrsysteme für perfekte Installationen |
|
|||
Dein HTML-Code enthält neben 3 body-Elementen auch viele anderen Fehler:
[Invalid] Markup Validation of http://neu.polysan.at/startseite.asp - W3C Markup Validator Korrigiere diese! Die überzähligen body's kommen höchstwahrscheinlich durch dein "includen" zustande. Du darfst natürlich keine Datei includen die einen kompletten HTML-Körper enthält sondern wirklich nur den Quellcode der included werden soll. |
|
|||
So mal abgesehen davon dass ich grad versuch die Fehler zu korrigieren und mir der Dreamweaver jetzt die Entwurfsansicht richtig anzeigt ^^ - Danke dafür - zeigt mir der IE nun gar keine Submenüs mehr -_-
Man ich bin echt am verzweifeln. Das soll alles bis Freitag fertig werden.. |
|
|||
Windows 7 hat keinen IE7 sondern mindestens IE8, wenn Du alle Updates eingespielt hast sogar IE9. Bitte prüfe das genau. Denn IE8 wie auch IE9 haben einen Kompatibilitätsmodus der dich durchaus auch durcheinander bringen kann und unterschiedliche Sachen anzeigen, wenn eine Webseite nicht sauber geschrieben ist. Näheres:
http://www.sskm.de/sskmwww/sskmwww_p...aktivieren.pdf Verwenden der Kompatibilitätsansicht in Internet Explorer 9 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mehrspaltiges Layout - spezielles Problem | smarty19 | CSS | 2 | 14.04.2011 18:26 |
Mehrspaltiges Textlayout | praesi09 | CSS | 1 | 06.05.2010 11:20 |
Mehrspaltiges Formular ausrichten | Luka | CSS | 4 | 20.04.2008 12:24 |
Mehrspaltiges Layout | trinkjoghurt | CSS | 3 | 19.04.2006 10:53 |
Mehrspaltiges Layout, automatische Längenanpassung an Inhalt | DrSod | CSS | 6 | 30.01.2005 16:15 |