zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Mehrspaltiges Submenü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.08.2012, 11:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2012
Beiträge: 7
Mahriel befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2012, 12:38
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Mahriel Beitrag anzeigen
Seit heute Früh kämpf ich schon um eine Lösung für mein Problem, bin aber noch nicht drauf gekommen.
Wir kämpfen schon seit Jahren dafür, dass die Leute die Hinweise für Fragende berücksichten. Es scheint aussichtslos

Zitat:
Zitat von Mahriel Beitrag anzeigen
So weit so gut. Das funktioniert auch ohne Probleme.
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:
Zitat von Mahriel Beitrag anzeigen
Im FF funktioniert alles einwandfrei, aber der IE legt die 3 <ul>, die im FF nebeneinander sind, übereinander.
Nein, der IE zeigt die Seite identisch zu Firefox an.

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.08.2012, 09:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2012
Beiträge: 7
Mahriel befindet sich auf einem aufstrebenden Ast
Standard

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">
Und dann hab ich noch folgendes ergänzt:
Code:
*+html ul#Navigation li ul { /* IE 7 */
  left: 0;
}
Müsst doch eigentlich passen, oder?
Es funktioniert nämlich immer noch nicht. Irgendwas muss ich also falsch machen, nur hab ich gar keine Ahnung was.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.08.2012, 18:10
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Mahriel Beitrag anzeigen
Also Doctype hab ich folgenden drinnen:
Sehr gut.

Zitat:
Zitat von Mahriel Beitrag anzeigen
Und dann hab ich noch folgendes ergänzt:
Wo genau hast du es ergänzt?

Zitat:
Zitat von Mahriel Beitrag anzeigen
Müsst doch eigentlich passen, oder?
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 28.08.2012, 10:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2012
Beiträge: 7
Mahriel befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
.. #produktliste 2 schreibst ul#Navigation li ul#produktliste2 bzw. -3
Hab ich geändert. Jetzt hab ich ein anderes interessantes Phänomen xD

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.08.2012, 12:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 28.08.2012, 13:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2012
Beiträge: 7
Mahriel befindet sich auf einem aufstrebenden Ast
Standard

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..
Mit Zitat antworten
  #8 (permalink)  
Alt 28.08.2012, 13:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Welche IE-Version betrifft das?
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2012, 14:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2012
Beiträge: 7
Mahriel befindet sich auf einem aufstrebenden Ast
Standard

Ich nehme stark an IE7, da er mitinstalliert wurde, als ich Windows 7 draufgespielt hab.

Andere kann ich leider auch nicht testen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.08.2012, 14:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:14 Uhr.