Navigationspfad - Abstand unten - ändern?

Hallo Walter,

versuchs mal mit einem negativen Margin-Bottom Wert (Aussenabstand nach unten).

Also z.B. so:

<style>
#breadcrumb {
    margin-bottom: -70px;
}
</style>

Die "-70px" nach deinem Wunsch dann noch anpassen.

Padding-Bottom ist der "Innenabstand nach unten".

Sollte so eigentlich gehen.

Zu 1: Wie du siehst, ja

Zu 2: Teliweise werden eingefügte Werte bei CSS nicht übernommen, da übergeordnete CSS-Werte hin und wieder Priorität haben.

Meist kann man diese aber mit !important hinter den Angaben dahinter "übergehen".

Für weiterführende CSS-Infos, empfehle ich dir: https://wiki.selfhtml.org/wiki/CSS

Und https://www.w3schools.com/css/

Hallo Walter,

hast du bei deiner Lösung dir auch mal die "mobile Darstellung" angesehen?

Dort ist der Navigationspfad dann nicht mehr bündig mit dem Inhalt, sondern hängt links raus (siehe Bild).

Wenn das so von dir gewünscht ist, dann OK.

Wenn nicht, dann nimm lieber meinen Code.

Bei manuellen CSS-Änderungen, immer grundsätzlich auch das Verhalten (Ansicht) bei der mobilen Darstellung mittesten.

Hallo,

ein kurzer Tipp zu CSS:

Definierte CSS Regeln werden nach gewissen Prioritäten (in einer Kaskade) angewendet. Das ist hier gut erklärt: https://wiki.selfhtml.org/wiki/CSS/Kaskade

Wichtig hierbei ist es auch zu verstehen, dass eine Regel mit höherer "spezifizität" immer gewinnt. Wenn also in einer CSS-Regelliste folgende 2 Zeilen enthalten wären:

.meininhalt .navigationspfad{color: red;}
.navigationspfad{color: blue;}

Dann würde Zeile 1 gewinnen, weil der Regelsatz eine höhere Spezifität enthält (2 Selektoren in Zeile 1, und nur einer in Zeile 2).

Die Spezifität haben Sie mit "!important" überschrieben. Das sollte man aber so selten machen, wie möglich, denn mit einem "!important" buchsiert man sich in eine Ecke, aus der man manchmal nur schwer wieder raus kommt, weil Regeln mit "!important" an anderer Stelle ggf. nur schwer wieder überschrieben werden können. Es wäre in Fall hier also besser gewesen mittels der Entwickler-Tools im Browser die Vorhandenen Regeln und deren Spezifität zu prüfen, und dann eine eigene Regel mit der selben Spezifität zu definieren, die dann die existierende überschreibt (weil der CSS-Code aus "Einstellungen" im Quellcode zuletzt aufgeführt wird).

....so "blue" gewinnen, ausser bei "red" würde das "!important" dabeistehen, oder?

Ohje, mein Kaffee taugt noch nix.....

Ich hatte einen Schreibfehler im Tipp oben. Ist korrigiert. Zeile 1 gewinnt. Hätte Zeile 2 ein "!important" drin, würde Zeile 2 gewinnen. Hätte Zeile 2 die selbe Spezifität, würde Zeile 2 gewinnen, weil an letzter Position in der Liste.