✔ Submenü - wie left und right flyout kombinieren ?

Status
Nicht offen für weitere Antworten.
W

W-Neuling

Grünschnabel
Hallo liebe User,

ich möchte mich als Neuer zunächst ganz kurz vorstellen:
Ich bin begeisterter Kampfkünstler und leite eine eigene Gruppe in Berlin.
Unsere Seite seit einem Jahr offline, weil ich bisher einfach keine vernünftige
Navigation hinbekommen habe und auch niemanden kenne, der ausgerechnet
in diesem Bereich der Computertechnik richtig fit ist und auch das Geld fehlt.
War nicht weiter schlimm, da ich nur aus Spaß an der Kunst unterrichte
und nur am Wochenende Zeit hatte. Nun wollen wir aber endlich wieder öfter
trainieren und die geschrumpfte Kleinstgruppe etwas nachwachsen lassen,.


Gut, hier nun meine Frage:
Ich habe dieses Menü besorgt da es bereits zentriert ist, was ich nie hinbekam
(p.s.: möchte bei Erfolg natürlich auch spenden, der Mann gibt sich echt Mühe):
Stu Nichols - The six level drop-down menu with overlap and overrun - centered

Nach einigem Ausprobieren an Werten usw. ist es im Grunde genau so,
wie ich es mir vorstelle (Abstände der Menüs sind gewollt), siehe das zip:
meine gezippte Seite, optimiert für Firefox 1.8, 1024X768 (oder höher)
Das Anpassen an eine relativ geringe Auflösung ergibt sich aus der Auflösung
unserer meisten Besucher, die noch so niedrig fahren (will Scrollen verhindern).

Stu Nichols verwendet bei einigen Menüs ein rechtes flyout bei den Submenüs
für den linken Bereich der Hauptleiste (also die Navigation, die man immer sieht)
und ein linkes flyout für den rechten Bereich (das wäre bei mir ab 4. Link, "Proll).

Leider kriege ich das nicht hin, selbst wenn ich den Befehl kopiere
und auch den 1. Link des Submenüs von "Proll" entsprechend kennzeichne.

Sehen kann man den Effekt hier am ganz linken bzw. rechten Submenü:
A cross-browser drop-down cascading validating menu

Verwenden tut er rechts bei den HTML-Links <ul class="left">
im CSS und direkt im Header (anderes Menü?), wo das "generelle css" steht
.menu ul li:hover ul li:hover ul.left {left:-105px;}
aber das mit dem vernünftigen einfügen und verknüpfen will bei mir nicht
(nun gut, probiere ja auch nur herum aufgrund meiner Unwissenheit).
Leider brauche ich aber auch sehr viele Links und momentan
wären die Submenüs im rechten bereich schlichtweg
außerhalb des Fensters und rechts Scrollen geht auch nicht,
da dann ja das Submenü wegen der fehlenden Maus verschwindet.

Zudem hatte ich grundsätzlich immer wieder Probleme damit,
CSS aus der HTML-Seite in die surrounding.css mit reinzupacken,
da wird dann meist das verschobene css einfach gar nicht erkannt.

Vielen Dank im voraus,
freue mich über jede Antwort.
Gruß, W-Neuling.
 
Zuletzt bearbeitet:
Hi und herzlich Willkommen im Forum :)

Wieso verwendest du nicht einfach die Variante http://www.cssplay.co.uk/menus/dd_valid.html und zentrierst das Menü mit margin:0 auto?

Code: 
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100; margin:0 auto;}
Im übrigen solltest du unbedingt in der CSS-Datei surrounding.css den enthaltenden HTML-Code entfernen!
 
Danke erst einmal.:)

Das Problem ist grundsätzlich, das ich viel herumprobiere,
ohne wirklich zu wissen was ich tue:
1. einzelnen Wert ändern und abspeichern
2. HTML-Seite neu laden und anschauen
3. so lassen oder Änderung zurücknehmen
:-)

Meine Seite hat noch andere CSS-Dinge und meistens zerhackte
ich mir dann früher oder später alles beim herumbasteln.
Mein Menü steht aber jetzt ja soweit (siehe verlinktes zip)
und mir fehlt nur noch das Verständnis darpber, wie ich diesen
flyout-Code vernünftig einbinden kann links und auch rechts.
Ich möchte betonen, dass ich auch nur notgedrungen die Seite
selbst erstellt habe - Code schreiben ist so gar nicht mein Ding.

Ach ja, die links bzw. das CSS scheinen teilweise anders auszusehen
bei den Menüs mit dem beiseitigen flyout, was die sache erschwert
obwohl Nichols im Grunde wohl immer nur ein Menü verändert
und variiert hat, soweit ich das verstanden hatte.

Gruß, W-Neuling
 
Zuletzt bearbeitet:
Also, basierend auf der Original-Vorlage des Menüs http://www.cssplay.co.uk/menus/simple_vertical_centered.html lauten die erforderlichen Regeln:

  • Moderne Browser:
Code: 
#pmenu li:hover ul li:hover ul.left,
#pmenu li:hover ul li:hover ul li:hover ul.left,
#pmenu li:hover ul li:hover ul li:hover ul li:hover ul.left  {left:-140px;}
  • IE6:
Code: 
#pmenu li a:hover ul li a:hover ul.left,
#pmenu li a:hover ul li a:hover ul li a:hover ul.left,
#pmenu li a:hover ul li a:hover ul li a:hover ul li a:hover ul.left {left:-140px;}
Beginnend mit der zweiten Submenü-Ebene wird dann in jedem ul-Element die Klasse left aufgerufen.

Den von mir gewählten Positionswert musst du natürlich noch deinen Bedürfnissen anpassen - je größer der negative Wert, desto weiter links wird das Submenü positioniert.

Achja, und entferne mal besser in deiner Seite den XML-Prolog vor der Doctype-Deklaration, da ansonsten der IE6 in den Quirksmodus schaltet, und das Menü dann in ihm nicht mehr einwandfrei funktioniert bzw. korrekt dargestellt wird.
 
Hallo nochmal.

Danke für Deinen Hinweis mit dem HTML-Code in der surrounding.css. Ich habe ihn entfernt,
(und unnötige css-Reste) und die Links funktionieren immer noch (sind nur noch Platzhalter).:)
Ach ja, der XML-Prolog ist jetzt natürlich auch weg, ich hatte ja gedacht,
beide Einträge seien wichtig für verschiedene Internet Protokolle(?).

Da ich mit Editoren gar nicht klarkam und möglichst wissen will, wo genau
ich gerade bastle, arbeite ich übrigens einfach mit dem Texteditor unter Win XP.
Ich habe den von Dir empfohlenen Code eingebaut ("gut" zu finden durch Absätze)
aber wenn ich dem ersten Untermenülink unter einem der 8 Links der Hauptleiste
statt <ul> nun ein <ul class="left"> voranstelle, geht dennoch alles rechts raus. :confused:

Die Idee hatte ich übrigens vom anderen Menü geborgt,
wo das wohl so gemacht wurde mit dem <ul class="left">.
Ich habe doch jetzt eine neue Klasse menu left bzw. ul.left
und die verbindung css-Code zum Link war gegeben, oder?

Bin jetzt wieder ca. 2 Stunden am Forschen und komme nicht weiter.
Nachfolgend die aktualisierte Datei (oberer css-Code), jedoch ohne
"gemarkertes" Untermenü weiter unten, ging ja nicht und ich wollte
die Seite weiter funktionsfähig und nicht unnötig groß erhalten.
meine gezippte Seite - die 2te

Nachfolgend aus dem anderen Menü auch nochmal ein Codeschnipsel:
Letzter Hauptlink, dann 5 Links 1. Untermenü, das <ul class="left">
und noch das folgerichtig links ausklappende 2. Untermenü:
<li><a class="hide" href="opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>
<li><a href="opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

<li><a href="opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

<!--[if lte IE 6]>
<a class="sub" href="menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
<table><tr><td>
<![endif]-->

<ul class="left">
<li><a href="menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
Zum Vergrößern anklicken....

Gruß, W-Neuling
 
Ehrlich gesagt kann ich jetzt nicht nachvollziehen, weshalb es bei dir angeblich nicht funktionieren soll, denn selbstverständlich habe ich mich heute Nachmittag gewissenhaft in deiner zur Verfügung gestellten HTML-Seite home-dt.html von der Funktionalität überzeugt, bevor ich hier den CSS-Code veröffentlicht habe, und konnte da überhaupt keine Probleme feststellen, sprich die Submenüs mit der Klasse left werden wie gewünscht nach links geöffnet.

Angewendet habe ich es exemplarisch im Hauptmenüpunkt "keiner" auf die Submenüs des Sublinks "Cameras", denn wie ich auch in meinem letzten Post darauf hingewiesen hatte, wird ab der zweiten Submenü-Ebene begonnen, die (vier) nachfolgenden Sublisten mit der Klasse left auszuzeichnen.

In der entsprechenden Passage des Menüs lautet der HTML-Code somit folgendermaßen:

Code: 
<div id="nav">
<ul id="pmenu">
    ...
    <li class="tc"><a href="#nogo" class="enclose">keiner<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="#nogo" class="enclose">Tripods</a></li>
            <li><a href="#nogo">Films</a></li>
            <li class="fly"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="left">
                    <li><a href="#nogo" class="enclose">Compact</a></li>
                    <li class="fly"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="left">
                            <li><a href="#nogo" class="enclose">Canon</a></li>
                            <li class="fly"><a href="#nogo">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="left">
                                    <li><a href="#nogo" class="enclose">Lenses</a></li>
                                    <li><a href="#nogo">Speedlight</a></li>
                                    <li class="fly"><a href="#nogo">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul class="left">
                                            <li><a href="#nogo" class="enclose">Coolpix S10</a></li>
                                            <li><a href="#nogo">Coolpix L2</a></li>
                                            <li><a href="#nogo">Coolpix S500</a></li>
                                            <li><a href="#nogo">Coolpix P5000</a></li>
                                            <li><a href="#nogo">Coolpix 4600</a></li>
                                            <li><a href="#nogo">Coolpix Silver</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </li>
                                    <li><a href="#nogo">D200</a></li>
                                    <li><a href="#nogo">D80</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#nogo">Minolta</a></li>
                            <li><a href="#nogo">Pentax</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#nogo">SLR</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#nogo">Flash</a></li>
            <li><a href="#nogo">Video</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>
</div>
Deine vollständige Seite lad ich hier "notgedrungen" als ZIP-Datei hoch, da der Seitenquelltext das Limit der zulässigen 30.000 (in Worten dreißigtausend) Zeichen in einem Beitrag um stolze 9.116 Zeichen überschreitet :eek:
 

Anhänge

Und als Zugabe darfst du hier die modifizierte funktionstüchtige Variante des Original-Menüs (im Menüpunkt "Contact us") testen, in der ich zunächst die erforderlichen CSS-Regeln hergeleitet und integriert hatte, bevor sie in deine Seite eingeflossen sind:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A simple 6 level drop-down menu with overlap and overrrun centered</title>

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical_centered.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#nav {position:relative; z-index:100; margin:50px 0 150px 0;}
#nav h2 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal; color:#090;}
#nav h3 {font-family: "trebuchet ms", arial, sans-serif; font-weight:normal;}


/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu {padding:0; margin:0 auto; list-style-type: none; display:table;}
#pmenu ul {padding:0; margin:0; list-style-type: none; display:block;}

/* Hide the sub levels */
#pmenu li ul {display:none;}

/* Set up the link size, color and borders */
#pmenu li a, #pmenu li a:visited {display:block;  width:120px; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px; text-align:left;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#7484ad;}
#pmenu li.tc {display:table-cell;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* ul.left */
#pmenu li:hover ul li:hover ul.left,
#pmenu li:hover ul li:hover ul li:hover ul.left,
#pmenu li:hover ul li:hover ul li:hover ul li:hover ul.left  {left:-140px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#7484ad url(http://www.cssplay.co.uk/menus/fly.gif) no-repeat right center;}
#pmenu li.drop {background:#7484ad url(http://www.cssplay.co.uk/menus/drop.gif) no-repeat right center;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}

/* ul.left */
#pmenu li a:hover ul li a:hover ul.left,
#pmenu li a:hover ul li a:hover ul li a:hover ul.left,
#pmenu li a:hover ul li a:hover ul li a:hover ul li a:hover ul.left {left:-140px;}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
</style>

<!--[if IE]>
<style type="text/css">
#nav ul {display:inline-block;}
#nav ul {display:inline;}
#nav ul li {float:left;}
#nav {text-align:center;}
</style>
<![endif]-->


</head>

<body id="www-cssplay-co-uk">


<div id="nav">
<ul id="pmenu">
<li class="tc"><a href="#nogo">Home</a></li>
<li class="tc drop"><a href="#nogo">Products<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
        <li><a href="#nogo" class="enclose">Tripods</a></li>
        <li><a href="#nogo">Films</a></li>
        <li class="fly"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                        <li><a href="#nogo" class="enclose">Compact</a></li>
                        <li class="fly"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                        <li><a href="#nogo" class="enclose">Canon</a></li>
                                        <li class="fly"><a href="#nogo">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
                                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                        <ul>
                                                        <li><a href="#nogo" class="enclose">Lenses</a></li>
                                                        <li><a href="#nogo">Speedlight</a></li>
                                                        <li class="fly"><a href="#nogo">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
                                                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                                        <ul>
                                                                        <li><a href="#nogo" class="enclose">Coolpix S10</a></li>
                                                                        <li><a href="#nogo">Coolpix L2</a></li>
                                                                        <li><a href="#nogo">Coolpix S500</a></li>
                                                                        <li><a href="#nogo">Coolpix P5000</a></li>
                                                                        <li><a href="#nogo">Coolpix 4600</a></li>
                                                                        <li><a href="#nogo">Coolpix S6 Silver</a></li>
                                                                        </ul>
                                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                                        </li>
                                                        <li><a href="#nogo">D200</a></li>
                                                        <li><a href="#nogo">D80</a></li>
                                                        </ul>
                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                        </li>
                                        <li><a href="#nogo">Minolta</a></li>
                                        <li><a href="#nogo">Pentax</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="#nogo">SLR</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
        <li><a href="#nogo">Flash</a></li>
        <li><a href="#nogo">Video</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
<li class="tc"><a href="#nogo">Privacy</a></li>
<li class="tc drop"><a href="#nogo">Contact us<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
        <li><a href="#nogo" class="enclose">Tripods</a></li>
        <li><a href="#nogo">Films</a></li>
        <li class="fly"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul class="left">
                        <li><a href="#nogo" class="enclose">Compact</a></li>
                        <li class="fly"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul class="left">
                                        <li><a href="#nogo" class="enclose">Canon</a></li>
                                        <li class="fly"><a href="#nogo">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
                                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                        <ul class="left">
                                                        <li><a href="#nogo" class="enclose">Lenses</a></li>
                                                        <li><a href="#nogo">Speedlight</a></li>
                                                        <li class="fly"><a href="#nogo">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
                                                                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                                                                        <ul class="left">
                                                                        <li><a href="#nogo" class="enclose">Coolpix S10</a></li>
                                                                        <li><a href="#nogo">Coolpix L2</a></li>
                                                                        <li><a href="#nogo">Coolpix S500</a></li>
                                                                        <li><a href="#nogo">Coolpix P5000</a></li>
                                                                        <li><a href="#nogo">Coolpix 4600</a></li>
                                                                        <li><a href="#nogo">Coolpix S6 Silver</a></li>
                                                                        </ul>
                                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                                        </li>
                                                        <li><a href="#nogo">D200</a></li>
                                                        <li><a href="#nogo">D80</a></li>
                                                        </ul>
                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                        </li>
                                        <li><a href="#nogo">Minolta</a></li>
                                        <li><a href="#nogo">Pentax</a></li>
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="#nogo">SLR</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
        <li><a href="#nogo">Flash</a></li>
        <li><a href="#nogo">Video</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
</ul>
</div>

</body>
</html>
 
Juhu, große Klasse, Danke Maik

Hatte in meiner Seite die beiden css-Codes getrennt eingebunden und nicht
wie von Dir gemacht genau hintereinander, vieleicht war das ja der Fehler.
Dieses Problem ist zumindest gelöst und ich habe richtig herumspielt
mit <ul> und <ul class="left"> macht sogar fast richtig Spaß.

Da die Seite an sich ja nun endlich funktioniert, 2 weniger wichtige Fragen,
ich würde mich natürlich trotzdem über Antworten sehr freuen.:

1. Ich kann ja bereits das 1. Untermenü verlagern, was super geht
habe aber wieder das Problem, dass ich dieses Kommando gerne
zweiteilen würde, damit links bezogen auf die Hauptleiste alles leicht
rechts bzw. nach unten versetzt erscheint und rechts entsprechend nach
links unten versetzt. Beides kriege ich gut hin aber eben immer nur eines.

Die bereits vorhandenen Untermenü-Kommandos gehen hier nicht,
da in der Hauptleiste neben dem überfahrenen Link ja immer ein
Nachbarlink sozusagen im Weg wäre (die Untermenüs ab 2. sind ja
nach oben versetzt vom verantwortlichen Link des Vormenüs gesehen).
Die vorhandene Code-Zeile (Werte sind unerheblich),
Restcode aus meinem 2. verlinkten zip ersichtlich:
/* Position the first sub level beneath the top level links */
#pmenu > li:hover > ul {left:-5px; top:14px;}
Zum Vergrößern anklicken....
2. Gibt es eine wichtige Regel für das Auslagern des css-Codes im HTML-Header?
Hinzufügen zur surrounding.css ging völlig in die Hose,
das Erstellen einer zusätzlichen zweiten css-Datei und Auislagern
(mit Link im Header wie bei der anderen css-Datei) ging auch nicht.
Was kann man beim Auslagern übersehen? Unterbindet die erste css
das Lesen einer weiteren css-Datei, wenn man nichts weiter macht?

Gruß, W-Neuling
 
Deiner ersten Frage kann ich jetzt trotz mehrmaligen Lesens überhaupt nicht folgen, denn die Submenüs werden doch "treppenartig" nach rechts unten (defaultmäßig) und mit Hilfe der CSS-Klasse left nach links unten aufgeklappt :confused:

Zum Stylesheet: vermutlich ist dir bei der Einbindung der CSS-Dateien irgendwo ein (syntaktischer) Fehler unterlaufen, denn sowohl der Aufruf zweier CSS-Dateien (surrounding.css und navigation.css), wie auch das Einfügen des Menü-Stylesheets in die CSS-Datei surrounding.css funktioniert bei mir tadellos.

Wichtig hierbei ist, dass du den "Conditional Comment" mit dem eingebundenen Stylesheet für den IE

Code: 
<!--[if IE]>
<style type="text/css">
#nav ul {display:inline-block;}
#nav ul {display:inline;}
#nav ul li {float:left;}
#nav {text-align:center;}
</style>
<![endif]-->
nicht in einer der beiden CSS-Dateien unterbringst, sondern das Stylesheet (ohne <style>-Tag!) in einer dritten CSS-Datei notierst, und diese dann im "Conditional Comment" aufrufst:

Code: 
<!--[if IE]>
<link rel="stylesheet" href="ie_fix.css" type="text/css">
<![endif]-->
Ebenso darf hier nicht die Reihenfolge der beiden Stylesheets vertauscht werden:

Code: 
<link rel="stylesheet" href="navigation.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie_fix.css" type="text/css">
<![endif]-->
denn das IE-spezifische Stylesheet wird immer zuletzt aufgerufen.
 
Danke wieder einmal,

ich werde das mit der dritten Datei für IE neben den beiden ccs-Dateien mal ausprobieren.
War gewiss die von Dir erwähnte Sache, hatte den Code für IE ja gar nicht abgespalten.

Zu meiner ersten Frage:
Es geht nur um das allererste aufklappende Untermenü, also
1. Nur die Hauptleiste (Hauptmenü, 8 Links) ist sichtbar.
2. Ich fahre über einen dieser immer sichtbaren 8 Links.
3. Dabei erscheint das 1. Untermenü.
4. Die folgenden Menüs (2., 3., 4., 5. Untermenü) erscheinen bereits wie gewollt.

Das Problem ist, dass CSS-Klasse left ja mittlerweile bereits einen gewollten festen Wert hat,
den ich erst für die Menüs ab dem 2. Untermenü angewendet habe - soll so bleiben.
Für das 1. Untermenü bräuchte ich nun aber andere Werte zum einsetzen
und wieder das 4x "normal" Ausklappen und 4x nach links Aufklappen.
Schon wegen der immer vorhandenen Hauptleiste brauche ich
andere Werte als bei den noch nachfolgenden Menüs.
Ich bräuchte also eine 2. <ul> & <ul class="left">.

Gruß, W-Neuling
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück