Breadcrumb Layout unterschiedlich.... Warum ?

Hallo zusammen
Ich migriere gerade eine Installation von Contao 2.10.4 auf 3.5.40.
Alles klappt soweit gut, doch das Breadcrumb, dass in Version 2.10.4 sauber nach dem "Sie sind hier:" angezeigt wird, wird in der Version 3.5.40 unterhalten angezeigt.
Version 2.10.4: http://www.svruemlang.ch/
Version 3.5.40: https://malergeschaeft-mele.ch/testumgebung/

Ich sehe den unterschied im css leider nicht..... Woran kann dies liegen oder was muss ich unter 3.5.40 neu mit dem css mitgeben ?

Vielen Dank und Grüsse
Michi

Das eine ist eine Liste (li) und das andere sind Links (a bzw. span).

Links sind inline Elemente und ne Liste (li) von Haus aus Block Elemente (deshalb auch untereinander).

Eine Liste (li) horizontal bräuchte eine float:left Anweisung

Danke, doch warum sehe ich diesen Unterschied nicht in der Konsole wenn ich schaue wie der css Wert daher kommt ?
Ich habe nun mal das float:left gesetzt, es erscheint nun nebeneinander, aber immer noch unter dem Text "Sie sind hier:" und auch der Pfeil zwischen den Seiten wird nicht angezeigt.

Man sieht es doch im HTML/CSS?

Breadcrumb mit Liste

HTML-Code:

---

<div class="mod_breadcrumb block">
    <ul>
                  <li class="first"><a href="" title="Sportverein Rümlang">Sportverein Rümlang</a></li>
                  <li class="active last">Home</li>
    </ul>
</div>

---

Breadcrumb mit Links

HTML-Code:

---

<div class="mod_breadcrumb block">
      <a href="index.php/index.html" title="Sportverein Rümlang">Sportverein Rümlang</a> &gt;
      <span class="active">Home</span>
</div>

---

Das "Sie sind hier" ist im Element "before" - Siehe Screenshot. Denk dran...ul ist ebenfalls ein Blockelement und deshalb unter diesem Text.

Die Trennpfeile würde ich via Template oder CSS einfügen

Danke für die Details. irgendwie stehe ich gerade auf dem Schlauch, denn wenn ich meine beiden Backend css anschaue, welche im "Layout/Themes" erfasst sind, sehen beide genau gleich aus.
Das muss also irgendwo aus einem anderen css kommen, dass ich da nicht pflege.

Da ich ja eigentlich eine Kopie gemacht habe und alle css etc rüberkopiert habe sehe ich noch nicht, warum das es hier unterschiedlich ist.
Ich muss mal auf den Server gehen und die css con Contao direkt anschauen, welche geliefert werden, ob diese das liefern und ich vergessen habe diese mitzukopieren.

Dein CSS für mod_breadcrumb ist ja auch gleich. Nur der HTML Inhalt ist unterschiedlich (ul li & a/span). Deshalb musst du da auch noch andere Anweisungen hinzufügen.

Weil as Element mit Links von Haus aus inline ist, hast du Glück und die Darstellung schaut "OK" aus...bei der Liste ist es nicht so.

Aber warum ist er den unterschiedlich wenn ich die alte Version in eine neue Contao Version kopiert habe ?
ist das von haus aus in der neuen Contao Version anders als früher oder wo setzt man diese HTML Inhalte ?
Sorry für die wahrscheinlich blöden Fragen, aber ich habe aktuell den Durchblick gerade nicht.

Die Contao-Changelogs findest Du hier: https://contao.org/de/changelog.html

(ja, da hat sich was geändert in den vergangenen 10 Jahren)

Zitat:

---

Zitat von Michi Löffler

Aber warum ist er den unterschiedlich wenn ich die alte Version in eine neue Contao Version kopiert habe ?

---

Du hast deine Frage selbst beantwortet :D. Der Code von Breadcrumbs sieht halt mittlerweile anders aus.

Wenn du auf Contao 4 gehst wirst du auch in allen Navigationsformatierungen den Wert von span auf strong ändern müssen. Ist halt so :)

Ich kann den Breadcrumb hier: https://malergeschaeft-mele.ch/testumgebung/ gar nicht sehen. Hast den mittlerweile entfernt?

Zitat:

---

Zitat von Kahmoon

Das eine ist eine Liste (li) und das andere sind Links (a bzw. span).

Links sind inline Elemente und ne Liste (li) von Haus aus Block Elemente (deshalb auch untereinander).

Eine Liste (li) horizontal bräuchte eine float:left Anweisung

---

Besser so:

Code:

---

ul {
display: flex;
}

---

:D

Vielen Dank für den css-Schnippsel....
Ich habs entfernt, da ich nicht weitergekommen bin, aber ich werde es nun nochmals versuchen...

Zitat:

---

Zitat von Michi Löffler

Vielen Dank für den css-Schnippsel....
Ich habs entfernt, da ich nicht weitergekommen bin, aber ich werde es nun nochmals versuchen...

---

in deine Fall müsste das dann freilich so aussehen

Code:

---

.mod_breadcrumb ul {
display:flex;
}

---

Leider wird es immer noch untereinander angezeigt, also auf der zweiten Zeile unter "Sie sind hier".
Aber ist OK, ich habe es wieder entfernt....

Vielen Dank allen und Grüsse

Zitat:

---

Zitat von Michi Löffler

Leider wird es immer noch untereinander angezeigt, also auf der zweiten Zeile unter "Sie sind hier".
Aber ist OK, ich habe es wieder entfernt....

Vielen Dank allen und Grüsse

---

Dann musst du mal den Link posten, dann schau ich mal....

Vielen Dank, ich habe es nun auf der Einstiegsseite nochmals aktiviert um Aufzuzeigen, wie es aussieht:
https://www.malergeschaeft-mele.ch/testumgebung/

den li noch etwas padding-right geben und das ::before dem ersten li geben:

Code:

---

.mod_breadcrumb li:first-child::before {
  content: "Sie sind hier: ";
}

---

dann sollte es passsen.

Cool, vielen Dank, sieht schon viel besser aus :-)
https://www.malergeschaeft-mele.ch/testumgebung/

In der aktuellen alten Liveversion hat es noch so "Pfeile" dazwischen.... Wie bekomme ich diese allenfalls noch hin ?
http://www.svruemlang.ch/

Im Template der Breadcrumbnavi

...oder auch per CSS mit ::before

Code:

---

.mod_breadcrumb li::before {
  content: "> ";
}

---

Aber vor dem Schnipsel von fiedsch

Perfekt, vielen Dank, passt perfekt...:)