Link-Button innerhalb eines DIV ausrichten

Elly · 24. Januar 2021

Hallo an alle,

ich habe auf meiner Seite 2 Versionen von Link-Buttons ausprobiert.

Im ersten Block habe ich display:inline-block gesetzt und außerhalb von p platziert, da er sonst (wie man im 2. Block sieht) direkt am Text dranklebt. Bei dieser Variante greift dann auch margin-top.

Im zweiten Block habe ich bei display gar nichts gemacht und a innerhalb von p platziert. margin-top greift hier allerdings nicht und ich weiß nicht warum. Auch wenn ich br davor mache, bringt das nicht mehr Platz.

Ich will den Link auch rechts platzieren. Ich hab zig Sachen ausprobiert und das erst nicht hinbekommen, nun habe ich den gesamten ersten Block auf text-align:right; gesetzt und die h1 und den p wieder umformatiert. Ich dachte eigentlich, wenn ich bei p text-align einstellen kann, sollte das eig bei a auch gehen. Eine andere Möglichkeit wäre vl, das a doch in einen neuen p zu setzen und diesem p dann eine neue Klasse zu geben, die rechts ausgerichtet ist.

Was meinen denn die Profis hier?

LG

Elly

Sempervivum · 24. Januar 2021

Zitat

Im zweiten Block habe ich bei displaygar nichts gemacht und a innerhalb von p platziert. margin-top greift hier allerdings nicht und ich weiß nicht warum.

Die Erklärung findest Du z. B. bei Selfhtml:

Zitat von Selfhtml

Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Abstand/margin

Wenn Du das display auf inline-block oder block änderst, funktioniert es mit dem Margin.

Bei dem ersten Block funktioniert es ja einwandfrei, ich nehme an, so soll es aussehen?

Dieses Layout kannst Du auch sehr einfach mit Flex erzielen:

Die Elemente untereinander anordnen mit display: flex; und flex-direction: column; . Dann werden sie untereinander dargestellt und füllen die Breite aus. Den Link kannst Du dann gezielt mit align-self; rechts anordnen.

Und das Layout mit den drei Boxen, wo automatisch ein Umbruch erzeugt wird, kannst Du auch sehr einfach mit Gridlayout erzeugen, sieh dir diese Demo an:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Image Stack</title>

    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .cell {
            border: 2px solid lightblue;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>

</html>

Alles anzeigen

Elly · 24. Januar 2021

Das Grid-System ist auch interessant. Da muss ich mich noch einarbeiten

Manche Dinge "fuchsen" eben...das sind dann genau die, wo man denkt, so muss es doch sein und es eben doch nicht so ist - wie die margin bei inline-Elementen wie a.

Ich habe es jetzt mit einer Flexbox und column gelöst, finde ich grad irgendwie eleganter als meine vorige Umsetzung.

Was mir allerdings noch ein Rätsel ist - wenn man bei .cell p das padding unten auf 0 setzt, sieht man, dass der Rahmen um den Linkbutton außerhalb des DIVs ist. Ich komme auch im Inspektor nicht drauf, warum das so ist. Normalerweise sollte doch alles innerhalb der Box sein? Das sind hier jetzt gefühlte 10px weniger, die ich dann zu p.button geben muss. Das geht doch sicher eleganter?

Kann ich zusätzlich diesen Button ganz unten ausrichten? vertical-align:bottom; funktioniert hier nicht. Ich schätze mal das ist wg flex-direction:column;

Am Handy werden die Links übrigens in allen Browsern linksbündig dargestellt (Firefox, Chrome, Edge und Samsung Browser).

MrMurphy · 24. Januar 2021

Zitat

Normalerweise sollte doch alles innerhalb der Box sein?

Nein.

In den HTML- und CSS-Regeln sind für bestimmte Elemente bestimmte Verhaltensweisen festgelegt. Das Verhalten ist also für Browser vollkommen normal.

HTML und später CSS sind von fachkundingen Theoretikern für fachkundige Theoretiker erdacht worden, um es mal etwas überspitzt auszudrücken. Deshalb darf man da nicht mit Wunschvorstellungen oder dem Verhalten aus anderer Software rangehen. Wer sich etwas intensiver mit HTML und CSS beschäftigen will sollte sich mit diesen Grundlagen beschäftigen, sonst wird er immer wieder auf solche Probleme stoßen.

Bis heute sind HTML noch CSS zur Informationsübermittlung ausgelegt, und zwar für möglichst viele Endgeräte und damit auf für möglichst viele Besucher der Webseiten. Und nicht für Künstler, Grafiker und Layouter.

Das von dir beobachtete Verhalten (nicht Problem) ist als Collapsing Margins beziehungsweise Zusammenfallende Außenabstände bekannt.

Zitat

vertical-align:bottom;

Diese CSS-Anweisung ist für etwas anderes gedacht.

Zitat

Ich schätze mal das ist wg flex-direction:column;

Denke ist nicht. Aber ich kenne auch nicht dein aktuelles HTML und CSS.

Ich gehe eher davon aus, dass die von dir wahrscheinlich gewünschte Ausrichtung grade durch Flexbox möglich ist, zum Beispiel mit der auto-Anweisung für margin.

Nachtrag: Ich habe grade den Link zu deiner Seite in deinem ersten Beitrag gefunden.

Um die Buttons unten auszurichten kannst du den p-Elementen mit der Klasse "button" im CSS die Anweisung "margin-top: auto;" hinzufügen.

Elly · 30. Januar 2021

Ahhh, super! Danke schön!

Link-Button innerhalb eines DIV ausrichten

Jetzt mitmachen!

Teilen