Menü mit Trennstrichen

Hallo,

ich habe in Cassiopeia ein horizontales Mainmenü und möchte senkrechte Trennstriche zwischen den einzelnen Menüpunkten einbauen.

Mit fällt nichtmal das richtige Suchwort dazu ein. Text-decoration ist es nicht.

Wer kann mir helfen?

vG

Hallo, es geht um dieses Menü:

HOME

Ich habe zu jedem Eintrag ein Bild gesetzt.

#2

li-Elemente habe ich in der user.css nur hier

.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {...

Border funktioniert da nicht

#3

Zitat

"Menüpunkte des Typs Trennzeichen"

Was ist das, wie geht das?

Ok und danke!

Es ist etwas tricky. Hier das Ergebnis
http://demo.derkps.de/

Zwei Probleme noch:

1)

Der Trenner kann über eine Seitenklasse ( trenner) 'Linktyp|CSS-Klasse für Link' angesprochen werden:

user.css:

.trenner {border: 15px double red;} /*15px zeigt aber keine Wirkung und dotted ist dem grauen Strich nur überlagert*/

2)

Der Abstand zwischen den Elementen soll verkleinert werden.

Alle mir vorliegenden margin/padding stehen schon auf 0.

Hallo,

um zu sehen, was wo wie wirkt, habe ich die Abstände auf >0px gesetzt und eingefärbt

.container-header .mod-menu a {
   margin: 5px; 
   padding: 5px;
   background-color: green; 
   color: red;
}

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
    margin: 10px; /*0px;*/
    padding: 10px;  /*0px;*/
    background-color: yellow;
    color: blue;
}

.trenner {
   border: 15px dotted magenta; /*Seitenklasse Trenner*/
}

Mittelgebirge

Die 'weißen' Abstände sind mir (dem Kunden) zu groß.

Aber die beiden Klassen haben mit 0px keinen Einfluss; kleiner/enger geht im Moment nicht

Die Trenner sind grau (warum?) und der obere Rand der Menüeinträge ist größer als der untere (warum?)

Ok, da kommen wir der Sache schon näher bzw. zur Lösung. Vielen Dank!

Abstände werden mehrfach definiert. Die Summe aller ist das, was man sieht.

Alle Klassen sind jetzt bekannt und alle margin/padding müssen gesetzt werden.

Da sind dann auch wieder meine zwei Standardfragen:

1. Gibt es eine systemematische Lösung, um die Klassen nachzulesen?

1.1 Mit der Einführung von Cassiopeia habe ich mal die original css gesehen. Wo ist sie hin?

2. Gibt es eine systematische Lösung, um die Klassen mit F12/inspector zu ermitteln?

Hallo,

warum ich template.css nicht gefunden habe, erschließt sich mir nicht

Ich erinnere mich, dass ich die Datei früher mal als 'Stichwortgeber' benutzt habe.

Meine Klassensammlung ist soweit komplett. Nur die Trenner mit den Abständen sind jetzt neu gewesen.

Wer kommt wie auf '.metismenu.mod-menu .metismenu-item.divider:not(.parent)' im Zusammenhang mit dem Trennermenü?

OK. es steht in der template.css; aber unkommentiert. Ich kommentiere meine user.css immer und kann es später zuordnen.

SelfHtml ist mir bekannt. Die sind zu umständlich. Es dauert (mir) zu lange, bis sie auf den Punkt kommen. Layout/Organisation sagen mir auch nicht zu.

Mit dem altem SelfHtml (Spinnennetz im Logo) kam ich besser zurecht. Ist aber 15-20 Jahre her. Aktuell benutze ich w3schools.

Aber welches Nachschlagewerk soll mich bei geg. Problemstellung zu '.divider:not(.parent)' führen?

Vielleicht ist ein globalerer Ansatz erforderlich, statt quick&dirty aus der Hüfte zu schießen.

Bzgl. F12/inspector verfahre ich wie du es beschrieben hast. Meistens erfoglos. Vielleicht bin ich aber auch zu ungeduldig. Quick&dirty?

Jedenfalls vielen Dank für die zahlreichen Hinweise.

Das ursprüngliche Problem ist gelöst und bei mir kommentiert in der user.css gespeichert.

vG

Die Beschreibung #6 zu 'Trennzeichen' startet mittendrin und mir erschließt sich der kausale Zusammenhang nicht.

Wer das auch so sieht, kann jetzt abschalten.

Für die anderen habe ich das mal zusammen gefasst:

Es existiert ein mainmenu mit Menüeinträgen vom Menüeintragstyp: Beiträge|Einzelner Beitrag

Nun sollen zum vorhandenen mainmenu neue Menüeinträge erzeugt werden, die nur einen Trennstrich in der Zeile der vorhandenen Menüeinträge erzeugen.

Erster Trennstrich

Alle Menüeinträge|+Neu

Titel*: TRENNER1; Menüeintragstyp: Sytemlinks|Trennzeichen,

Menü*: mainmenu

Modulzuweisung: Main Menu; Menüzuweisung: alle Seiten

Status: Veröffentlicht

Zweiter Trennstrich

Alle Menüeinträge|+Neu

Titel*: TRENNER2; Menüeintragstyp: Sytemlinks|Trennzeichen,

Menü*: mainmenu

Modulzuweisung: Main Menu; Menüzuweisung: alle Seiten

Status: Veröffentlicht

usw.

Die neuen Menüeinträge erscheinen rechts und müssen in 'Alle Menüeiträge|Menüs: Einträge' passend sortiert werden.

Tipp:

Mit 'Speichern & Schließen' sowie 'Als Kopie speichern', kann die Arbeit erleichtert werden.

Titel* und Alias müssen in der Kopie neu vergeben werden.

Diese Klassen in der user.css sind für die Formatierung hilfreich:

/* komplette navbar */
.container-header .container-nav {
background-color: pink;
margin: 1px; /* Außenabstand, komplette navbar  */
padding: 1px; /* Innenabstand, komplette navbar  */
display: flex;
justify-content: right; /*center; left;*/
}


/* bestückte navbar */
.container-header .mod-menu {
background-color: lightgreen;
color: red; /* Schriftfarbe, Menütitel */
(margin: 0px; /* Außenabstand, bestückte navbar */)
(padding: 0px; /* Innenabstand, bestückte navbar */)
font-weight: bold;
flex-wrap: wrap; /*zweizeiliges mainmenu*/
}


/* menu item idle */
.container-header .mod-menu a {
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
margin: 2px; /* Außenabstand Menüeintrag */
padding: 2px; /* Innenabstand Menüeintrag */
}


.metismenu.mod-menu .metismenu-item {
(margin: 4px; /* Außenabstand item */)
padding: 4px; /* Innenabstand item */
}


.metismenu.mod-menu .metismenu-item a img {
vertical-align: 0px; /* -5px; 5px; */ /* vert. Ausrichtung Menüeinträge */
}


/* Menü Trennzeichen, Text/Inhalt = Menütitel */
.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
border: 5px solid #777777; /* Trennerrahmen */
width: 40px; /* Trennerbreite */
margin: 3px; /* Außenabstand Trenner */
padding: 3px; /* Innenabstand Trenner */
background-color: yellow;
}

OK, Danke,

habe ich gefungen.

Zitat

Mann darf eben nicht erwarten das man den benötigten Selektor schon an 1. oder 2. Stelle findet!

Geduld ist nicht mein Ding

Zitat

mit der Verlinkung zu der "Zeile 12982" der template.min.css

Nun habe ich das aber in user.css überschrieben und hätte gedacht, dass diese aktuellen Werte angezeigt werden.

Doch so weiß ich wenigstens, was ich in user.css zu tun habe.

Aktuell arbeite ich mich geduldig(!) an dieser Seite https://forum.joomla.de ab.
Zu den beiden <button> mit der ausgeblendeten function window.history.back(); möchte ich Border und Background entfernen.
Mit Inspector finde ich aber (wieder) keinen Hinweis. Doch irgendwoher muss diese Formatierung doch kommen.

Na, da staune ich aber!

Nun habe ich mir mit dem Inspector so viel Mühe gegeben, eine .Klasse in css zufinden und dann geht es viel einfacher

Danke für den Hinweis!

Wenn ich jetzt noch erfahre, warum der Inspector nicht auf die user.css verweist sondern auf das Original, welches überschrieben wurde, bin ich erstamal schlau genug.

Zitat

#14

Wenn du im Inspektor das Trennerzeichen anklickst und das HTML-Element <li dadurch ausgewählt ist erscheint der Selektor

.metismenu.mod-menu .metismenu-item.divider:not(.parent)

derzeit als 6. Selektor in der Mitte

mit der Verlinkung zu der "Zeile 12982" der template.min.css