{NAV_HORIZ_DD:ID,Ebenentiefe} (NAVi HORIZontal Drop Down)

[Iller13]

Ja,
da hast du Recht.

Ich löse das ganze jetzt mit JS. Ist zwar umständlicher, aber muss mer durch!

Danke für alles!

[kukki]

@flip-flop: Das sollte auch kein Vorwurf werden, aber leider Gottes ist der IE6 noch sehr verbreitet. Und in Deutschland abnehmend in der Bedeutung, aber wir haben ja auch noch Nachbarländer. Und wenn ich sehe, wie Microsoft Win95 und 98 nach Indien verhökert, dann schwant mir nichts gutes!

Mit dem IE6 läuft es in einem DIV Layout ohne Probleme.

Das stimmt leider nicht ganz. Ich habe den IE6 als stand-alone Lösung ausf meinem PC und da tut sich nichts auf diesem Menü, beim IE7 dagegen alles o.k.

Aber schaut doch einfach mal auf die beiden Screencams:
IE6 (beachte das Zeichen in der Statusleiste links unten)
FF2 (ohne Kommentar, nicht getürkt !)

[flip-flop]

Das stimmt leider nicht ganz. Ich habe den IE6 als stand-alone Lösung ausf meinem PC und da tut sich nichts auf diesem Menü ....

Kann ich nicht nachvollziehen.
Die Seite und das Menü laufen bei mir unter NT4 IE5.5 / W2k IE6.0 SP1 / XP Pro IE6.0 SP2 / XP-Pro IE7 / und die ganze FF Reihe.
Ich wage jetzt einmal zu behaupten, dass entweder dein BS nicht ganz fit ist oder die Browserinstallation.
Klappt denn dieses hier bei dir? http://www.cssplay.co.uk/menus/simple_vertical.html

[kukki]

Und ich erst! Ich hoffe, Du akzeptierst mein Bedauern!:roll:

Ich habe den ganzen Tag heute, nachdem berechtigte Zweifel an der korrekten Installierung des IE6 als stand-alone Client aufkamen, einfach diesen entfernt, mit ebenso die Version 5.0x und 5.5x. Dann habe ich die Registry aufräumen lassen und danach gabs ein böses Spiel, so dass der Sonntag hin war und noch kein Ende abzusehen ist. Mit schwirrt es im Kopf und ich glaube, dass ich da einem kleinem Irrtum aufgesessen bin. Die neue Installierung dieser IEs zeigt jetzt ganz andere Vorschauen von vielen - nicht nur meinen- Webseiten, dass ich nicht weiß was ich zuerst machen soll. Einiges ließ sich ja schnell korrigieren und im IE7, Opera und Safari sieht alles ok. aus, ebenso auch im FF. Das tröstet mich. Natürlich funktionierte das von Dir erstellte Menü! Aber es gibt jetzt arge Probleme mit der von mir installierten Version 1.3.5 (JG30.de0 und meinem Testcenter). Zum Bsp. kann ich den doppelten Hintergrund beim IE 6 vergessen!
Ja, ich weiß, der IE 6 ist ein alter Hut und wir werden uns bestimmt im nächsten Jahr gänzlich davon verabschieden dürfen ....
Liege ich da nun richtig, dass die Beta-Version 1.3.5 dafür keine Untersützung mehr liefert. Ich hab nichts dagegen, ich will nur nicht soweit vorpreschen, wenn ich neue Webseiten erstelle. Bisher habe ich keine fremde Seite mit 1.3.5 erstellt.

[flip-flop]

Das hat mit der 1.3.5 rein gar nichts zu tun. Beispielsweise kann der DocType eingestellt werden wie bisher. Und der Rest ist doch reines HTML bzw. CSS.

Alle Seiten die ich seit dem Erscheinen der 1.3.5 gemacht habe arbeiten mit dieser Version. (Älter bekommen nach und nach ein Update).

Knut

[kukki]

Vielleicht dumm ausgedrückt, ich dachte dabei an die Unterstüzung des IE6 durch 1.3.5.
Meine CSSdatei ist nicht gerade einfach und wird von Seite zu Seite umfangreicher. Komischerweise funktionieren alle Seiten mit der Version 1.2.6 (2x), 1.2.8 (6x) und 1.3.0(2x) sowie 1.3.3(3x) einwandfrei - auch mit dem jetzt neu installierten IE6. In Version 7 und dem Rest hat's super hingehauen. Nur mein "zusammengestoppeltes "Testcentrum" und meine JG300.de, die durch ein Upgrade auf 1.3.5 gebracht wurde- da haut nichts mehr hin. Und genau die gleiche CSS hat eine weitere Seite (1.3.3) und die funzt super, ohne ein eingreifen. Ich verstehe es nicht. Aber wie ich schon weiter unte sage: Lieber ....

[flip-flop]

Was soll ein CMS denn hier speziell unterstützen?
Das einzige was bezüglich des IE Browsers eingestellt werden kann ist das hovern in speziellen Menüs (dann mit JS - weil ohne kann er nicht) und die .png Geschichte.
Das kann mit der CMS Version m.W. nichts zu tun haben. DocType richtg?

Hört sich fast so an, als ob deine Layout hart an der Grenze des Machbaren wandeln. Scheint keine Luft für leichte Schwankungen vorhanden zu sein.

[kukki]

Du hast Recht- ich wußte einfach nicht mehr wo ich den Fehler suchen sollte. Im Schlaf bin ich die ganze Sache noch einmal durchgegangen. Heute früh habe ich einen Taschenrechner zur Hand genommen und noch einmal gerechnet und gerechnet und gerechnet. Wegen 6 pixel in der Breite gab es die laufenden Probleme auf JG300.de. Und nur auf dieser Seite, weil ich halt einfach das Layout aus der 1.2.6. Version 1:1 kopiert habe. Und da hat sich das Box-Modell zurückgemeldet - nachdem ich nun die Installation des IE 5, 5.5 und 6 noch einmal gemacht habe. Mein Freund der PC ... kann ich nur sagen.
Ich weiß beim besten Willen nicht, wie die "komische Einstellung" der IEs zustande gekommen sind. Jetzt haut's genau hin, wie auch auf meinen anderen kommerziellen Seiten zu sehen war.

Und nun auch gleich noch eine wichtige Korrektur zum Thema Querscrollbalken

[fussle]

Ich habe das Problem, dass bei mir die fünfte Ebene unter der ersten dargestellt wird:

http://www.vitalzentrum-bad-schandau.de/index.php

Wie kann ich das beheben?

[pepe]

Einfach die Breite der Elemente kleiner machen !!!

(Gesamt-Breite in px / 5) - 2px = Einzelbreite ... so etwa???

[fussle]

Schmaler kann ich die Schaltflächen leider nicht machen, da ich es genau unter die Bilder setzen will.

[update]

Da gucken ja Punkte wie die von einer Liste Links aus den Menüs - genau das wird wohl verhindern, dass das letzte Naviteil nach oben flutscht. Vielleicht versuchst Du mal, die print.css nicht mitzuladen (die wird doch wohl automatisch beim Drucken geladen)
Just 2Cents

Edit:
So, damit sind die Punkte weg - Und dann noch

Code: Select all

#pmenu a, #pmenu a:visited {
   display: block;
   width: 178px;

zB...

[flip-flop]

Um das mal hier abzukürzen:

Code: Select all

#pmenu, #pmenu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}

#pmenu a, #pmenu a:visited {
   display: block;
   width: 179px;
   .....

#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
   border-width: 1px 0px 1px 1px;
}
#pmenu ul li a.horiz_enclose, #pmenu ul li a.horiz_enclose:visited {
   border-width: 1px;
}

Die Klasse horiz_enclose wird eigentlich für die Unterebenen verwendet um den Rahmen zu schließen, denn in der ersten Ebene darf der Rahmen nur im letzten Element geschlossen werden. Und das bedeutet 5x(179 + 1xborder)=900 + 1 =901
Deshalb springt die Navi um, da der letzte Rahmen geschlossen wird.
Diese Navi ist so hoch komprimiert, da bleibt kaum Spielraum für Extravaganzen. (Wenn der letzte Rahmen offen bleibt, passt es natürlich - wie oben gezeigt).
Dieses Verhalten zeigt sich bei jeder horizontalen CSS-Navigation die ohne bg-Grafiken arbeitet und den einseitigen border zur Abgrenzung verwendet.

@fussle: Kann man mit ein bisschen CSS-Verständnis auch drauf kommen. Einfach mal rechnen und in den erzeugten Quelltext schauen.
Eine andere Variante wäre das letzt Bild mit 181px einzusetzen und das Layout auf 901px zu strecken.

Knut

[fussle]

Also die Breite funktioniert. Vielen Dank.

Die Punkte bekomm ich nicht weg ;(

Code: Select all

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)htmlis
available at http://www.cssplay.co.uk/menus/simple_vertical.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.

08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
(http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743)
=================================================================== */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
/* margin hinzugefuegt - ausschließlich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */

#menu_container {
   margin: 0px 0 100px 1px; 
   position: relative;
   width: 901px;
   height: 40px;      /* ORG 20px */
   z-index: 1000;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}
/* Set up the link size, color and borders */
/* Einstellen der Groeszen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
   display: block;
   width: 179px;
   font-size: 11px;
   color: #fff;
   height: 21px;      /* ORG 25px */
   line-height: 20px; /* ORG 24px */
   text-decoration: none;
   text-indent: 5px;
   border: 1px solid #fff;
   border-width: 1px 0 1px 1px;
}
/* Set up the sub level borders */
/* Einstellen der Rahmen fuer die Unterebenen  */
#pmenu li ul li a, #pmenu li ul li a:visited {
   border-width: 0 1px 1px 1px;
}

#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
   border-width: 1px 0px 1px 1px;
}
/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
   float: left;
   background: #7484ad;
}
/* For Non-IE browsers and IE7 */
/* Fuer alle nicht IE + IE7 */
#pmenu li:hover {
   position: relative;
}
/* Make the hovered list color persist */
/* Festlegen der Farbe fuer hover li */
#pmenu li:hover > a {
   background: #D1D5DF; /* ORG #dfd7ca; */
   color: #BF4300;      /* ORG #c00; */
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif (leer.gif) is for IE to work */
/* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand"
   Das transparente gif (leer.gif) ist fuer den IE gedacht */
#pmenu li ul {
   display: none;
}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
/* Fuer alle nicht-IE + IE7 wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
#pmenu li:hover > ul {
   display: block;
   position: absolute;
   top: -7px;         /* ORG -11px */
   left: 80px;
   padding: 6px 30px 30px 30px; /* ORG padding: 10px */
   background:transparent url(../../img/article/leer.gif);
   width: 120px;
}
/* Position the first sub level beneath the top level links */
/* Positioniere die erste Unterebene nach dem Topebenenlink */
#pmenu > li:hover > ul {
   left: -30px;
   top: 16px;
}
/* get rid of the table */
/* Tabelle neu einstellen */
#pmenu table {
   position: absolute;
   border-collapse: collapse;
   top: 0;
   left: 0;
   z-index: 1000;
   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 */
/* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
* html #pmenu li a:hover {
   position: relative;
   background: #D1D5DF; /* ORG #dfd7ca; */
   color: #c00;
}
/* For accessibility of the top level menu when tabbing */
/* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblättert wird */
#pmenu li a:active, #pmenu li a:focus {
   background: #dfd7ca;
   color: #BF4300;      /* ORG #c00; */
}
/* Set up the pointers for the sub level indication */
/* Einstellen der Symbole/Pfeile für die Unterebenenanzeige */
#pmenu li.fly_ul {
   background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
/*   background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
*/
}

#pmenu li.drop_ul {
   background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
   /* background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
/* KH: Active Path output */
/* KH: Ausgabe des aktiven Pfads */
#pmenu li.act_path {
   background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
/*   background:#cccccc url(../../img/article/navi/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; */
/* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
/* Wechselt die Unterebenen von display:none; nach visibility:hidden; */

* html #pmenu li ul {
   visibility: hidden;
   display: block;
   position: absolute;
   top: -11px;
   left: 80px;
   padding: 10px 30px 30px 30px;
   background: transparent url(../../img/article/leer.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;       /*          (IE5 ONLY) */
   top: 10px;         /* ORG 14px (IE5 ONLY) */
   lef\t: -31px;      /*          (IE6 ONLY) */
   to\p: 11px;        /* ORG 15px (IE6 ONLY) */
}
/* 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;        /* ORG -11px (IE6 ONLY) */
   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;
}

#pmenu ul li a.horiz_enclose, #pmenu ul li a.horiz_enclose:visited {
   border-width: 1px;
}
/* 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 */

@flip-flop: Ich habe leider kein CSS-Verständnis. Sonst bräuchte ich ja nicht hier im Support-Forum fragen.

[update]

Vielleicht versuchst Du mal, die print.css nicht mitzuladen

Hast Du das wenigstens mal versucht?

EDIT:
Ich meine natürlich print_layout.css
Denn da steht:

Code: Select all

li { font-size: 11px; list-style: disc; }