@@Sophie > ich habe folgenden Aufbau > > ~~~html > <ol class="breadcrumb"> > <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> > <a href="dashboard.php" itemprop="url"> > <span itemprop="title">Home &raquo;</span> > </a> > </li> > <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> > <a href="javascript:void(0)" itemprop="url"> > <span itemprop="title">Übersicht</span> > </a> > </li> > > <li class="zurueck"><a href="javascript:history.back()">Zurück</a></li> > </ol> > ~~~ > > Ich würde jetzt gerne das Zurück ganz nach rechts bringen. Derzeit habe ich es über > > ~~~css > li.zurueck { > margin-left: 58em; > } > ~~~ > > gelöst. Ist dieses aber wirklich die einzige Möglichkeit? Dieses ist eher gar keine Möglichkeit. *Magic numbers*{: @en} sind nie eine gute Idee. 58em passt vielleicht bei *dir* auf *deinem* System mit *deiner* Schriftart. Es gibt keine Garantie, dass das auch bei *anderen* passt. Ich würde eher garantieren, dass es das nicht tut. ~~~CSS, bad .breadcrumb { display: flex } .zurueck { margin-left: auto } ~~~ geht wohl in die Richtung, wie es aussehen soll. Ist aber nicht richtig, denn: Warum soll „Zurück“ rechts stehen? Also in Leserichtung vorwärts? „Zurück“ gehört doch bei LTR-Leserichtung nach links. Warum sollte es überhaupt einen Link „Zurück“ geben? Browser haben bereits einen „Zurück“-Button. Der sollte bekannt sein. Das Browser-UI auf einer Webseite nachzubauen müllt diese nur unnötig voll. Zumal die Breadcrumb-Navigation doch schon eben gerade dazu dient, zurückzukommen. Wenn es einen „Zurück“-Link geben soll, ist dieser kein Breadcrumb; gehört also nicht in die Liste. ~~~HTML <nav id="breadcrumb-nav"> <ol>…</ol> <a href="javascript:history.back()">Zurück</a> </nav> ~~~ mit ~~~CSS #breadcrumb-nav { display: flex } #breadcrumb-nav > a { margin-left: auto } ~~~ --- Wo hast du denn `http://data-vocabulary.org/Breadcrumb`{: .bad} aufgegabelt? Das Vokabular wird wohl keine Maschine verstehen. Verwende [Schema.org](http://schema.org). Da heißt es [BreadcrumbList](http://schema.org/BreadcrumbList). Ich rate von der Verwendung von Microdata (`itemscope`{: .bad}, `itemtype`{: .bad}, `itemprop`{: .bad}) ab und empfehle stattdessen RDFa Lite (`typeof`{: .good}, `property`{: .good}). LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Sophie > ich habe folgenden Aufbau > > ~~~html > <ol class="breadcrumb"> > <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> > <a href="dashboard.php" itemprop="url"> > <span itemprop="title">Home &raquo;</span> > </a> > </li> > <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> > <a href="javascript:void(0)" itemprop="url"> > <span itemprop="title">Übersicht</span> > </a> > </li> > > <li class="zurueck"><a href="javascript:history.back()">Zurück</a></li> > </ol> > ~~~ > > Ich würde jetzt gerne das Zurück ganz nach rechts bringen. Derzeit habe ich es über > > ~~~css > li.zurueck { > margin-left: 58em; > } > ~~~ > > gelöst. Ist dieses aber wirklich die einzige Möglichkeit? Dieses ist eher gar keine Möglichkeit. *Magic numbers*{: @en} sind nie eine gute Idee. 58em passt vielleicht bei *dir* auf *deinem* System mit *deiner* Schriftart. Es gibt keine Garantie, dass das auch bei *anderen* passt. Ich würde eher garantieren, dass es das nicht tut. ~~~CSS, bad .breadcrumb { display: flex } .zurueck { margin-left: auto } ~~~ geht wohl in die Richtung, wie es aussehen soll. Ist aber nicht richtig, denn: Warum soll „Zurück“ rechts stehen? Also in Leserichtung vorwärts? „Zurück“ gehört doch bei LTR-Leserichtung nach links. Warum sollte es überhaupt einen Link „Zurück“ geben? Browser haben bereits einen „Zurück“-Button. Der sollte bekannt sein. Das Browser-UI auf einer Webseite nachzubauen müllt diese nur unnötig voll. Zumal die Breadcrumb-Navigation doch schon eben gerade dazu dient, zurückzukommen. Wenn es einen „Zurück“-Link geben soll, ist dieser kein Breadcrumb; gehört also nicht in die Liste. ~~~HTML <nav id="breadcrumb-nav"> <ol>…</ol> <a href="javascript:history.back()">Zurück</a> </nav> ~~~ mit ~~~CSS #breadcrumb-nav { display: flex } #breadcrumb-nav > a { margin-left: auto } ~~~ --- Wo hast du denn `http://data-vocabulary.org/Breadcrumb`{: .bad} aufgegabelt? Das Vokabular wird wohl keine Maschine verstehen. Verwende [Schema.org](http://schema.org). Da hieße es [BreadcrumbList](http://schema.org/BreadcrumbList). Ich rate von der Verwendung von Microdata (`itemscope`{: .bad}, `itemtype`{: .bad}, `itemprop`{: .bad}) ab und empfehle stattdessen RDFa Lite (`typeof`{: .good}, `property`{: .good}). LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)