Cassiopeia - Footer Menü zentrieren

Woly · 7. März 2023

Hallo zusammen,

das Zentrieren der Menüzeile des Footer Menüs krieg ich nicht hin. Mein Eintrag in der user.css lautet

CSS

/*Footer Menüzeile zentrieren - klappt noch nicht*/
.grid-child.container-footer {
    justify-content: center !important;
}

Die Menüzeile im Header hab ich so hinbekommen:

CSS

/*Header Menüzeile zentrieren*/
.grid-child.container-nav {
    justify-content: center !important;
}

Was mach ich bloß falsch?

Indigo66 · 7. März 2023

Gib uns einen Link zum Problem. Nicht alle haben das Cassiopeia aktiv oder haben es schon verändert.

Woly · 7. März 2023

Okay, verstehe ich.

https://www.mehren.de/mehren01/ ist die Adresse.

(Woly)

Indigo66 · 7. März 2023

Füge dem Selektor .footer .grid-child ein width: fit-content hinzu.

Und entferne bei @media (max-width: 991.98px) .footer .grid-child das flex-direction: column

Woly · 7. März 2023

Hey, danke!

Hab ich das soweit richtig gemacht? Hab grad Knoten im Kopf.

CSS

/*Footer Menüzeile zentrieren - klappt noch nicht*/
.grid-child.container-footer {
    justify-content: center !important;
}
.footer .grid-child {
    width: fit-content;
}

Deine zweite Anweisung ("entferne bei @media...") erfordert ein Anpassen der "template.min.css", richtig? Ich wollte gerne vermeiden, in den Quelldateien zu modifizieren. Kann ich das auch über die user.css umsetzen?

(Woly)

chr-hl · 7. März 2023

Zitat von Woly

Kann ich das auch über die user.css umsetzen?

Genau dafür ist die user.css da!

Christian

Woly · 7. März 2023

Okay, aber wie setze ich das dann mit dieser Anweisung um?

Zitat

entferne bei @media (max-width: 991.98px) .footer .grid-child das flex-direction: column

Vergiss die Frage. Nach dem Setzen des "fit-content" ist das Footer Menü nun zentriert - auch ohne das @media zu entfernen.

Vielleicht ein Cache-Problem, obwohl ich mir sicher war, den Cache geleert zu haben!

Indigo66 · 7. März 2023

Zitat von Woly

"fit-content" ist das Footer Menü nun zentriert - auch ohne das @media zu entfernen.

Aber in der mobilen Version sieht es ohne flex-direction: column besser aus.

Woly · 7. März 2023

Okay, ich stimme zu. Wie neutralisiere ich die flex-direction denn nun in der user.css?

Indigo66 · 8. März 2023

Code

.footer .grid-child {
    flex-direction: inherit;
}

Woly · 8. März 2023

Okay, hab ich eingetragen. Am Tablet quer sieht es jetzt aus wie am PC (Footer insgesamt zentriert). Am Tablet hochkant und am Smartphone sind die drei Footer-Menüpunkte zwar mittig, aber linksbündig. Das hattest Du doch gemeint, oder?

CSS

/*Footer Menüzeile zentrieren*/
.grid-child.container-footer {
    justify-content: center !important;
}
.footer .grid-child {
    width: fit-content;
    flex-direction: inherit;
}

reni · 8. März 2023

Wenn ich das richtig sehe, ist der obere Teil deines CSS hinfällig, da es ein .grid-child.container-footer gar nicht gibt.

chr-hl · 8. März 2023

Hallo,

der Selektor stimmt nicht:

.container-footer .grid-child{
justify-content: center !important;
}wäre m.E. zutreffend.

Woly · 8. März 2023

Okay, dann sieht der Code in der user.css jetzt so aus:

CSS

/*Footer Menüzeile zentrieren*/
.container-footer .grid-child {
    justify-content: center !important;
    width: fit-content;
    flex-direction: inherit;
}

Ich hab mich jetzt entschieden, das so zu lassen. Die Header-Navigation ist ja auch zentriert, aber linksbündig - würde sonst auch seltsam aussehen mit den Aufklapp-Dreiecken. Und die Footer-Navi darf dann ebenfalls zentriert, aber linksbündig aussehen.

Danke an alle Helfer!
(Woly)

boyherre · 31. Januar 2024

Hallo,

meine user.css sieht nach der Lektüre oben jetzt so aus:

CSS

h1 {
  font-size: 1em;
/*Footer Menüzeile zentrieren*/
.container-footer .grid-child 
    justify-content: center !important;
    width: fit-content;
    flex-direction: inherit;
}

Die Anpassung der Font-Size funktioniert.
Die Zentrierung der Fußzeile dagegen nicht,
Was habe ich falsch gemacht?
WRWS WesternReiterWebServices
LG, Boy

reni · 31. Januar 2024

Dir fehlt eine geschweifte Klammer { hinter .grid-child

EDIT: Bei dir gibt es gar kein .grid-child - wenn ich das richtig sehe

EDIT2: Versuche mal das:

CSS

div.grid-child:nth-child(4) {
  justify-content: center !important;
  width: fit-content;
  flex-direction: inherit;
}

chr-hl · 31. Januar 2024

M.E. fehlt hinter 1em auch noch eine schließenden Klammer }

Christian

boyherre · 1. Februar 2024

Danke für die Tipps!

OK, sieht jetzt so aus:

CSS

h1 {
  font-size: 1.5em; }

/*Footer Menüzeile zentrieren*/
div.grid-child:nth-child(4) {
  justify-content: center !important;
  width: fit-content;
  flex-direction: inherit; }

Ändert aber leider auch noch nichts…
Footer steht nicht zur Mitte.

https://wrws.de

LG, Boy

Alles anzeigen

JoomlaWunder · 1. Februar 2024

Das funktioniert! Allerdings steht der gesamte Code noch nicht in der user.css, sondern lediglich h1.

Vermutlich musst du einfach nur noch den Joomla-Cache leeren, damit nicht die alte user.css aus dem Cache verwendet wird!

Ich persönlich würde da aber nichts zentrieren wollen. Schaut eigenartig aus.

Alternativ: Nur die Texte zentrieren und Rahmen beibehalten, also beispielsweise:

CSS

.footer1, .footer2 {
  text-align: center;
}

boyherre · 1. Februar 2024

CSS

Danke für den Tipp!
Joomla Cache wurde geleert (alles).
Browser (FF)-Cache wurde geleert.

Inhalt user.css :

h1 {
  font-size: 1.5em; }

/*Footer Menüzeile zentrieren*/
div.grid-child:nth-child(4) {
  justify-content: center !important;
  width: fit-content;
  flex-direction: inherit; }

Aber Footer wird nicht zentriert angezeigt (!).

Muss ich ein child css angelegt haben? (Bisher nicht.)
Wie müsste das heißen?

Vielleicht sollte ich den Footer linksbündig lassen; was meinst Du mit „eigenartig“? Startseite steht auch mittig…

LG, Boy

Alles anzeigen