Article list image above titles and text?

  • I'm getting really frustrated with this because it seems like it should be something very simple.

    How do I get the image from the article list to appear above the article titles and excerpt text?

    I'm using the modified articleListItems.tpl from here Artikel Bildgröße ändern

    2 Mal editiert, zuletzt von LogixX (6. November 2017 um 21:35)

  • LogixX 6. November 2017 um 22:05

    Hat den Titel des Themas von „Article list image over titles and text?“ zu „Article list image above titles and text?“ geändert.
  • CSS
    #tpl_wcf_articleList {
        .box128 {
            display: flex;
            flex-wrap: wrap;
        }
    }

    Should do the trick.

    Btw: Use margin-top: 1%; in class .articleList > li:not(:first-child) instead of margin-top: 0px;, to keep the two boxes at the same height.

    Before:


    After:

    With flex-wrap: wrap; :

  • Looks like a bit of extra spacing could do with being added below the image to shove the forum title down a little. As it's sitting flush right below the image and doesn't really match the same spacing used between title and Yesterday 1:45pm, etc

  • Try my css part and let me see, if it works. You can just simply comment out your current part, or backup it in a textdocument.

  • Everything needs a little margin tweaking but it's displaying the way I wanted it to

    And you can fix the overlay area with this part:

    [Blockierte Grafik: https://i.imgur.com/PYorZKQ.gif]

    (filesize to big for file notes)

    I haven't tested it, but I would place the code inside here:

  • Ok, it seems like firefox got problems with margin percentages, but it isn't a big deal, to use px instead of %.

    I hope it works, because I only tested it with the developer tools.

  • I will take a look at it in the next 20 minutes.

    It's nice to see people help in the thread that actually know what they are doing. Instead of people spouting off nonsensical suggestions none stop. The suggestions have helped me sort out some things. Thanks.

Jetzt mitmachen!

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