Anzeige

 Button immer am unteren Rand der Cards


kosovafan

Erfahrenes Mitglied
#1
Hallo,

ich würde gerne erreichen das die Buttons, naja class="btn" im Prinzip ist es ein Link immer am unteren Rand mit gleichen Padding ausgerichtet wird. Ich habe im Internet gesucht, aber die Lösungen funktionieren alle samt nicht. Ich hatte es auch mit Position absolute etc probiert. Wäre super wüsste hier jemand Rat.

CSS:
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: $color-black;
}

.cards article {
    background-color: $color-silver;
    flex-basis: 30em;
    flex-grow: 1;
    margin: 0 1em 1.5em 1em;
    position: relative;

    figure {
        padding: 0;
        margin: 0;
        overflow: hidden;

        img {
            opacity: 1;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    }

    header {
        padding: .75em;
        margin: 0;

        h2 {
            font-weight: bold;
            padding: 0;
            margin: 0;
        }
    }

    .card-content {
        padding: .75em;

        p {
            margin: 0 0 (1.5em / 2);
        }
    }

    footer {
        padding: .75em;
    }

    &:focus,
    &:hover {
        cursor: pointer;

        img {
            opacity: 0.7;
        }
    }
}
Im Moment sieht es wie im Bild aus, macht jetzt optisch nicht viel her. Wäre super könnte man eine Lösung finden.

Gruß
Silvio
 

Anhänge

kosovafan

Erfahrenes Mitglied
#3
Hallo Sempervivum danke für den Link ich habe damit schon ein wenig gespielt, aber entweder tat sich nichts (Chrome, Developer Tools), oder es sind nicht mehr zwei neben einander sondern werden einzeln gelistet. Ich nehme aber an ich bin doch zu blöde das wirklich zu kapieren.

Die Seite ist noch in Entwicklung keine Live Schaltung, ergo hier nur das entsprechende Snippet.

HTML:
<main>
    <section class="cards">
    {{ .Content }}
    {{ range (.Paginator 6).Pages }}
        <article>
            {{ if .Params.cover }}
            <figure>
                <img src="/static/img/{{ .Params.cover }}" alt="{{ .Title}} ">
            </figure>
            {{ end }}
            <header>
                    <h2>{{ .Title }}</h2>
                    <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}" class="text-micro">
                        {{ .Date.Format "02.01.2006" }}
                    </time>
            </header>
            <div class="card-content">
                <p>
                    {{ .Params.shorttext }}
                </p>
            </div>
            <footer>
                <a href="{{ .Permalink }}" title="{{ .Title }}" class="btn btn-brand">
                    {{ i18n "more" }}
                </a>
            </footer>
        </article>
    {{ end }}
    </section>
</main>
Danke für die Hilfe.

Mfg
Silvio
 

Sempervivum

Erfahrenes Mitglied
#4
Da scheinen Platzhalter drin zu sein, die geschweiften Klammern - ein Template, CMS? Poste besser den Code, den die Quelltextansicht deines Browsers liefert ("Rechtsklick - Seitenquelltext anzeigen" o. ä., je nach Browser).
 

Sempervivum

Erfahrenes Mitglied
#5
PS: Und das CSS scheint eine Precompilierung zu brauchen. Wenn Du nicht weißt, wie Du es kompilierst, dann kopiere es ebenfalls aus der Quelltextansicht.
 

kosovafan

Erfahrenes Mitglied
#6
Hallo,

nein kein CMS ist Hugo

HTML:
<main>
    <section class="cards">
        <article>
            <figure>
                <img src="/static/img/cover/social.jpg" alt="Social">
            </figure>
            <header>
                    <h2>Social</h2>
                    <time class="text-micro">
                        01.01.2000
                    </time>
            </header>
            <div class="card-content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde doloribus minima dolorum dignissimos earum, excepturi, odit provident ratione consequatur iste corporis, veritatis, consectetur facere fugit? Libero, inventore! Molestias, eum quas.
                </p>
            </div>
            <footer>
                <a href="#" title="Social" class="btn btn-brand">
                    Lesen
                </a>
            </footer>
        </article>
    </section>
</main>

CSS:
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #1e1916;
}

.cards article {
    background-color: #cccbca;
    flex-basis: 30em;
    flex-grow: 1;
    margin: 0 1em 1.5em 1em;
    position: relative;
}

.cards article figure {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.cards article figure img {
    opacity: 1;
    width: 100%;
    padding: 0;
    margin: 0;
}

.cards article header {
    padding: .75em;
    margin: 0;
}

.cards article header h2 {
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.cards article .card-content {
    padding: .75em;
}

.cards article .card-content p {
    margin: 0 0 0.75em;
}

.cards article footer {
    padding: .75em;
}

.cards article:focus, .cards article:hover {
    cursor: pointer;
}

.cards article:focus img, .cards article:hover img {
    opacity: 0.7;
}
PS: Ich benutze im übrigen das Framework Hocus Pocus falls das wichtig ist.

Danke
Silvio
 

Sempervivum

Erfahrenes Mitglied
#7
Danke, jetzt ist es kein Problem, dieses zusätzliche CSS sollte die Ausrichtung liefern, die Du haben willst:
CSS:
        .cards article {
            display: flex;
            flex-direction: column;
        }
        .cards article footer {
            margin-top: auto;
        }
 

kosovafan

Erfahrenes Mitglied
#8
Hallo,

danke aber das hilft nicht. Das funktioniert zwar, aber die Cards werden auf die gesamte Länge gezogen. Ich habe das auch blank probiert, bei mir funktioniert das nicht.

HTML:
<main class="container">
  <section class="cards">
    <article class="card" style="background:url(society.jpg) center/cover no-repeat;">
      <header>
        <time class="text-micro">01.01.2000</time>
        <h2>Test</h2>
      </header>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi.
        </p>
      </div>
      <footer>
        <a href="#" class="btn btn-brand">More</a>
      </footer>

    </article>

    <article class="card" style="background:url(gentoo.jpg) center/cover no-repeat;">
      <header>
        <time class="text-micro">01.01.2000</time>
        <h2>Test</h2>
      </header>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi odit, exercitationem placeat asperiores quae non labore assumenda ullam.
        </p>
      </div>
      <footer>
        <a href="#" class="btn btn-brand">More</a>
      </footer>
    </article>

    <article class="card" style="background:url(media.jpg) center/cover no-repeat;">
      <header>
        <time class="text-micro">01.01.2000</time>
        <h2>Test</h2>
      </header>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi.
        </p>
      </div>
      <footer>
        <a href="#" class="btn btn-brand">More</a>
      </footer>

    </article>

    <article class="card" style="background:url(repression.jpg) center/cover no-repeat;">
      <header>
        <time class="text-micro">01.01.2000</time>
        <h2>Test</h2>
      </header>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi odit, exercitationem placeat asperiores quae non labore assumenda ullam.
        </p>
      </div>
      <footer>
        <a href="#" class="btn btn-brand">More</a>
      </footer>

    </article>
  </section>
</main>
CSS:
body {
    background: black;
}

section.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

article.card {
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(50% - 1em);
    margin: 1rem .25em;
    padding-left: 1rem;
}

article.card a {
    margin-top: auto;
}
Danke & Gruß
Silvio
 

Sempervivum

Erfahrenes Mitglied
#9
Das funktioniert zwar, aber die Cards werden auf die gesamte Länge gezogen.
Verstehe nicht ganz, wie Du das meinst, aber ich bin ziemlich sicher, dass man das beheben kann.

Folgendes passt auf jeden Fall nicht: Wir haben article.card auf display:flex gesetzt. Dann müssen wir dieses margin:auto auf das flex-item anwenden und das ist footer und nicht das a-Tag. Also statt
Code:
article.card a {
    margin-top: auto;
}
dieses:
Code:
article.card footer {
    margin-top: auto;
}
 

Sempervivum

Erfahrenes Mitglied
#10
Auf meiner Testseite funktioniert es einwandfrei:
button-bottom.png
CSS aus Posting #6 mit folgenden Erweiterungen:
CSS:
        .cards article footer {
            margin-top: auto;
            padding: .75em;
        }
und:
CSS:
        .cards article {
            background-color: #cccbca;
            flex-basis: 30em;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            margin: 0 1em 1.5em 1em;
            position: relative;
        }
 
Anzeige
Anzeige