style.css Datei

  • Hallo zusammen,


    bin leider noch ein Anfänger und lerne gerade mit HTML und CSS zu arbeiten.


    Ich wollte den Rezeptkasten von springlane nachbauen. Zwar habe ich das irgendwie hinbekommen, aber nicht ganz.

    Leider weiß ich nicht, was ich falsch mache.


    Link zum Rezept-Kasten: https://www.springlane.de/prod…hochleistungsmixer-942900


    Folgenden Code habe ich in der .css Datei hinterlegt:


    .mag--teaser-wrapper .teaser {margin-bottom: 16px; padding: 0px 8px 0px 8px; max-width: 25%; flex: 0 0 25%;}

    .teaser .teaser-content {padding: 1rem .5rem 1rem .5rem; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1.5px solid #e2e2e2; border-top: 0;}

    .teaser a {display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; text-align: center; text-decoration: none;}

    .teaser .tag {line-height: 1.6; font-size: .625rem; border-radius: .1875rem; padding: .25rem .5rem .25rem .5rem; top: calc(-1 * ((.75rem + .625rem) / 2)); position: absolute; text-transform: uppercase; background: #ffea8a;}

    .teaser img {flex-shrink: 0; width: 100%;} .magazine--teaser {text-align: center;}

    .grid-container {width: 100%; margin-left: auto; margin-right: auto; float: none; padding-left: 16px; padding-right: 16px; max-width: 70rem;}

    .grid-row {margin-left: -16px; margin-right: -16px; width: calc(100% + 32px);}


    Diesen Code habe ich bei mir im HTML eingefügt:

    <div class="grid-row mag--teaser-wrapper grid_wrapper"><div class="grid-6 grid-md-3 teaser" data-wp-post-id="81570"><a href="https://www.springlane.de/magazin/rezeptideen/klassisches-basilikumpesto/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M81583-Shootings_Magazin_2018_08_09_Basilikum_Pesto-1-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Brotaufstrich</span><p>Wie beim Lieblings-Italiener: Klassisches Basilikumpesto</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="32647"><a href="https://www.springlane.de/magazin/rezeptideen/ananas-mango-smoothie-kokosmilch/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M33228-Ananas-Mango-Smoothie-mit-Kokosmilch_featured-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Clean</span><p>Karibischer Ananas-Mango-Smoothie mit Kokosmilch</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="7395"><a href="https://www.springlane.de/magazin/rezeptideen/selbstgemachte-erdnussbutter/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M86611-Erdnussbutter-selber-machen_4_7395-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Grundrezepte</span><p>Erdnussbutter selber machen</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="63976"><a href="https://www.springlane.de/magazin/rezeptideen/himbeer-kokos-smoothie-bowl/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M64743-Himbeer-Kokos-Smothie-Bowl_featured-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Shakes &amp; Smoothies</span><p>Dein Schüsselglück: Himbeer-Kokos-Smoothie-Bowl</p></div></a></div></div>


    Bei mir werden die Rezept-Kasten untereinander dargestellt und nicht responsive.


    Wäre sehr dankbar für Hilfe.


    Beste Grüße

    Manu

  • Du enthälst uns leider vor dass du ein Framework verwendest. Das liegt uns nicht vor. Es ist deshalb gut möglich dass sich dein CSS und das Framework gegenseitig stören. Sowas passiert Anfängern sehr häufig.


    Als Anfänger solltest du nicht zu viel auf einmal wollen. Bevor du dich nicht ausreichend mit HTML und CSS auskennst solltest du nicht gleichzeitig Frameworks verwenden. Wenn du ein Framework verwendest solltest du zudem zunächst dessen Möglichkeiten verwenden.


    Und dein Lernmaterial scheint veraltet zu sein. Im Internet finden sich leider sehr viele veraltete und sogar falsche Informationen. Besorge dir aktuelles Lernmaterial mit HTML5 und CSS3.

  • Kannst du einerseits bitte deinen Code mit den hier gegebenen Mittel ordentlich rein kopieren?

    Code
    1. // So hier zum Beispiel

    Und andererseits, woher hast du das?

    Bevor man etwas Programiert bzw Entwickelt sollte man sich Fragen wozu mache ich das. Wenn du Lernen willst dann denke dir lieber etwas eigenes Einfachereres aus, denn das was die da gebaut haben ist nicht mal so eben nachgebaut. Auch für mich mit mittlerweile 3 Jahren Erfahrung, schmier dir das so einfahc hin, muss ich selber schauen und bauen und Testen und Fluchen und... lassen wir das :D.


    Probier dich mal an Bootstrap aus und dann kannst du zu Material Design Bootstrap gehen, die haben da sowas mal gestyled.


    Sehr zu Empfehlen für den Anfang: https://www.udemy.com/


    Mit dem habe ich Angefangen: https://www.udemy.com/der-komplette-webentwickler-2/

    bezhalste einmal 11 Euro und kannst eine Menge Grundlagen lernen. Nach und nach wirst du es nicht mal ansatzweise so machen wie da erklärt bzw nicht alles, aber es ist auf jedenfall wichtig zu wissen welche Grundlagen es gibt.

  • Hier ist der Code von mir:


    .teaser .teaser-content {

    padding: 1rem .5rem 1rem .5rem;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    border: 1.5px solid #e2e2e2;

    border-top: 0;

    }


    .teaser .tag {

    line-height: 1.6;

    font-size: .625rem;

    border-radius: .1875rem;

    padding: .25rem .5rem .25rem .5rem;

    top: calc(-1 * ((.75rem + .625rem) / 2));

    position: absolute;

    text-transform: uppercase;

    background: #ffea8a

    }


    .teaser p {

    margin: auto;

    line-height: 1.5;

    font-size: 18px;

    font-family: "Brandon Text Medium", Helvetica, Verdana, Arial, sans-serif;

    font-weight: normal;

    }


    .teaser a {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

    width: 100%;

    text-align: center;

    text-decoration: none;

    }


    .teaser img {

    flex-shrink: 0;

    width: 100%;

    display: block;

    max-width: 100%;

    max-height: 100%;

    height: auto;

    }


    .mag--teaser-wrapper .teaser {

    margin-bottom: 1rem;

    padding: 0rem .5rem 0rem .5rem

    }


    .grid-md-3 {

    max-width: 25%;

    flex: 0 0 25%;

    width: 100%

    min-heidht: 1px;

    }


    .grid-row {

    margin-left: -16px;

    margin:right: -16px;

    width: calc(100% + 32px);

    display: flex;

    flex-wrap: wrap;

    }


    .emotion--container.emotion--mode-rows .emotion--element {

    position: relative;

    top: 0;

    left: 0;

    float: left;

    vertical-align: tio;

    padding-left: 1rem;

    padding-bottom: 1rem;

    margin-left: inherit;

    }



    Im Anhang ein Bild, wie es jetzt bei mir aussieht.

    Bekomme es leider nicht hin :(