1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Button immer am unteren Rand der Cards

Dieses Thema im Forum "CSS" wurde erstellt von kosovafan, 13. April 2018.

  1. kosovafan

    kosovafan Erfahrenes Mitglied

    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.

    Code (CSS):
    1. .cards {
    2.     display: flex;
    3.     flex-wrap: wrap;
    4.     justify-content: space-between;
    5.     color: $color-black;
    6. }
    7.  
    8. .cards article {
    9.     background-color: $color-silver;
    10.     flex-basis: 30em;
    11.     flex-grow: 1;
    12.     margin: 0 1em 1.5em 1em;
    13.     position: relative;
    14.  
    15.     figure {
    16.         padding: 0;
    17.         margin: 0;
    18.         overflow: hidden;
    19.  
    20.         img {
    21.             opacity: 1;
    22.             width: 100%;
    23.             padding: 0;
    24.             margin: 0;
    25.         }
    26.     }
    27.  
    28.     header {
    29.         padding: .75em;
    30.         margin: 0;
    31.  
    32.         h2 {
    33.             font-weight: bold;
    34.             padding: 0;
    35.             margin: 0;
    36.         }
    37.     }
    38.  
    39.     .card-content {
    40.         padding: .75em;
    41.  
    42.         p {
    43.             margin: 0 0 (1.5em / 2);
    44.         }
    45.     }
    46.  
    47.     footer {
    48.         padding: .75em;
    49.     }
    50.  
    51.     &:focus,
    52.     &:hover {
    53.         cursor: pointer;
    54.  
    55.         img {
    56.             opacity: 0.7;
    57.         }
    58.     }
    59. }
    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:

  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

  3. kosovafan

    kosovafan Erfahrenes Mitglied

    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:
    1. <main>
    2.     <section class="cards">
    3.     {{ .Content }}
    4.     {{ range (.Paginator 6).Pages }}
    5.         <article>
    6.             {{ if .Params.cover }}
    7.             <figure>
    8.                 <img src="/static/img/{{ .Params.cover }}" alt="{{ .Title}} ">
    9.             </figure>
    10.             {{ end }}
    11.             <header>
    12.                     <h2>{{ .Title }}</h2>
    13.                     <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}" class="text-micro">
    14.                         {{ .Date.Format "02.01.2006" }}
    15.                     </time>
    16.             </header>
    17.             <div class="card-content">
    18.                 <p>
    19.                     {{ .Params.shorttext }}
    20.                 </p>
    21.             </div>
    22.             <footer>
    23.                 <a href="{{ .Permalink }}" title="{{ .Title }}" class="btn btn-brand">
    24.                     {{ i18n "more" }}
    25.                 </a>
    26.             </footer>
    27.         </article>
    28.     {{ end }}
    29.     </section>
    30. </main>
    Danke für die Hilfe.

    Mfg
    Silvio
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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).
     
  5. Sempervivum

    Sempervivum Erfahrenes Mitglied

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

    kosovafan Erfahrenes Mitglied

    Hallo,

    nein kein CMS ist Hugo

    HTML:
    1. <main>
    2.     <section class="cards">
    3.         <article>
    4.             <figure>
    5.                 <img src="/static/img/cover/social.jpg" alt="Social">
    6.             </figure>
    7.             <header>
    8.                     <h2>Social</h2>
    9.                     <time class="text-micro">
    10.                         01.01.2000
    11.                     </time>
    12.             </header>
    13.             <div class="card-content">
    14.                 <p>
    15.                     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.
    16.                 </p>
    17.             </div>
    18.             <footer>
    19.                 <a href="#" title="Social" class="btn btn-brand">
    20.                     Lesen
    21.                 </a>
    22.             </footer>
    23.         </article>
    24.     </section>
    25. </main>

    Code (CSS):
    1. .cards {
    2.     display: flex;
    3.     flex-wrap: wrap;
    4.     justify-content: space-between;
    5.     color: #1e1916;
    6. }
    7.  
    8. .cards article {
    9.     background-color: #cccbca;
    10.     flex-basis: 30em;
    11.     flex-grow: 1;
    12.     margin: 0 1em 1.5em 1em;
    13.     position: relative;
    14. }
    15.  
    16. .cards article figure {
    17.     padding: 0;
    18.     margin: 0;
    19.     overflow: hidden;
    20. }
    21. .cards article figure img {
    22.     opacity: 1;
    23.     width: 100%;
    24.     padding: 0;
    25.     margin: 0;
    26. }
    27.  
    28. .cards article header {
    29.     padding: .75em;
    30.     margin: 0;
    31. }
    32.  
    33. .cards article header h2 {
    34.     font-weight: bold;
    35.     padding: 0;
    36.     margin: 0;
    37. }
    38.  
    39. .cards article .card-content {
    40.     padding: .75em;
    41. }
    42.  
    43. .cards article .card-content p {
    44.     margin: 0 0 0.75em;
    45. }
    46.  
    47. .cards article footer {
    48.     padding: .75em;
    49. }
    50.  
    51. .cards article:focus, .cards article:hover {
    52.     cursor: pointer;
    53. }
    54.  
    55. .cards article:focus img, .cards article:hover img {
    56.     opacity: 0.7;
    57. }
    PS: Ich benutze im übrigen das Framework Hocus Pocus falls das wichtig ist.

    Danke
    Silvio
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Danke, jetzt ist es kein Problem, dieses zusätzliche CSS sollte die Ausrichtung liefern, die Du haben willst:
    Code (CSS):
    1.         .cards article {
    2.             display: flex;
    3.             flex-direction: column;
    4.         }
    5.         .cards article footer {
    6.             margin-top: auto;
    7.         }
     
  8. kosovafan

    kosovafan Erfahrenes Mitglied

    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:
    1. <main class="container">
    2.   <section class="cards">
    3.     <article class="card" style="background:url(society.jpg) center/cover no-repeat;">
    4.       <header>
    5.         <time class="text-micro">01.01.2000</time>
    6.         <h2>Test</h2>
    7.       </header>
    8.       <div class="card-content">
    9.         <p>
    10.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi.
    11.         </p>
    12.       </div>
    13.       <footer>
    14.         <a href="#" class="btn btn-brand">More</a>
    15.       </footer>
    16.  
    17.     </article>
    18.  
    19.     <article class="card" style="background:url(gentoo.jpg) center/cover no-repeat;">
    20.       <header>
    21.         <time class="text-micro">01.01.2000</time>
    22.         <h2>Test</h2>
    23.       </header>
    24.       <div class="card-content">
    25.         <p>
    26.           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.
    27.         </p>
    28.       </div>
    29.       <footer>
    30.         <a href="#" class="btn btn-brand">More</a>
    31.       </footer>
    32.     </article>
    33.  
    34.     <article class="card" style="background:url(media.jpg) center/cover no-repeat;">
    35.       <header>
    36.         <time class="text-micro">01.01.2000</time>
    37.         <h2>Test</h2>
    38.       </header>
    39.       <div class="card-content">
    40.         <p>
    41.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro numquam, ex nostrum enim nesciunt ab ut, veniam fuga doloribus sint excepturi.
    42.         </p>
    43.       </div>
    44.       <footer>
    45.         <a href="#" class="btn btn-brand">More</a>
    46.       </footer>
    47.  
    48.     </article>
    49.  
    50.     <article class="card" style="background:url(repression.jpg) center/cover no-repeat;">
    51.       <header>
    52.         <time class="text-micro">01.01.2000</time>
    53.         <h2>Test</h2>
    54.       </header>
    55.       <div class="card-content">
    56.         <p>
    57.           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.
    58.         </p>
    59.       </div>
    60.       <footer>
    61.         <a href="#" class="btn btn-brand">More</a>
    62.       </footer>
    63.  
    64.     </article>
    65.   </section>
    66. </main>
    Code (CSS):
    1. body {
    2.     background: black;
    3. }
    4.  
    5. section.cards {
    6.     display: flex;
    7.     flex-wrap: wrap;
    8.     justify-content: space-between;
    9. }
    10.  
    11. article.card {
    12.     display: flex;
    13.     flex-direction: column;
    14.     flex: 0 1 calc(50% - 1em);
    15.     margin: 1rem .25em;
    16.     padding-left: 1rem;
    17. }
    18.  
    19. article.card a {
    20.     margin-top: auto;
    21. }
    Danke & Gruß
    Silvio
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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 (Text):
    1. article.card a {
    2.     margin-top: auto;
    3. }
    dieses:
    Code (Text):
    1. article.card footer {
    2.     margin-top: auto;
    3. }
     
  10. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Auf meiner Testseite funktioniert es einwandfrei:
    button-bottom.png
    CSS aus Posting #6 mit folgenden Erweiterungen:
    Code (CSS):
    1.         .cards article footer {
    2.             margin-top: auto;
    3.             padding: .75em;
    4.         }
    und:
    Code (CSS):
    1.         .cards article {
    2.             background-color: #cccbca;
    3.             flex-basis: 30em;
    4.             flex-grow: 1;
    5.             display: flex;
    6.             flex-direction: column;
    7.             margin: 0 1em 1.5em 1em;
    8.             position: relative;
    9.         }
     
    kosovafan gefällt das.
  11. kosovafan

    kosovafan Erfahrenes Mitglied

    Hallo,

    ich habe justify-content raus genommen und es hat funktioniert.

    Danke
     
Die Seite wird geladen...