Template Box nimmt CSS nicht an und zeigt kein Bild

  • Betroffene Version
    WoltLab Suite 5.2

    Hallo zusammen,

    in meinem Dashboard auf https://wasserlasser.com/index.php?dashboard/ möchte ich eine Box anzeigen lassen, die einen Hintergrund hat.

    Dazu habe ich folgenden HTML Code

    Code
    <div class="hero-image">
      <div class="hero-text">
        <h1 style="font-size:50px">Wasserlasser AddOns</h1>
        <p>Your source for AddOns</p>
        <button>Download them now</button>
      </div>
    </div>

    Dann möchte ich diese Box noch formatieren und habe folgendes CSS

    Ich habe beim Bild und dessen URL schon alles probiert, aber es wird nicht angezeigt.

    Wo liegt mein Denkfehler?

    Gruss


    Wasserlasser

  • Du überlappst mit hero-text dein div hero-image. Wenn du also hergehst und setzt den Text aus hero-text in hero-image würde es klappen. Oder du definierst das Hintergrundbild in hero-text

    Gruß

    Marcel

  • Ich würde in folgende Richtung gehen

    HTML
    <div class="box" data-box-identifier="com.woltlab.wcf.genericBox175">
        <div class="boxContent">
            <h1>Wasserlasser AddOns</h1><p>Your source for AddOns</p>
            <button>Download them now</button>
        </div>
    </div>

    Ist natürlich die Frage, wie es am Ende genau aussehen soll. Einiges brauchst du aus dem Beispiel von w3schools benötigst du ja nicht. Darfst ja nicht vergessen, dass du nicht in einer komplett neues Seite arbeitest ;)

    Mein Tipp: Ich würde mir das Ergebnis gleich mal ansehen und dann Punkt für Punkt was dich dann noch stärt abändern. background-size: cover; passt z.B. nicht zu deinem Bild, sieht nicht gut aus ^^

  • Danke euch beiden, das stimmt schon mal so weit.

    Die Grafik ist da und es sieht auch schon sehr gut aus.

    Wieso muss ich der Box aber nochmal sagen wer sie ist?

    Code
    <div class="box" data-box-identifier="com.woltlab.wcf.genericBox175">
        <div class="boxContent">
            <h1>Wasserlasser AddOns</h1><p>Your source for AddOns</p>
            <button>Download them now</button>
        </div>
    </div>

    So verstehe ich zumindest diesen Teil des HTML Codes oder warum amchen wir hier nochmal die classe Box und den identifier rein?

  • Sonst kannst du sie alleine nicht im css ansprechen, sondern würdest alle Boxen ansprechen.

    Ich spreche andere Boxen doch auch direkt an, ohne dass ich die so im HTML benennen. Geht alles oder habe ich durch Dummheit da irgendwie Glück gehabt?

  • Ich weiss auch nicht was ich da mache, denn da macht nix Sinn.

    Das Bild hat keine volle Grösse, die Schrift hat nicht die Farbe und ich muss der Box sagen welche ID sie hat, was ich sonst nie machen muss.

    Kaum ist die Sonne wieder da läuft nix mehr *lol*

  • Ich habe das CSS ein bisschen geändert und schon geht alles

    Warum es geht? Keine Ahnung...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!