CSS Navigation - Darstellung

[Twitt]

Hallo ins Forum
Ich hänge gerade bei einer Navigationsformatierung mit CSS fest. Unter diesem Link ist die Problematik zu sehen.

Hauptnavigation oben
Ich krieg es irgendwie nicht hin, dass das Wort des Submenulinks, rechts keinen Punkt mehr im aktiven Zustand hat.

Footernavigation
Hier verkringel ich mich mit der Darstellung eines aktiven Links. Dieser sollte ebenfalls noch den richtigen Abstand und vorallem auf der gleichen Linie stehen.

Kann mir da wer weiterhelfen oder ist der CSS-Aufbau für so etwas einfacher (mit weniger Zeilen CSS) zu gestalten?
Bin mir auch nicht sicher, ob ich bei der Hauptnavigation überhaupt die CSS-ID #header voransetzen muss...


Besten Dank für eure Hilfe

[csm]

Hallo Twit,

mittlerweise scheinst Du es ja gelöst zu haben.

Etwas einfacher geht es, wenn Du gleich das richtige Level bestimmst und den letzten Menüpunkt ausnimmst. Liest sich im ersten Moment ein wenig komplizierter, aber dafür kannst Du einige Regeln in Deinem CSS weglassen:

nav .level_1 > li:not(.last)  > a:after,
nav .level_1 > li:not(.last)  > span:after {
  	content: '.';
  	color: #000;
  	margin-left: 12px;
}

statt bisher

.mod_navigation a:after, 
.mod_navigation .home :after, 
.mod_navigation .active :after,
#footernav a:after	{
  	content: '.';
  	color: #000;
  	/*font-size: 2em;*/
  	/*line-height: 0;*/
  	margin-left: 12px;
}

#footernav .level_1 li .active	{
  	content: '.';
  	color: #fff;
  	/*font-size: 2em;*/
  	/*line-height: 0;*/
  	margin-left: 12px;
  	margin-right: 12px;
}

.mod_navigation .buecher :after, 
.mod_navigation ul.level_2:after, 
.mod_navigation ul.level_2 a:after, 
#footernav .facebook a:after	{
  	content: '';
  	font-size: 2em;
  	line-height: 0;
  	margin-left: 12px;
}

Gruß
csm

[mlweb]

Hauptnavigation oben
Ich krieg es irgendwie nicht hin, dass das Wort des Submenulinks, rechts keinen Punkt mehr im aktiven Zustand hat.

Den Punkt danach würde ich von vornherein auf level_1 beschränken. Dann entfällt die Überschreiberei.

Footernavigation
Hier verkringel ich mich mit der Darstellung eines aktiven Links. Dieser sollte ebenfalls noch den richtigen Abstand und vorallem auf der gleichen Linie stehen.

Wenn a-tag und span bis auf die Farbe genauso aussehen sollen müßtest Du diese auch gleich gestalten. Du hast da ganz unterschiedliche Abstände. Ich hab jetzt nicht genau geschaut, wo genau die Ursache für die Verschiebung liegt.

oder ist der CSS-Aufbau für so etwas einfacher (mit weniger Zeilen CSS) zu gestalten?

Ja, mit Flexbox. Auch einige andere Dinge würde ich wohl komplett anders aufziehen (z.B. .last statt .buecher und .facebook anzusprechen bzw. überhaupt zu verwenden)

Bin mir auch nicht sicher, ob ich bei der Hauptnavigation überhaupt die CSS-ID #header voransetzen muss...

Nein wozu? Für eine Unterscheidung der Navigationen haben diese ja eine eigene ID.

[Twitt]

Hallo Twit,

Etwas einfacher geht es, wenn Du gleich das richtige Level bestimmst und den letzten Menüpunkt ausnimmst. Liest sich im ersten Moment ein wenig komplizierter, aber dafür kannst Du einige Regeln in Deinem CSS weglassen:

nav .level_1 > li:not(.last)  > a:after,
nav .level_1 > li:not(.last)  > span:after {
  	content: '.';
  	color: #000;
  	margin-left: 12px;
}

Gruß
csm

Hallo csm, danke dir. Dein Code hat mich echt weitergebracht. Ich werde mir noch im Netz die Erläuterung der Schreibweise besorgen, da ich das so noch nicht kenne.
Momentan suche ich noch die ID/Klasse, damit das MMenu (Dirk Klemmt) in der Responsive Version nicht mitgezogen wird.

Danke dir herzlich für deine Hilfe.

[Twitt]

Hi mlweb

Mit Flexbox kenne ich mich nicht aus. Dank des Hinweises von "csm" konnte ich auf die Klassen verzichten und ja, evtl. wäre es sinnvoller dann direkt mit contaoeigenen Klassen zu arbeiten.
Ich dachte die ID vorn dran zu stellen, weil eine CSS-Regel bei einer Klasse nicht greift. Es macht aber nur die CSS Formatierung unnötig komplex.

Ja, mit Flexbox. Auch einige andere Dinge würde ich wohl komplett anders aufziehen (z.B. .last statt .buecher und .facebook anzusprechen bzw. überhaupt zu verwenden)
Nein wozu? Für eine Unterscheidung der Navigationen haben diese ja eine eigene ID.

[csm]

Hallo,

nur kurz zur Erläuterung:
.level_1 > li - Nur das direkt folgende li, nicht die li-Elemente, die in .level_2 etc. folgen
li:not(.last) - die Pseudoklasse :not(.last) bedeutet, alles, was nicht die Klasse last hat

Dadurch kann man die CSS-Regel schön begrenzen.

Zum Nachkucken kann ich diese Seite empfehlen: https://developer.mozilla.org/de/doc...S/CSS_Referenz

Gruß
csm

[Andreas]

Meistens ist es aber übersichtlicher, wenn man erstmal alle Elemente gleich behandelt, und wenn man dann sieht, dass ein erstes oder ein letztes Element eine bestimmte Eigenschaft nicht haben soll, diese mit den Child-Selektoren korrigiert wird. Beispiel:

p {
  margin-bottom: 1em;
  text-align: justify;
  /* ... */
}
p:last-child {
  margin-bottom: 0;
} 

So braucht man den :not-Selektor nicht und auch keine Klasse auf dem letzten Element. Außerdem sieht die Formatierung, hier aller Paragraphs, übersichtlicher aus, als wenn man dort direkt ein p:not(.last) hätte. Außerdem ist es leichter zu lesen. Ein if(true) ist leichter zu verstehen als ein if(!false).

[csm]

Hallo Andreas,

die Klasse bringt ja Contao schon mit. Vom Prinzip her schreib ich ja nur auf, was ich haben will, nämlich alle Elemente, außer das letzte:

li:not(.last)

alternativ geht ja auch

li:not(:last-child)

Dann kommen wir auch ohne Klassen aus. Am Ende spart man sich eine Regel.
Ich finde das tatsächlich nicht unübersichtlicher, sondern übersichtlicher. Ist aber vielleicht einfach Geschmackssache :-)

Gruß
csm

[Andreas]

die Klasse bringt ja Contao schon mit.

Nicht immer.

Am Ende spart man sich eine Regel. ...
Ist aber vielleicht einfach Geschmackssache :-)

Nicht unbedingt nur Geschmackssache. Ich habe den :not() noch nie benötigt. Er macht vielleicht nur dann Sinn, wenn ich wirklich nur eine Eigenschaft vergeben möchte. Oder wie bei dem ::after, wo ich weiß, dass ich beim letzten Element kein Pseudoelement benötige. Ansonsten müsste ich mir überlegen, welche Eigenschaften denn nur auf die nicht letzten aufgesetzt werden und diese nochmal rausziehen. Beispiel:

nav a,
nav span {
  /* 
    hier eine ganze Latte von Eigenschaften
    border-bottom nicht hier, weil das der letzte nicht bekommt
    schon komisch, weil ja fast alle border-bottom bekommen 
  */
}
nav a:not(.last),
nav span:not(.last) {
  border-bottom: 1px solid;
} 

Siehst du was ich meine? Es ist wie mit "not false" anstatt "true" zu benutzen.

nav a,
nav span {
  /* 
    hier eine ganze Latte von Eigenschaften inkl.
  */
  border-bottom: 1px solid;
}
nav a:last-child,
nav span:last-child {
  border-bottom: 0 none;
}