Profilfeld Anordnung

  • Hi!

    Ich erstelle gerade ein Profilfeld. Feldtyp ist Multiselect. Als PHP-Klasse nutze ich SelectOptionsUserOptionOutput.

    Die Auswahloptionen sind:

    0: Keine Auswahl

    1: <a href="" class="jsTooltip" title="Kurzschwert" target="_blank"><img src="/images/items/default_item.png" width="128" height="128" alt"Kurzschwert"></a><br>Kurzschwert

    2: <a href="" class="jsTooltip" title="Schwert" target="_blank"><img src="/images/items/default_item.png" width="128" height="128" alt"Schwert"></a><br>Schwert

    Das ganze ist für ein Rollenspiel. Der Spieler kann sich Ausrüstungsgegenstände erwärben, die in seinem Profil zu sehen sind.

    Derzeit sieht es so aus:

    Untereinander würde das ganze jedoch unendlich in die Länge ziehen, darum suche ich eine Möglichkeit es in mehreren Reihen zu gruppieren.

    Ziel wäre dies:

    Mit Display Ruby Base bekomme ich es schon näher in die Richtung die ich möchte.

    Jedoch ist hier der Text neben dem Bild, nicht unter dem Bild. Auch einen Abstand zwischen den einzelnen Grafiken und dem Text bekomme ich nicht hin.

    Kann mir hier jemand weiterhelfen?

    Vielen Dank und Grüße von Seferd

  • Seferd

    Untereinander würde das ganze jedoch unendlich in die Länge ziehen, darum suche ich eine Möglichkeit es in mehreren Reihen zu gruppieren.

    Dies könntest du u.a. mit CSS Grid oder auch Flex lösen, wie folgende Beispiele zeigen:

    CSS: Flex.css
    [data-page-identifier="com.woltlab.wcf.User"] #about section dd {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2em; /* Spaltenabstand */
        row-gap: 10px; /* Zeilenabstand */
    }

    Die o.g. Beispiele müssten jedoch ggfls. noch angepasst werden, da diese alle dd-Elemente im About-Tab des Benutzerprofils ansprechen würden. Da aus deinem Beitag sowie auch den Quellcode deines Screenshots nicht hervor ging ob es sich nur um einen einzelnen Bereich handelt oder um mehrere, müsstest du den Quellcode noch entsprechend anpassen. Würde es sich z.B. nur um den ersten Bereich im Benutzerprofil handeln, so könntest du mit dem Pseudo-Elemente :first-child nur den ersten Bereich ansprechen.

    Gruss,
    Andreas

    _________ Belarusinfo.ru _________

    Informationen, Nachrichten und Diskussionsforum zu Belarus (Weißrussland)

    _________ WCS-Playground.ru _________

    Deine Community für deine WCS oder dem WBB

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!