Navigation mit "Abstand"

**nada** · 05.09.2011, 08:56

Hallo zusammen,

ich möchte eine Navigation erstellen die bei einigen Menüpunkten einen Abstand enthält.

etwa so :

-Ebene1
-Ebene2
-Ebene3
-(abstand)
-(abstand)
-Ebene4
-Ebene5
-(abstand)
-(abstand)
-Ebene6
-Ebene7
-Ebene8
-(abstand)
-(abstand)
-Ebene9

muss ich mit verschiedene Templates arbeiten oder gibt es einen einfacheren Weg ?

**MacKP** · 05.09.2011, 08:58

Hallo nada,
einfach den Seiten in der Seitenstruktur eine Klasse geben (z.B. 'abstand'). Dann kannst du den Rest über CSS machen .abstand {margin-top: 2em;}

Viele Grüße

**nada** · 05.09.2011, 09:06

So einfach !!! Danke

**soweit_ok** · 05.09.2011, 23:15

Guter Tipp, da muss man erstmal drauf kommen. :-)

Und weil das Listenelement und der Link so beide diese Klasse erhalten, kann man im CSS auch beides ansprechen. Z. B. um in Submenüs außer dem Abstand auch eine Trennlinie zwischen bestimmte Navigationspunkte zu setzen.

**rost** · 17.09.2011, 16:35

Guter Tipp für den Abstand, muss ich mal ausprobieren.
Wie kann man das machen, dass der oberste Punkt manchmal nicht klickbar ist, aber angezeigt wird.
Bsp.:

Seite1 <= mit Ihnhalt soll klickbar sein.
Seite1.1
Seite1.2

Seite2 <= ohne Inhalt als Überschrift für die Unterpunkte, soll nicht klickbar sein.
Seite2.1
Seite2.2
Seite2.2.1
Seite2.2.2

**bizon** · 17.09.2011, 20:44

Im Wiki ist eine Anleitung.

**rost** · 17.09.2011, 21:04

Oh super und danke für die schnelle Antwort.

Bei contao 2.10 gibt es zwei Templates
nav_default.xhtml
nav_default.html5

Welches müsste ich ändern oder gar beide?

**bizon** · 17.09.2011, 21:12

Ich benutze noch durchgehend xhtml, weil es sicher noch einige Zeit braucht bis html5 wirklich Standard ist.

**rost** · 05.10.2011, 10:19

Zitat von MacKP

einfach den Seiten in der Seitenstruktur eine Klasse geben (z.B. 'abstand'). Dann kannst du den Rest über CSS machen .abstand {margin-top: 2em;}

Wenn man das so macht, bekommt aber auch die Seite selbst ein Margin oben und "hoppst" dann beim Aufruf entsprechden im Vergleich zu den anderen Seiten.

**MacKP** · 05.10.2011, 10:49

Hallo rost,
das passiert nur, wenn man die Spezifikation beim CSS nicht bedenkt und nur diese Klasse nimmt. Anders sieht es aus, wenn man .navigation .klassevonderseite {abstand} schreibt.

Viele Grüße

**rost** · 05.10.2011, 11:00

Danke für die schnelle Antwort.

Bei mir funktioniert es nur mit

Code:

.mod_navigation .abstand {margin-top:1em;}

**Umar** · 04.04.2013, 03:23

Ich möchte eine Navigation erstellen, die bei den Menüpunkten folgenden Abstand enthält:
Seite1 Seite2 Seite3 Seite4 Seite5

Wie mache ich das? Also so wie im Anhang möchte ich's gerne haben.

**MacKP** · 04.04.2013, 08:47

Hallo Umar,
kann man verschiedenartig machen mit CSS. Zum Beispiel mit border-left: 10px; oder was auch immer.

Viele Grüße

**Umar** · 04.04.2013, 14:10

Hallo MacKP, danke sehr! Bloß es tut sich da nichts. Vielleicht habe ich auch mein Problem nicht klar formuliert.
Ich möchte meine Menüleiste so wie hier (also mit der Trennung und den Abständen) erstellen: http://dailydesignnotes.com

Ich weiß leider nicht, wie ich das hinbekomme. Ich habe schon einiges versucht.

**MacKP** · 04.04.2013, 14:15

naja, margin-left: 10px; geht auch... kannst ja auch mal auf der Seite da selber gucken mit Firebug.
Warum was bei dir nicht geht, kann ich so nicht sagen. Wäre besser, wenn du uns einen Link geben könntest zu deiner Seite um das dann direkt da sehen zu können.

Viele Grüße

**Umar** · 04.04.2013, 14:37

Danke, ich schaue mal ob das so funktioniert. Meine Seite läuft momentan nur unter localhost.
Ich habe eine Vorahnung woran das liegt... Sicher bin ich mir aber nicht! Vielleicht kann mir trotzdem auf Anhieb einer weiterhelfen.

Bei mir sieht die Menüleiste halt so aus. Und das möchte ich getrennt (d.h. Startseite, Seite 1, Seite 2, Seite 3, usw. für sich alleine) haben:

**MacKP** · 04.04.2013, 15:01

Dann poste uns wenigstens mal dein CSS für die Navi.
Ich weiß z.B. nicht ob die Grafik im Hintergrund beim ul, li oder a vergeben wurde oder sonst wo...
Ohne Code oder so kann man da nicht viel sagen...
An sich Abstand (also margin).. nur an welcher Stelle wirst du so selber gucken müssen. Oder du machst einfach den Strich rechts breiter.. dann wirkt das ja auch so.. mit border...

Viele Grüße

**Umar** · 04.04.2013, 15:20

CSS für die Navi:

Code:

#nav_1 {
    right:0;
    position:absolute;
    float:right;
    background:#000 url("tl_files/ihya/nav.gif") left top repeat-x;
}

#nav_1 ul {
}

#nav_1 li {
    list-style-type:none;
}

#nav_1 li a {
    border-right:1px solid #000;
    font-weight:bold;
    color:#E5F2FF;
}

#nav_1 a, #nav_1 li, #nav_1 span {
    font:12px Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-weight:bold;
    color:#fff;
}

/* --hover || focus ------------------------------------------------- */
#nav_1 a:hover, #nav_1 a:focus {
    font-weight:bold;
    color:#fff;
}

#nav_1 li.sfhover a, #nav_1 li.active a {
    font-weight:bold;
    color:#fff;
}

**MacKP** · 04.04.2013, 15:46

Versuchs mal mit

Code:

#nav_1 li {border-right: 10px solid #000;}

**Umar** · 04.04.2013, 16:16

Danke, dass funktioniert zwar, aber der Hintergrund der Abstände ist nicht Transparent sondern schwarz.
Was muss ich in diesem Fall tun?

**MacKP** · 04.04.2013, 16:37

Du kannst in dem Fall den li's auch nen margin geben anstelle von dem Rahmen an der Seite...
Ich weiß ja immer noch nicht wie genau du das haben willst...
der Verlauf im HIntergrund ist dann aber immer noch zu sehen, da der ja dem div zugewiesen wurde...

Viele Grüße

**Umar** · 05.04.2013, 02:37

MacKP, ich habe jetzt den Farbcode #999 genommen, da es zum Hintergrund passt. Vielen Dank! Du hast mir weitergeholfen!

Ich möchte gerne, dass die Grafik bzw. das Menü eine bestimmte Breite und Höhe bekommt, so ähnlich wie auf dailydesignnotes.com. Ich habe alles versucht, aber irgendwie funktiert es nicht (bzw. ich weiß nicht wo und wie man das genau macht). Ich hoffe, dass du mir auch in diesem Fall weiterhelfen kannst.