Vorgehensweise beim Erstellen einer Navigation im Header über einem Banner etc.

[MartinL]

Hallo,

das hier ist mehr eine allgemeine Frage, als ein konkretes Problem. Ich arbeite mich gerade in Contao ein und frage mich bei manchen Dingen, wie man vorgehen würde, wenn man xyz erreichen wollen würde. Ich frage mich das, da ich ungern an 7 Ecken rumschrauben würde um etwas umzusetzen, wofür Contao vielleicht schon eine schöne Lösung bereithält.


Ich habe mir also folgendes vorgenommen. Ich möchte auf meiner Seite eine Kopfzeile. Die Kopfzeile soll eine Navigation und ein Bild im Hintergrund enthalten.

Was ich schon an Ansätzen gefunden bzw. an Ideen entwickelt habe:

1. Ich erstelle ein Navigationsmodul und füge das in meine Kopfzeile ein. Gleichzeitig erstelle ich ein Bildelement und füge das in einem weiteren Modul mit eigenem HTML-Code({{insert_article::article-header}}) ein. Beide Module kann ich dann in der Kopfzeile anzeigen. Das Problem dabei ist, dass beide Module untereinander gezeigt werden. Damit das funktioniert, müsste es also irgendwie möglich sein, Module übereinander anzuzeigen.

2. Ich weise dem Navigationsmodul eine CSS-Klasse zu und lege dort ein Hintergrundbild an. Das würde wahrscheinlich funktionieren, allerdings müsste ich oder wer auch immer die Seite später administrieren würde das Hintergrundbild in der CSS-Datei ändern. Ich hätte es eigentlich lieber so, dass zwar im Hintergrund alles schön mit CSS formatiert wird, dass aber die Inhalte jederzeit über das Backend ohne CSS-Kenntnisse verändert werden können.

Wie setzt man soetwas am besten um? Hier auf der Seite ist es ja ähnlich. Hier ist eine Navigation, daneben ein Suchfeld, beide grafisch verbunden durch einen dunkleren Hintergrund und dahinter liegt noch eine Hintergrundgrafik. Gibt es da einen sauberen Weg? Da ich bisher nicht mit einem CMS gearbeitet habe, habe ich ein wenig Angst, zu viel eigenen Quelltext einzubauen und dadurch gerade die Vorteile eines CMS zu verlieren.

Vielen Dank für jede Hilfe und viele Grüße
Martin

[planepix]

Hallo Martin,

erreichen kannst du das „Stapeln” durch CSS. Positionierung und die Eigenschaft z-index helfen da weiter.

Das Bild kannst du auch als Hintergrundbild mit CSS einbinden; wenn du dann ein anderes Bild verwenden willst, tauscht du das bestehenden Bild mit dem neuen aus - benennst es aber gleich. Dann muss niemand an das CSS dran.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

[MartinL]

Vielen Dank schon mal. Die Eigenschaft z-index kannte ich sogar schon, allerdings weiß ich nicht, an welcher Position in Contao ich das nutzen soll.

Ich binde zwei Module im Seitenlayout im Header ein. Wie kann ich die Module stapeln? Mache ich das über das Stylesheet, was ich für das Theme festgelegt habe? Also mein Vorgehen wäre wie folgt:

1. Navigationsmodul eine CSS-ID zuweisen
2. Bildelement eine CSS-ID zuweisen
3. im Theme-Stylesheet diese beiden Elemente irgendwie übereinander platzieren.

Wirds so gemacht?

Gruß
Martin

[planepix]

Ja genau in der CSS-Datei, in der du dann die Eigenschaften für beide Module definierst.

[tab]

Du könntest z.B, das Bild, die Navigation (das würde ich bevorzugen) oder beide absolut positionieren. So können auch Inhalte übereinander gebracht werden. Eine CSS-ID ist nicht in jedem Fall erforderlich, kann man aber natürlich so machen. Es geht aber auch z.B. mittels CSS-Selektoren wie

#header .ce_image {...}
#header nav {...}
#header .mod_navigation {...}

]

[Andreas]

...da ich ungern an 7 Ecken rumschrauben würde um etwas umzusetzen, wofür Contao vielleicht schon eine schöne Lösung bereithält.

Hallo Martin, deinen Ansatz, wie du ihn oben beschrieben hast, finde ich genau richtig. Allerdings musst du auch bedenken, was das Design betrifft, dass dir Contao nur den sehr guten HTML-Code liefert. Das CSS ist dann deine Sache und hat nichts mit Contao zu tun. Natürlich kann man mit CSS Elemente auch übereinander legen.

Da du eine pflegeleichte Lösung suchst, nenne ich dir noch diese hier:

Erstelle das Bild-Element und benutze ein eigenes Template, z.B. ce_image-header-background. In das Template schreibst du dann nur diesen Code:

<?php

#dump($this->arrData);

$GLOBALS['TL_HEAD'][] = '
  <style>
    header {
      background-image: url('.$this->singleSRC.');
    }
  </style>
';

Mit der auskommentierten Funktion dump() kannst du dir alle Variablen des Templates anzeigen lassen, falls du neugierig bist. Das geht nicht mehr in Contao 4, aber da gibt es andere Möglichkeiten. $this->showTemplateVars() müsste in 4 aber auch noch funktionieren.

Wenn du dann später mal auf jeder Seite ein anderes Bild haben möchtest, kannst du die Erweiterung [pageimage] benutzen, um jeder Seite ein eigenes Bild zuzuweisen. Dieses Bild könnte man dann auf ähnliche Weise auch mit obigem Template aus der Seite (tl_page) herausholen.

[Bennie]

Erstelle das Bild-Element und benutze ein eigenes Template, z.B. ce_header-background-image...

Müsste das nicht ce_image_header usw. heißen, sonst kann man es nicht auswählen für das Bildelement.

[MartinL]

Danke für die vielen Beiträge, das hilft mir sehr weiter. Gerade schlage ich mich mit den CSS-Selektoren rum. Gibt es irgendwo ein Möglichkeit, schnell herauszufinden, welche Selektoren es gibt? Also woher weiß ich, dass ich .ce_image oder was auch immer verwenden muss. Das sind ja scheinbar die Standardbezeichnungen in Contao, gibt es da eine Liste?

Gruß
Martin

[Andreas]

Müsste das nicht ce_image_header usw. heißen, sonst kann man es nicht auswählen für das Bildelement.

Ich hatte dies in Contao 3.5 ausprobiert. Dort bekommt man alle Templates angezeigt, die mit "ce_" beginnen. Dies hat sich in Contao 4 wohl geändert (gerade nachgesehen), dort bekommt man im Bild-Element jetzt tatsächlich nur noch Templates zur Auswahl, welche mit "ce_image" beginnen. Man lernt halt nie dazu. Aber ich denke, du konntest dir trotzdem helfen. Ich ändere das oben mal ab, damit es in 3.5 und 4 funktioniert.

[Andreas]

Also woher weiß ich, dass ich .ce_image oder was auch immer verwenden muss. ..., gibt es da eine Liste?

Nein, es gibt keine Liste, weil die keinen Sinn machen würde.

Das schaut man sich im Browser mit den Dev-Tools an. In den meisten Browsern mit der Taste F12. Oder Kontextmenü auf ein Element und dann "Element untersuchen" o.ä. auswählen. Dort kannst du dein neues CSS auch direkt live temporär ausprobieren.

[xchs]

Es gab schon mal ein paar Versuche, hier im Forum und im Wiki eine Liste aller verfügbaren CSS-Klassen zu erstellen, aber ich verlink das erst gar nicht, da es sowieso unvollständig ist und im Grunde auch nichts bringt. Heutzutage macht man das i. d. R. so, wie es @Andreas oben beschrieben hat.

[tab]

Zudem hat sich im Lauf der Versionen auch einiges geändert. Z.B. war das nav-Tag früher mal ein ganz normales div-Tag. Müsste man dann also auch für jede Version auflisten. Und der Mehrwert wäre marginal, eher kleiner als Null, weil man nie ganz ausschliessen kann, dass bei der Auflistung sich mal ein Fehler einschleicht. Der Seitenquelltext und die Entwicklertools dagegen lügen nicht . Zudem kannst du im Entwicklertool auch gleich ausprobieren, was deine CSS-Änderung bewirken wird.

[mlweb]

Zudem hat sich im Lauf der Versionen auch einiges geändert. Z.B. war das nav-Tag früher mal ein ganz normales div-Tag. Müsste man dann also auch für jede Version auflisten.

Und angepasste Templates, die alles ganz anders machen gibt es ja auch noch.

[MartinL]

Ok, die Entwicklerwerkzeuge schaue ich mir noch mal an. Hab über den Seitenquelltext auch schon einiges herausgefunden.

Vielen Dank

[Andreas]

Außerdem kann es sein, dass eine CSS-Regel nicht greift, obwohl du die Klasse eines Elementes weißt, weil es bereits von einer anderen Regel formatiert wird, welche höherwertiger ist (cascade, specificity https://specificity.keegan.st/) . Also sone Liste machte wirklich keinen Sinn.