Navigations Ebenen stimmen nicht

**Planz** · 26.02.2012, 17:05

Hallo zusammen,

Ich habe die ganz normale Standard Music Acedemy Seitenstruktur (Seitenstruktur.JPG). Dann habe ich das Modul "Navigationsmenü" erstellt.

Formatiert ist es wie folgt (nocht nicht fertig):

Code:

.mod_navigation
{
    width:192px;
    top:40px;
    position:absolute;
    float:left;
    list-style-type:none;
}

.mod_navigation .first
{
    width:192px;
    height:19px;
    padding-top:5px;
    padding-left:10px;
    background-color:#aaa;
    border-left:1px solid #CE2E12;
}

.mod_navigation ul
{
    list-style-type:none;
}

So sieht es aus:
Navigations.JPG

Wieso nimmt es "News" als zweiten Hauptpunkt? Eigentlich wären ja Home, The Academy, Courses und Services die Hauptpunkte. Was ist da falsch?

Das Modul ist so eingestellt: Modul.JPG

Wieso die unter Hauptpunkte verkleinert werden ist mir auch fremd! Ich sage ihm doch, dass er das .submenu nach links rücken soll.

Besten Dank für eure Ratschläge!

Gruss Planz

**MacKP** · 26.02.2012, 17:38

Hallo Planz,
mit .first sprichst du nicht die Punkte in der ersten Ebene an. Mit first sind alle Navipunkte versehen, die an erster Stelle stehen auf einer Ebene.
Du wirst da eher was mit level_1 machen müssen ;-)

Schau dir einfach den Quellcode an, der da raus kommt. Dann fällt es einfacher als beim Raten die Elemente mit CSS zu versehen ;-)

Viele Grüße

**Planz** · 27.02.2012, 08:33

Hallo MacKP

Danke für deine Hilfe!

Okay, ich habe nun das CSS angepasst auf die Levels.

Code:

.mod_navigation
{
    width:192px;
    height:250px;
    top:40px;
    position:absolute;
    overflow:hidden;
    float:left;
    font-family:Verdana,Geneva,sans-serif;
    color:#000;
    list-style-type:none;
}

.mod_navigation a
{
    display:block;
    color:#597f91;
}

.mod_navigation a:hover
{
    color:#CE1216;
}

.mod_navigation .level_1
{
    height:20px;
    margin:7px 0 0;
    padding-top:4px;
    background-color:#D8D8D8;
}

.mod_navigation .level_1 a
{
    margin:0 0 0 15px;
    padding:0 0 0 6px;
    border-left:1px solid #CE1216;
    font-size:11px;
    font-weight:bold;
}

.mod_navigation .level_2
{
    margin:17px 0 3px 23px;
    font-weight:bold;
    color:#ce1216;
    list-style-type:none;
}

.mod_navigation .level_3
{
    margin:0 0 3px 23px;
    padding:0 0 2px;
    border-bottom:1px solid #000;
}

Jetzt sieht es so aus:
Navigation aktuell.JPG

So muss es mal aussehen:

Navigation Soll.JPG

Wieso funktioniert das nicht zb. mit dem level_3?

Danke für eure Hilfe!

Gruss Planz

**MacKP** · 27.02.2012, 13:35

Weil du nicht die li oder a ansprichst, sondern nur das drum herum...
Deswegen will das nicht so wie du dir das denkst.

Ich empfehle dir diese Seite -> http://little-boxes.de/
Du wirst glücklicher, wenn du dich erst ein wenig mit CSS beschäftigst und dann die Navi angehst ;-)

Viele Grüße

**Planz** · 28.02.2012, 16:52

Hallo MacKP

Okay, klar. Jetzt ist der fünfer gefallen.
Ja, die Seite kenne ich. Habe mir das Buch auch schon gekauft und einige Themen gelesen.

Ich habe mir das Thema Vertikale Navigation nochmals genauer angesehen. Und auch die Beispiel Dateien genommen und abgeändert. Nun komme ich zwar schon näher ran. Aber jetzt haperts noch beim Level 2.

Code:

#navibereich .level_1 a
{
    margin-left:10px;
    padding-left:5px;
    border-left:1px solid #CE1216;
    font-weight:bold;
}

#navibereich .level_2 a
{
    margin-left:10px;
    padding-left:5px;
    border-left:1px solid #fff;
    font-weight:bold;
    color:#ce1216;
}

#navibereich .level_1 li
{
    padding-top:4px;
    padding-bottom:4px;
    background-color:#D8D8D8;
}

#navibereich .level_2 li
{
    padding-top:4px;
    padding-bottom:4px;
    background-color:#fff;
}

#navibereich .level_1 .active a
{
    margin-left:10px;
    padding-left:5px;
    border-left:1px solid #CE1216;
    font-weight:bold;
}

#navibereich .level_2 .active a
{
    margin-left:10px;
    padding-left:5px;
    font-weight:bold;
    color:#ce1216;
}

#navibereich .level_1 .active
{
    background-color:#F5D0C1;
}

#navibereich .level_2 .active
{
    background-color:#fff;
}

#navibereich
{
    width:192px;
    float:left;
    font:12px Arial,Helvetica,sans-serif;
    color: black;
    margin: 20px 0 20px 0px;
}

/* Liste und Links */
#navibereich ul
{
    margin:0;
    padding:0;
    border-right: none;
    border-left: none;
}

#navibereich li
{
    list-style: none;
    margin: 1em 0;
}

#navibereich .level_2 li
{
    padding-left:1em;
}

Hauptnavigation Unbenannt.JPG

Unternavigation Unbenannt2.JPG

Kann man irgend wie sagen, dass er Einstellungen nicht nach unter vererbt? z.b der

Code:

border-left:1px solid #CE1216;

wird immer mitgegeben, obwohl ich ihn ja für Level 1 definiert habe. Ich habe es jetzt versucht den Strich unter Level 2 weiss zu machen, damit er wenigstens nicht sichtbar ist. Nicht die schönste Variante ich weiss.

Die Navigation sollte eigentlich so aussehen
soll.JPG

Ich habe auch noch die CSS Datei der "alten Webseite" (Design bleibt gleich, muss aber neu mit Contao erstellt sein). Nur ist dieser Inhalt nicht "Contao-CSS-TYP" (?)

. [Datei im Anhang]

Besten Dank für eure Hilfe!

Gruss Planz

**Planz** · 02.03.2012, 08:05

Hallo zusammen,

Hat niemand eine idee, wo der Fehler noch liegen könnte?

Die Css Datei (im .txt format) ist von der Aktuellen. Das Design bleibt gleich. Jetzt muss es einfach ins Contao.

Komme nicht mehr weiter bei den Sublevels.

Irgendwie werden immer noch Einstellungen nach unter vererbt. Ich weis nicht wieso.

Hoffe ihr könnt mir helfen!

Besten Dank & Gruss Planz

**ShenLung** · 02.03.2012, 08:19

Zitat von Planz

Kann man irgend wie sagen, dass er Einstellungen nicht nach unter vererbt? z.b der

Code:

border-left:1px solid #CE1216;

wird immer mitgegeben, obwohl ich ihn ja für Level 1 definiert habe. Ich habe es jetzt versucht den Strich unter Level 2 weiss zu machen, damit er wenigstens nicht sichtbar ist. Nicht die schönste Variante ich weiss.

Nein, die Vererbung kannst du nicht verhindern. Du kannst aber die Eigenschaften für die tieferen Ebenen neu definieren, z.B. mit border: none...

Im Prinzip müsst du dich von Ebene zu Ebene 'hangeln'. Erst die obere Ebene mit entsprechendem CSS stylen, dann die nächst tiefere Ebene. Was aus den oberen Ebenen nicht übernommen werden soll musst du halt in der tieferen Ebene mit dem gewünschten Wert angeben.

**Planz** · 27.03.2012, 20:07

Hallo zusammen,

Zitat von ShenLung

Im Prinzip müsst du dich von Ebene zu Ebene 'hangeln'. Erst die obere Ebene mit entsprechendem CSS stylen, dann die nächst tiefere Ebene. Was aus den oberen Ebenen nicht übernommen werden soll musst du halt in der tieferen Ebene mit dem gewünschten Wert angeben.

So habe ich es nun gemacht. Und habe das Layout jetzt dann nach gut einem Monat doch noch hinbekommen. Dennoch tritt noch ein kleiner "Fehler" auf. Bei dem ich nicht mehr weiter komme. Egal was ich verstelle, es verändert nichts.

Das Problem, ist in diesem Video kurz aufgezeigt:

Irgendwie verschiebt es sich immer etwas, wenn man den .active anklickt. Aber auch wenn ich im .active jetzt ein margin: -5px; definiere passiert nichts.

Das Navigations CSS ist wie folgt:

Code:

.navibereich
{
    top:15px;
    position:relative;
    overflow:hidden;
    float:left;
    margin-bottom:20px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    line-height:1.4;
    width: 179px !important;
}

.navibereich
{
    min-height:400px;
    background-color:#fff;
}

.navibereich a
{
    display:block;
    color:#145499;
}

.navibereich a:hover
{
    color:#ce1216;
}

.navibereich .level_1 li
{
    background-image:url("tl_files/medica/Design/layer_1.png");
    background-repeat:no-repeat;
    margin: 4px 0px 10px 0px;
    padding: 2px 0px 2px 25px;
}

.navibereich .level_1 li.active
{
    background-image:url("tl_files/medica/Design/layer_1_active.png");
    background-repeat:no-repeat;
    margin: 4px 0px 10px 0px;
    padding: 2px 0px 0px 25px;
}

.navibereich .level_1 a
{
    font-size:11px;
    font-weight:bold;
}

.navibereich .level_1 span
{
    font-size:11px;
    font-weight:bold;
    color:#145499;
}

.navibereich .level_2 a
{
    font-weight:bold;
    color:#ce1216;
    margin: 0px 0px -5px -23px;
    border: none;
}

.navibereich .level_2 .active
{
    font-weight:bold;
    color:#ce1216;
    margin: 0px 0px -5px -22px;
    border: none;
    background: none;
}

.navibereich .level_2 li
{
    background: none;
}

.navibereich .level_2 li.active
{
    background: none;
}

.navibereich .level_3 a
{
    margin-left:-40px;
}

.navibereich .level_3 .active
{
    margin-left:-40px;
}

.navibereich .level_4 a
{
    margin-top:-10px;
    margin-left:-57px;
    padding-bottom:-5px;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#145499;
}

.navibereich .level_4 .active
{
    height:17px;
    margin-left:-57px;
    padding-bottom:2px;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#145499;
}

.navibereich .level_4 .span
{
    border-left:1px solid #000;
    color:#ce1216;
}

.navibereich ul li
{
    font-size:11px;
    line-height:2;
    list-style-type:none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 7px;
}

.navibereich2 .level_2 a
{
    font-weight:bold;
    color:#ce1216;
    margin: 0px 0px -5px -23px;
    border: none;
}

.navibereich2 .level_2 .active
{
    font-weight:bold;
    color:#ce1216;
    margin: 0px 0px 0px -22px;
    border: none;
    background: none;
}

.navibereich2 .level_2 li
{
    background: none;
}

.navibereich2 .level_2 li.active
{
    background: none;
}

.navibereich2 .level_3 a
{
    margin-top:-10px;
    margin-left:-47px;
    padding-bottom:-5px;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#145499;
}

.navibereich2 .level_3 .active
{
    height:17px;
    margin-left:-47px;
    padding-bottom:2px;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#145499;
}

.navibereich2 .level_3 .span
{
    border-left:1px solid #000;
    color:#ce1216;
}

Die Klasse .navigation2 ist für den Menü Punkt "Institut Pathologie", da hat jede seite seine eigene CSS Klasse zugewiesen bekommen.

Wieso verschiebt sich da was?

Besten Dank für eure Hilfe!

Gruss Planz

**Andreas** · 28.03.2012, 15:25

Du hast das viel zu kompliziert. Eigentlich ist das hier alles, was du brauchst:

Code:

/* ... Navigation ...
-------------------------------------------------------------------------------------------------*/
ul,
li {
  list-style: none;
  margin: 0;
}
a,
span {
  display: block;
  padding: .3em .5em;
}
a:focus,
a:hover,
a:active,
span,
a.trail  {
  background: #fff;
}
.level_2 a,
.level_2 span {
  padding-left: 2em;
}
.level_3 a,
.level_3 span {
  padding-left: 3em;
}
/* ... Navigation ... END
-------------------------------------------------------------------------------------------------*/

Deine gewünschten Formatierungen setzt du jetzt auf die As und SPANs, nicht auf die LIs. Musst natürlich noch deinen Selektor davor setzen, z.B. #mainnav. Der Selektor .active ist überflüssig, da alle aktiven Punkte in SPANs sind. As und SPANs erstmal gleich behandeln, dann die Unterschiede zwischen As und SPANS herausarbeiten, dann die Unterschiede zwischen den Levels herausarbeiten. Bedenke auch, dass eine Formatierung auf ein LI einen evtl. darunter liegenden Sublevel mit formatiert, da dieses LI dann ja der Container für dieses Sublevel ist. Auch aus diesem Grund wenn es geht keine Formatierung auf die ULs oder LIs legen.

Gruß Andreas

**Planz** · 29.03.2012, 21:04

Hallo Andreas,

Danke für deine Antwort. Deine "Zusammenfassung" des Codes war mir eine grosse Hilfe! Ich denke ich hatte so viele verschiedene Anweisungen gemacht, dass die sich alle miteinander gebissen haben.

Deine gewünschten Formatierungen setzt du jetzt auf die As und SPANs, nicht auf die LIs. Musst natürlich noch deinen Selektor davor setzen, z.B. #mainnav. Der Selektor .active ist überflüssig, da alle aktiven Punkte in SPANs sind. As und SPANs erstmal gleich behandeln, dann die Unterschiede zwischen As und SPANS herausarbeiten, dann die Unterschiede zwischen den Levels herausarbeiten. Bedenke auch, dass eine Formatierung auf ein LI einen evtl. darunter liegenden Sublevel mit formatiert, da dieses LI dann ja der Container für dieses Sublevel ist. Auch aus diesem Grund wenn es geht keine Formatierung auf die ULs oder LIs legen.

Ich hab jetzt also diese formatierungen noch mitgegeben.

Jetzt sieht der Code so aus:

Code:

/* ... Navigation ... Allgemein START
------------------------------------------------------------------------------------------------- */
ul,
li
{
    margin:0;
    list-style: none;
}

.navibereich
{
    width:179px;
}

.navibereich a:hover
{
    color:#ce1216;
}

a,
span
{
    display:block;
    padding: .3em .5em;
}

a:focus,
a:hover,
a:active,
span,
a.trail
{
}

.level_2 a,
.level_2 span
{
    padding-left:2em;
}

/* ... Navigation ... Normal START
------------------------------------------------------------------------------------------------- */
.navibereich .level_1 li
{
    margin-bottom:10px;
    background-image:url("tl_files/medica/Design/layer_1.png");
    background-repeat:no-repeat;
}

.navibereich .level_1 a
{
    height:17px;
    padding-top:5px;
    padding-left:25px;
    font-weight:bold;
}

.navibereich .level_1 span
{
    height:17px;
    padding-top:5px;
    padding-left:25px;
    background-image:url("tl_files/medica/Design/layer_1_active.png");
    font-weight:bold;
    color:#597f91;
}

.navibereich .level_2 span
{
    font-weight:bold;
    color:#CE1216;
    background: none;
}

.navibereich .level_2 li
{
    background: none;
}

.navibereich .level_3 li
{
    padding-left:10px;
}

.navibereich .level_4 li
{
    top:-5px;
    position:relative;
}

.navibereich .level_4 a
{
    left:1.5em;
    position:relative;
    margin-top:-7px;
    padding:.0em;
    border-bottom:1px solid #000;
    font-size:11px;
    font-weight:normal;
    color:#597f91;
}

.navibereich .level_4 span
{
    left:1.5em;
    position:relative;
    margin-top:-7px;
    padding:.0em;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#CE1216;
}

/* ... Navigation ... Pathologie Start
------------------------------------------------------------------------------------------------- */
.navibereich2 .level_1 li
{
    margin-bottom:10px;
    background-image:url("tl_files/medica/Design/layer_1.png");
    background-repeat:no-repeat;
}

.navibereich2 .level_1 span
{
    height:17px;
    padding-top:5px;
    padding-left:25px;
    background-image:url("tl_files/medica/Design/layer_1_active.png");
    font-weight:bold;
    color:#597f91;
}

.navibereich2 .level_1 a
{
    height:17px;
    padding-top:5px;
    padding-left:25px;
    font-weight:bold;
}

.navibereich2 .level_2 span
{
    font-weight:bold;
    color:#CE1216;
    background: none;
}

.navibereich2 .level_2 li
{
    background: none;
}

.navibereich2 .level_3 li
{
    top:-5px;
    position:relative;
}

.navibereich2 .level_3 a
{
    left:1.5em;
    position:relative;
    margin-top:-7px;
    padding:.0em;
    border-bottom:1px solid #000;
    font-size:11px;
    font-weight:normal;
    color:#597f91;
}

.navibereich2 .level_3 span
{
    left:1.5em;
    position:relative;
    margin-top:-7px;
    padding:.0em;
    border-bottom:1px solid #000;
    font-weight:normal;
    color:#CE1216;
}

/* ... Navigation ... Pathologie END
------------------------------------------------------------------------------------------------- */

Da ich ja, im Pathologie Reiter, eine eigene CSS-Klasse in der Seitenstruktur mitgegeben habe (die .navibereich2), musste ich die noch ein zweites mal definieren einfach nur mit 3 Ebenen.
In der Seitenstruktur ist es mit den jeweiligen ebenen eigestellt z.b. [navibereich level_2]

Leider wird mit dies jetzt ganz ignoriert. Und es verschiebt mir auch ein Teil der oberen Navigationen, die aber von Typ "Induviduelle Navigation" ist. Wieso passiert das? Hat das etwas mit dieser Zusammenfassung zu tun? Kann ich dass zum beispiel auf #left beschränken?

So sieht sie jetzt aus (sorry, man kommt momentan noch nicht per Web drauf...)

Danke für jegliche Hilfe!

Gruss Pascal

**Andreas** · 30.03.2012, 16:28

Sieht mir immer noch zu unaufgeräumt aus. Probier mal das:

Code:

/* ... Navigation ...
-------------------------------------------------------------------------------------------------*/
/** alle Navigationen */
.mod_navigation ul,
.mod_navigation li {
  list-style: none;
  margin: 0;
  line-height: 1;
}
.mod_navigation a,
.mod_navigation span {
  display: block;
  text-decoration: none;
}

/** Hauptnavigation horizontal */
#mainnav li {
  float: left;
}
#mainnav a,
#mainnav span {
  color: #597f91;
  background-color: #D7D7D7;
  padding: .3em 25px;
}
#mainnav a:focus,
#mainnav a:hover,
#mainnav a:active,
#mainnav span,
#mainnav .trail
{
  color: #ce1216;
  background-color: #C9C9C9;
}

/** Subnavigation links vertikal (erstmal Level 1 bzw. gültig für alle Level) */
#subnav a,
#subnav span {
  color: #597f91;
  background-color: #C9C9C9;
  font-weight: bold;
  padding: .3em .5em .3em 25px;
  margin-bottom: 10px;
}
#subnav a:focus,
#subnav a:hover,
#subnav a:active,
#subnav span
{
  color: #ce1216;
  background-color: #E0C2B1;
}

/** Änderungen im Level 2 (gilt erstmal auch für 3 und 4) */
#subnav .level_2 a,
#subnav .level_2 span {
  padding-left: 35px;
  background-color: #fff;
  text-transform: uppercase;
}

/** Änderungen im Level 3 (gilt erstmal auch für 4) */
#subnav .level_3 a,
#subnav .level_3 span {
  padding-left: 45px;
  text-transform: none;
}

/** Änderungen im Level 4 */
#subnav .level_4 a,
#subnav .level_4 span {
  padding-left: 0;
  margin-left: 50px;
  border-bottom: 1px solid #000;
  font-size: 90%;
  font-weight: normal;
}
/* ... Navigation ... END
-------------------------------------------------------------------------------------------------*/

Breite der Navi ist nicht nötig, #left .inside hat ein padding und die Breite ergibt sich aus dem zur Verfügung stehenden Raum.

mit .mod_navigation sprichst du alle Navigationen an. Dann kannst du den einzelnen Navigationen noch IDs mitgeben z.B. #mainnav und #subnav. Du kannst die linke Navigation natürlich auch z.B. mit #left .mod_navigation ansprechen.

Kontrolliere auch dein line-height der LIs, default ist '1'. Du solltest auf jeden Fall im Frontend mit Firebug alles testen.

Gruß Andreas

ps Schade, dass es hier keine CSS-Syntax gibt

**Planz** · 31.03.2012, 23:13

Hallo Andreas

Okay, nun hat es geklappt. Danke für deine aufräum Arbeit in meinem CSS Urwald

Leider gibt es jetzt noch andere Hürden zu überbrücken... Wie z.b wenn ein Navigationspunkt extrem Lange ist vom Text her. Leider verschiebt es sich da nicht dynamisch nach der benötigten grösse des Textes.

Siehe Bild: Lange schrift.jpg

Wie kann man das mitgeben, dass er sich da dynamisch anpasst? Gibt es die Möglichkeit überhaupt?

Jetzt habe ich ja immer in der Navigation ausdrücklich gesagt, dass er die list-style's ausblenden soll. Das macht er auch schön brav. Leider in der #main Spalte auch. Auch wenn ich jetzt dort sage {list-style: dice;} zeigt er mir nichts an. Wie kann ich den jetzt wieder übersteuern?

aufzählungszeichen.jpg

Gruss PLanz

**Andreas** · 01.04.2012, 17:12

Beide Probleme kannst du eingentlich nur dadurch haben, dass du nicht mein CSS genommen hast.

In deinem alten CSS stand mal irgenwas von height:17px für die Listenpunkte, damit hat er dann keine Möglichkeit sich auszudehnen. In meinem ist keine Höhenangabe drin.

.mod_navigaton li setzt nur die Listenpunkte in den Navigationen und geht somit an die anderen LIs nicht dran.

Mit Firebug ansehen.

**Planz** · 05.04.2012, 16:45

Hallo Andreas, Danke für deine Antwort!

.mod_navigaton li setzt nur die Listenpunkte in den Navigationen und geht somit an die anderen LIs nicht dran.

Okay, ist das auch so, wenn ich sie umbenannt habe (.navibereich)? Irgend wie liegt mir der name .mod_navigation nicht....

Wenn ich jetzt sagen würde:

Code:

#main ul li
list-style: dice;

Dann müssten doch alle Listenpunkte in #main den list-style: dice haben, oder? Das sollte es doch dann sowieso überschreiben...

Leider futzt das irgendwie nicht...

Gibt es eigentlich die Möglichkeit, zb. .level_5 jetzt in der #main anzuzeigen anstatt in der #left, wie alle anderen?

Danke für eure Hilfe!

Schöne Ostern & Gruss Planz

**Andreas** · 05.04.2012, 18:19

Die class .mod_navigation ist sowieso im Quelltext vorhanden, da sie automatisch von Contao generiert wird. Mach es einfach so, wie ich es dir gezeigt habe, vergebe den einzelnen Navigationen eine eindeutige ID z.B. mainnav.

Warum dein Überschreiben dort nicht funktioniert, kann ich jetzt so nicht sagen. Habe die CSS-Kaskade nicht auswendig im Kopf. Dazu müsste man die Seite sehen. Wenn du es so machst, wie ich dir gezeigt habe, dann greift das Menü-CSS nicht auf anderen Listen.

Wenn du level_5 in main haben möchtes, machst du ein drittes Menü, welches erst ab Level 5 startet und bindest es in #main ein. Hast du dann Probleme level_5 aus dem submenu zu entfernen, kannst du level_5 dort auch mit CSS ausblenden.

ps list-style: dice; gibt es nicht, meinst du disc?

**Planz** · 06.04.2012, 18:57

Hallo Andreas

Okay, nun funktioniert es mit den listenpunkten im Main. Sie wurden vorher schon angezeigt, aber irgendwie überblendet. Habs jetzt hinbekommen.

Hast du dann Probleme level_5 aus dem submenu zu entfernen, kannst du level_5 dort auch mit CSS ausblenden.

Ich habe es jetzt mal so gelöst, dass es einfach im Nirwana verschwindet. Ist wohl nicht die schönste Variante.

Das zweite Navigations Modul habe ich erstellt und im Seitenlayout eingefügt. Da ich es ja jetzt im Seitenlayout entweder ober dem Artikel oder unterhalb des Artikels der Hauptspalte einfügen muss, kommt die Navigation nicht dort hin wo ich sie haben möchte. Nämlich unterhalb des Seitentitels.

Unbenannt.JPG

Wie wäre es möglich, dass der Seitentitel immer oberhalb der Navigation angezeigt wird?

ps list-style: dice; gibt es nicht, meinst du disc?

Ja, ich meinte disc. Sorry.

Gruss PLanz

**Planz** · 11.04.2012, 17:03

Hat niemand eine Idee, wie man den Titel, immer über die Navigation aber den Text unter die navi bekommt?

Bin über jede Hilfe sehr froh!

Danke & Gruss Planz

**Andreas** · 11.04.2012, 18:19

Mit CSS und negativen Margins oder absoluten Positionierung. In Firebug ausprobieren.

**Planz** · 16.04.2012, 11:44

Zitat von Andreas

Mit CSS und negativen Margins oder absoluten Positionierung. In Firebug ausprobieren.

Okay, das habe ich jetzt versucht. Nur ist es ja dann nicht dynamisch. Denn manchmal, habe ich 3 Unterpunkte, manchmal 8, etc...

Gibt es da noch eine andere Möglichkeit?

Gruss Planz