• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Hilfe bei scrollbaren Breadcrumb

ichbineinberliner

Neues Mitglied
Hallo ich bin gerade bei der Erstellung eines Breadcrumbs für eine Website und benötige jetzt Hilfe dabei.

Das Ganze ist nur für eine mobile Version und soll dem Nutzer anbieten durch zu scrollen, weil es letztendlich auch lange Namen der Unterseiten sind.
Mit Display: Flex; und Justify-Content: Flex-End; erreiche ich schon, dass das ganze rechtsbündig ist, wenn es ein langer Text nachher ist. Dann kann ich aber nicht mehr nach links scrollen. Wenn ich aber Flex-Start mache ist es linksbündig und ich kann nach rechts scrollen. Wie kann ich diesen Fehler beheben?

Und wie kann ich es so machen, dass es bei wenig Text linksbündig und bei mehr Text rechtsbündig ist?

Beste Grüße
 

Anhänge

  • Bildschirmfoto 2021-02-26 um 09.58.20.png
    Bildschirmfoto 2021-02-26 um 09.58.20.png
    75,6 KB · Aufrufe: 2
  • Bildschirmfoto 2021-02-26 um 09.58.07.png
    Bildschirmfoto 2021-02-26 um 09.58.07.png
    85,1 KB · Aufrufe: 2
Werbung:
Dies hier erfüllt bei mir beide Anforderungen:
Code:
    <div id="cont-scr-breadcrumb">
        <div id="scr-breadcrumb" contenteditable="true">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
            diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam erat, sed diam voluptua.</div>
    </div>
Code:
        #cont-scr-breadcrumb {
            overflow-x: auto;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;
        }

        #scr-breadcrumb {
            white-space: nowrap;
            flex: 1;
        }
(contenteditable nur um es leicht testen zu können).
Getestet nur auf dem Desktop, nicht auf dem Handy.
Wow, vielen Dank!
Das ist genau so wie ich es gebraucht habe. Ich hätte nicht gedacht, dass das wirklich funktioniert. :D

Das einzige was mich jetzt noch ein wenig stört ist, wenn ich nach ganz links wische, dann hab ich keinen Abstand wie rechts (25px). Kann man das noch bearbeiten? Magst du mir dabei noch einmal helfen?
 
Also das mit dem Padding habe ich hinbekommen. Jetzt ist es aber leider so, dass es riesige Abstände gibt, wenn die zweite Unterseite nicht so lang ist wie der Bildschirm...
 

Anhänge

  • Bildschirmfoto 2021-02-26 um 12.40.05.png
    Bildschirmfoto 2021-02-26 um 12.40.05.png
    12,4 KB · Aufrufe: 2
Werbung:
HTML:
<div class="breadcrumb">
    <a href="#" id="active" contenteditable="true">Unterseite</a>
    <a href="../" contenteditable="true">Startseite</a>
</div>

CSS:
.breadcrumb {
    display: inline;
    background: #e6e6e6;
    height: 30px;
    padding: 0px 25px 0px 25px;
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
    overflow-x: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.breadcrumb a {
    white-space: pre-line;
    flex: 1;
    font-size: 15px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: -1px;
    text-decoration: none;
    color: #000000;
}

.breadcrumb a#active {
    font-family: sans-serif;
    font-size: 15px;
}

.breadcrumb a+a:last-child::after {
    content: "▸";
    padding: 0px 10px 0px 10px;
}
 
Zurück
Oben