<ol><li>

[Sophie]

Guten Morgen,

ich habe folgenden Aufbau

<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

li.zurueck {
    margin-left: 58em;
}

gelöst. Ist dieses aber wirklich die einzige Möglichkeit?

[MrMurphy1]

Hallo

Flexbox ist besser.

.breadcrumb {display: flex;}
.breadcrumb li:last-child {margin-left: auto;}

oder

.breadcrumb {display: flex;}
.breadcrumb li:nth-last-child(2) {margin-right: auto;}

Je nachdem, wie das responsive Verhalten sein soll.

Gruss

MrMurphy

[Sophie]

Hallo MrMurphy,

vielen Dank für deinen CSS Code. Genau nach dem habe ich gesucht. Dir noch einen schönen Tag.

[MrMurphy1]

Hallo

Dann kannst du auch gleich den Doppelpfeil auslagern:

      .breadcrumb {
         display: flex;
      }
      .breadcrumb li:nth-last-child(2) {
         margin-right: auto;
      }
      .breadcrumb li:nth-last-child(1n+3)::after {
         content: "»";
         margin-right: 1.5rem;
      }

Den margin-right brauchst du sowieso um den Abstand für die Zahlen des ol zu bestimmen.

Vorteil: Du musst dich im HTML nicht mehr um den Doppelpfeil kümmern, sondern kannst einfach Links hinzufügen.

Statt rem kannst du natürlich auch andere Einheiten verwenden.

Gruss

MrMurphy

[Sophie]

Hallo MrMurphy,

ich sehe gerade dass es mit deiner Lösung ein Problem gibt.

<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>

Solange es bleibt ist es kein Problem. Sobald es so ausschaut, gibt es ein Problem

<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 itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			    <a href="javascript:void(0)" itemprop="url">
			         <span itemprop="title">Übersicht 2</span>
			    </a>
			</li>

			<li class="zurueck"><a href="javascript:history.back()">Zurück</a></li>
	</ol>

Jetzt wird Übersicht 2 nach rechts geschoben und das Zurück irgendwo nach oben geschoben. Ich Das heißt ich müsste hier mehrere CSS Klassen einführen und je nachdem wie viele Punkte es gibt, maximal bis zur Übersicht 2 die Klassen ändern?

[MrMurphy1]

Hallo

Da haben sich unsere Antworten wohl überschnitten.

Hast du bereits meine zweite erweiterte Lösung ausprobiert?

Wenn die nicht funktioniert brauche ich den CSS.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Dann kannst du auch gleich den Doppelpfeil auslagern:

Ja, das wollte ich ursprünglich auch noch erwähnen; das war mir dann aber in der Fülle untergegangen.

Statt rem kannst du natürlich auch andere Einheiten verwenden.

Der Abstand sollte ganz sicher von der in der Breadcrumb-Navigation verwendeten Schriftgröße abhängen, nicht von der Schriftgröße irgendwo anders. em ist also hier die richtige Einheit, nicht rem.

LLAP 🖖

[Gunnar Bittersmann]

@@MrMurphy1

.breadcrumb {display: flex;}
.breadcrumb li:nth-last-child(2) {margin-right: auto;}

Je nachdem, wie das responsive Verhalten sein soll.

Letztere Variante macht keinen Sinn, da sie davon ausgeht, dass es immer genau zwei Breadcrumbs gibt.

Aber auch erste Variante macht keinen Sinn, da sie auf falschem Markup aufsetzt.

LLAP 🖖

[Gunnar Bittersmann]

@@Sophie

ich habe folgenden Aufbau

<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

li.zurueck {
    margin-left: 58em;
}

gelöst. Ist dieses aber wirklich die einzige Möglichkeit?

Dieses ist eher gar keine Möglichkeit. Magic numbers 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.

.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.

<nav id="breadcrumb-nav">
  <ol>…</ol>
  <a href="javascript:history.back()">Zurück</a>
</nav>

mit

#breadcrumb-nav { display: flex }
#breadcrumb-nav > a { margin-left: auto }

---

Wo hast du denn http://data-vocabulary.org/Breadcrumb aufgegabelt? Das Vokabular wird wohl keine Maschine verstehen. Verwende Schema.org. Da heißt es BreadcrumbList.

Ich rate von der Verwendung von Microdata (itemscope, itemtype, itemprop) ab und empfehle stattdessen RDFa Lite (typeof, property).

LLAP 🖖

[Gunnar Bittersmann]

@@Sophie

<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>

Da hab ich außer dem Pfeil noch was übersehen: Der letzte Brotkrümel ist die aktuelle Seite? Das kann man durch aria-current="location" kenntlich machen. Und die aktuelle Seite nicht verlinken:

<ol>
	<li>
		<a href="dashboard.php">Home</a>
	</li>
	<li>
		<a aria-current="location" tabindex="0">Übersicht</a>
	</li>
</ol>

Mit Schema.org/RDFa Lite:

<html lang="de" vocab="http://schema.org/" typeof="WebPage" resource="_:this">

<ol property="breadcrumb" typeof="BreadcrumbList">
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="WebPage">
			<a property="name url" href="dashboard.php">Home</a>
		</span>
	</li>
	<li property="itemListElement" typeof="ListItem">
		<span property="item" typeof="WebPage">
			<a aria-current="location" tabindex="0" resource="_:this">Übersicht</a>
		</span>
	</li>
</ol>

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

ich habe es jetzt so umgesetzt

<nav id="breadcrumb-nav">
		<ol>
			<li><a href="dashboard.php">Home &raquo;</a></li>
			<li><a aria-current="location" tabindex="0">Bereiche</a></li>
		</ol>
	<a href="javascript:history.back()">Zurück</a>
</nav>

Und das CSS

#breadcrumb-nav {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 2em;
    border-top: 1px solid #d6d6d6;
}

#breadcrumb-nav ol {
    display: flex;
}

#breadcrumb-nav li {
    list-style-type: none;
    padding-right: 5px;
    margin: 0;
    display: flex;
    padding: 0.5em 5px 0.5em 0;
}

#breadcrumb-nav a {
    text-decoration: none;
}

#breadcrumb-nav > a { 
    margin-left: auto;
    padding: 0.5em 0;
}

Gibt es noch etwas dran auszusetzen?

Zu den &raquo; die muss ich im Quelltext stehen lassen, denn ich weiß ja nie, wie viele <li> ich auf einer Seite habe. Dann müsste ich ja ständig mein CSS anpassen? Mal ist es nur einer, mal sind es zwei, dann vielleicht auch drei usw..

[Gunnar Bittersmann]

@@Sophie

Zu den &raquo; die muss ich im Quelltext stehen lassen

Nein, musst du nicht.

denn ich weiß ja nie, wie viele <li> ich auf einer Seite habe.

Musst du gar nicht wissen.

Dann müsste ich ja ständig mein CSS anpassen?

Nein, musst du nicht. Das wäre ja auch blöd.

Mal ist es nur einer, mal sind es zwei, dann vielleicht auch drei usw..

Und wo willst du » haben? Zwischen den Items? Also nach jedem, außer dem letzten? Dann sagst du das genau so:

#breadcrumb-nav li:not(:last-of-type)::after { content: '»' }

Da kommt natürlich noch etwas padding-left ran. Genausoviel wie Abstand auf der anderen Seite ist.

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

#breadcrumb-nav li:not(:last-of-type)::after { content: '»' }

Da kommt natürlich noch etwas padding-left ran. Genausoviel wie Abstand auf der anderen Seite ist.

vielen Dank damit hat es wunderbar geklappt.

[Gunnar Bittersmann]

@@Sophie

#breadcrumb-nav {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 2em;
    border-top: 1px solid #d6d6d6;
}

#breadcrumb-nav ol {
    display: flex;
}

#breadcrumb-nav li {
    list-style-type: none;
    padding-right: 5px;
    margin: 0;
    display: flex;
    padding: 0.5em 5px 0.5em 0;
}

#breadcrumb-nav a {
    text-decoration: none;
}

#breadcrumb-nav > a { 
    margin-left: auto;
    padding: 0.5em 0;
}

Gibt es noch etwas dran auszusetzen?

Zum Sinn des Zurück-Links und dessen Position rechts hab ich ja schon was gesagt. Vertikal sitzt er nicht auf der Höhe der Breadcrumbs.

Noch etwas dran auszusetzen? Ja: 5px. Du willst doch alles mit der Schriftgröße in der Breadcrumb-Naviagtion skalieren lassen, also alles in em angeben. Hier so etwa 0.3em.

Wann immer px im Stylesheet vorkommt, machst du vermutlich was falsch. Außer vielleicht bei den 1px Rahmendicken, wenngleich du auch thin schreiben kannst.

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

also bei mir sitzen beide Bereiche auf einer Höhe

Mein CSS habe ich auch angepasst

#breadcrumb-nav {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 2em;
    border-top: 1px solid #d6d6d6;
}

#breadcrumb-nav ol {
    display: flex;
}

#breadcrumb-nav li {
    list-style-type: none;
    padding-right: 0.3em;
    padding-right: 0.3em;
    margin: 0;
    display: flex;
    padding: 0.5em 0.3em 0.5em 0;
}

#breadcrumb-nav li:not(:last-of-type)::after { 
    content: '»';
    padding-left: 0.3em; }

#breadcrumb-nav a {
    text-decoration: none;
}

#breadcrumb-nav > a { 
    margin-left: auto;
    padding: 0.5em 0;
}

[Sophie]

Hallo Gunnar Bittersmann,

ist es mit CSS möglich wenn man auf

<li><a aria-current="location" tabindex="0">Bereiche</a></li>

klickt, dass es kein blauen Border entsteht.

[Gunnar Bittersmann]

@@Sophie

also bei mir sitzen beide Bereiche auf einer Höhe

Hm, bei mir nicht. Zeigst du vielleicht nicht das ganze relevante CSS?

ist es mit CSS möglich wenn man auf

<li><a aria-current="location" tabindex="0">Bereiche</a></li>

klickt, dass es kein blauen Border entsteht.

Also bei mir entsteht da kein blauer Rahmen. Zeigst du vielleicht nicht das ganze relevante CSS?

Link zu deiner Seite?

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

Also bei mir entsteht da kein blauer Rahmen. Zeigst du vielleicht nicht das ganze relevante CSS?

also wenn ich auf das Wort Bereich mit der Maus klicke, erhalte ich so einen Blauen Rahmen

Ich teste mit dem aktuellen Google Chrome unter Windows 10 an einem Laptop.

Hm, bei mir nicht. Zeigst du vielleicht nicht das ganze relevante CSS?

Doch für diesen Bereich habe ich nur dieses CSS

#breadcrumb-nav {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 2em;
    border-top: 1px solid #d6d6d6;
}

#breadcrumb-nav ol {
    display: flex;
}

#breadcrumb-nav li {
    list-style-type: none;
    padding-right: 0.3em;
    padding-right: 0.3em;
    margin: 0;
    display: flex;
    padding: 0.5em 0.3em 0.5em 0;
}

#breadcrumb-nav li:not(:last-of-type)::after { 
    content: '»';
    padding-left: 0.3em; }

#breadcrumb-nav a {
    text-decoration: none;
}

#breadcrumb-nav > a { 
    margin-left: auto;
    padding: 0.5em 0;
}

Und das ganze sieht bei mir so aus

Ich habe noch zwei Hilfslinien eingezogen dass du siehst, dass beide genau gleich hoch sind.

[Gunnar Bittersmann]

@@Sophie

also wenn ich auf das Wort Bereich mit der Maus klicke, erhalte ich so einen Blauen Rahmen

Ah, das ist Chromes Art, das fokussierte Element zu kennzeichnen. Wichtig für Tastaturbedienung.

Den Rahmen bei Mausbedienung wegzubekommen, bei Tastaturbedienung aber anzuzeigen, sollte zukünftig mit :focus-ring möglich sein. Es gibt einen Polyfill.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Der letzte Brotkrümel ist die aktuelle Seite? Das kann man durch aria-current="location" kenntlich machen.

BTW, ich hatte extra nachgefragt.

LLAP 🖖