Menü mit Trennstrichen

derkps · 19. März 2024

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

Indigo66 · 19. März 2024

Senkrecht geht per CSS über Border, z.B. auf den Li.

drmenzelit · 19. März 2024

Oder du legst Menüpunkte des Typs Trennzeichen und Cassiopeia macht es schon für dich

derkps · 19. März 2024

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

Code

.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?

Stef · 19. März 2024

Zitat von derkps

"Menüpunkte des Typs Trennzeichen"
#3
Was ist das, wie geht das?

Auswahl bei Menüpunkte

Sieger66 · 19. März 2024

Siehe z.B.:

help.joomla.org/proxy?keyref=Help50:Menu_Item:_Separator&lang=de

derkps · 19. März 2024

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.

Dautrich · 20. März 2024

2) Versuche es mal hiermit:

Code

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
    margin: 0;
}

derkps · 20. März 2024

Hallo,

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

Code

.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*/
}

Alles anzeigen

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?)

Sieger66 · 20. März 2024

Eventuell nützlich:

Code

.metismenu.mod-menu .metismenu-item {
    padding: 0px;
}

Eventuell nützlich:

Code

.metismenu.mod-menu .metismenu-item a img {
    vertical-align: 0 ; 
}

Eventuell nützlich:

Code

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
 border-right:15px solid #ced4da;
 width:30px;
 margin:.25em;
}

derkps · 20. März 2024

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?

Sieger66 · 20. März 2024

Eventuell nützlich:

http://demo.derkps.de/media/templates/site/cassiopeia/css/template.css

Zu 2.

Links neben dem Tab "Inspektor" auf den Pfeil klicken und anschließend das was du untersuchen oder ändern möchtest auf der Website anklicken. Dadurch wird links der entsprechende HTML-Abschnitt angezeigt und markiert und in der mitte gleichzeitig die CSS-Selektoren sowie die Eigenschaften und Werte (sowie auch die Stelle woher diese stammen) die diesen Abschnitt beeinflussen.

Wenn man da nicht fündig wird, auch mal im HTML-Abschnitt ein oder mehrere HTML-Elemente hinein oder zurückgehen(durch anklicken des HTML-Elementes).

Dann sieht man in der mitte gleichzeitig die CSS-Selektoren sowie die Eigenschaften und Werte (sowie die Stelle woher diese stammen) die diesen Abschnitt beeinflussen.

Mit dem Dreiecks-Pfeil vor dem jeweiligen HTML-Abschnitt lässt sich dieser Abschnitt gegebenenfalls weiter öffnen um darin enthaltene weitere HTML-Elemente zu sehen usw.

Wenn man den benötigten Selektor identifiziert hat kann man im Tab Stilbearbeitung z.B. wenn vorhanden links die Datei user.css oder eine andere anklicken und in der mitte den Selektor mit Eigenschaften und Werten am Ende hinzuzufügen und anschließend das Ergebnis auf der Website zu sehen und gegebenenfalls nochmals zu ändern...

Das erspart einem aber sicher nicht die Kentnisse z.B. in CSS und HTML und auch mal z.B. dort oder andernorts nach diversen Einstellungen und Standardwerten zu schauen:

CSS – SELFHTML-Wiki

Eventuell nützlich:

Code

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
 border-right:15px solid #ced4da;
 width:1px;
 margin:.25em;
 margin-right: 12px;
 margin-left: 12px;
}

derkps · 20. März 2024

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:

Spoiler anzeigen

Sieger66 · 21. März 2024

Zitat von derkps

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

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

wo dann nach klick folgender Code erscheint:

Code

.metismenu.mod-menu .metismenu-item.divider:not(.parent) {
 border-right:1px solid #ced4da;
 width:1px;
 margin:.25em;
 padding:0;
 overflow:hidden
}

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

Außerdem kann gegebenenfalls auch noch Javascript "in die Suppe spucken"...

derkps · 24. März 2024

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 http://demo.derkps.de/geest 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.

christine2 · 24. März 2024

Zitat von derkps

Aktuell arbeite ich mich geduldig(!) an dieser Seite http://demo.derkps.de/geest 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.

meinst Du diesen da?

Code

button#goBack {
border: none;
background: none;    
}

Bitte nächstes Mal richtigen Link reintun.

Geest

Liebe Grüße

Christine

christine2 · 24. März 2024

Zu spät, Zeitschranke.

Da ist ja noch ein 2. button, den Du wohl meinst:

Code

input {
background: none;
border: none;    
}

derkps · 25. März 2024

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

christine2 · 25. März 2024

Zitat von derkps

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

Zitat von derkps

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.

verweist doch eh im Inspector (auf der rechten Seite) und zeigt: user.css:356

Da die user.css als letztes geladen wird, hat diese das Sagen. E basta

Die Codes in der template.min.css bleiben natürlich. Überschriebene Werte sind dort eh inaktiv.

Ev. zusätzliche (nicht überschriebene) bleiben bestehen.

Liebe Grüße

Christine

Sieger66 · 25. März 2024

und dein Selektor aus der user.css ist ja derzeit als 4. Selektor in der mitte auch vorhanden.

Und die Überschriebene Werte, beim 6.Selektor, die ohnehin inaktiv sind, werden ja durchgestrichen in der mitte angezeigt...

Dies hättest du auch sehr leicht selbst erkennen können wenn du meine Beschreibung in #14 mal nachvollzogen hättest...