Nav-Eintrag ohne Inhalt > Interne Weiterleitung

[mr.jones]

Hallo zusammen

Bei meinem aktuellen Projekt hat es in der Navigation Menüpunkte, die ohne Inhalt sind. Das heisst, der Besucher sollte direkt auf den ersten Menüpunkt der Unternavigation weitergeleitet werden. Das funktioniert mit der internen Weiterleitung soweit ganz gut, nur das CSS macht da nicht mit - der Unternavigationspunkt wird dann plötzlich als Hauptnavigationspunkt dargestellt. Meine Navigation ist vertikal, Level 1 mit Hintergrundbildern (hover, active, trail), Level 2 nur Text.

Wie löst ihr das Problem in solchen Fällen?

[Stephan]

Hallo mr.jones,

hast Du einen Link, um sich das mal genauer anzuschauen? Ansonsten kann ich nur raten, dass evtl. die CSS-Klassen zu ungenau benutzt worden sind. Hast Du das ganze auch mal mit Firebug analysiert?

Grüße
Stephan

[mr.jones]

Irgendwie wird Level 1 an Level 2 weitervererbt - aber nur bei einer Weiterleitung, sonst funktioniert es einwandfrei.

#nav{width:215px;position:relative;}
#nav .level_1{margin:0px;padding:0px;list-style: none;}
.mod_navigation .level_1 a{height:25px;display:block;padding:5px 0px 0px 10px;text-decoration:none;color:#FFF;background: url(tl_files/kunde/images/elements/nav-d.gif) no-repeat;font: normal 12px Arial, Helvetica, sans-serif;text-transform: uppercase;list-style: url(none);}
#nav .level_1 .active .active,#nav .level_1 .trail .trail{height:25px;display:block;padding:5px 0px 0px 10px;text-decoration:none;color:#000;background: url(tl_files/kunde/images/elements/nav-a.gif) no-repeat;font: normal 12px Arial, Helvetica, sans-serif;text-transform: uppercase;list-style: url(none);}
.mod_navigation .level_1 a:hover{display:block;padding:5px 0px 0px 10px;text-decoration:none;font: normal 12px Arial, Helvetica, sans-serif;text-transform: uppercase;list-style: url(none);background: url(tl_files/kunde/images/elements/nav-o.gif) no-repeat;}
.mod_navigation .level_2{margin:0px;padding:0px 0px 0px 10px;text-decoration:none;list-style: none;font: bold 11px Verdana, Arial, Helvetica, Geneva, sans-serif;text-transform: none;background: url(none);}
.mod_navigation .level_2 a{margin:0px;padding:0px;text-decoration:none;color:#E5007D;list-style: none;font: bold 11px Verdana, Arial, Helvetica, Geneva, sans-serif;text-transform: none;background: url(none);}
.mod_navigation .level_2 a:hover{padding:0px;text-decoration:none;color:#333;font: bold 11px Verdana, Arial, Helvetica, Geneva, sans-serif;text-transform: none;background: url(none);}
#nav .level_2 .active .active{display:block;margin:0px;padding:0px;text-decoration:none;color:#666;list-style: none;font: bold 11px Verdana, Arial, Helvetica, Geneva, sans-serif;text-transform: none;background: url(none);}
* html .mod_navigation ul,* html .mod_navigation li{height:1px;}

[Stephan]

Hallo mr.jones,

leider kann ich anhand des von Dir geposteten CSS Codes nicht erkennen, wo das Problem liegt, dazu bräuchte ich auch den entsprechenden HTML Code. Am liebsten wäre mir eine Live-Version irgendwo im Netz, um sich das genauer anschauen zu können.

Taucht das Problem denn in verschiedenen Browsern auf oder nur in einem bestimmten? Lokal auf Deinem Rechner oder auf einem Webserver im Internet?

Grüße
Stephan

[mr.jones]

Die Seite läuft erst lokal mit MAMP Pro... Kennst du gerade eine Site mit Typolight, bei der eine vertikale Navigation integriert ist, die Level 2 erst zeigt, wenn der entsprechende Level 1 angewählt wurde, und bei der Level 2 komplett anders als Level 1 aussieht?

Evtl. kann ich den Fehler so ausfindig machen.

[Stephan]

Hallo mr.jones,

schau Dir doch die Demo Website zu TYPOlight mal genauer an. Dort kannst Du auch an den Backend-Einstellungen herumschrauben und vieles ausprobieren.

Grüße
Stephan

[mr.jones]

Danke - auf dieser "Demo" hatte ich meine Site ursprünglich aufgebaut, was bis auf dieses Problem einwandfrei funktioniert hat.

Der grosse Unterschied von meiner Navigation zu der von "Music Academy" ist der, dass jeder Eintrag in Level 1 ein Hintergrundbild besitzt (25 Pixel hoch), Level 2 besitzt lediglich eine Zeilenhöhe (z.B. 13 Pixel). In meinem Fall werden die 25 Pixel des Level 1 an den Level 2 vererbt.

Siehst du anhand meines CSS, warum es das tut und wie ich das vermeiden könnte? Der Code basiert ja auf der unveränderten Basis der Navigation.

[Nils Riel]

Meinst du so etwas: http://bleibartig.org/grafische-gestaltung.html

[Stephan]

Hallo mr.jones,

ohne den zugehörigen HTML-Code ist es schwierig zu sagen, woran es liegt.
Ansonsten fällt mir nur ein, den Wert für level_2 einfach zu überschreiben:

.mod_navigation .level_2 a { height: 13px; }

Grüße
Stephan