Profilfeld Anordnung

Seferd · Jan 14th 2023

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

Belarus · Jan 15th 2023

Seferd

Quote from 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: Grid.css

[data-page-identifier="com.woltlab.wcf.User"] #about section dd {
    display: grid;

    /* Darstellung der Spalten mit Pixel- oder Brucheinheiten */
    /* Spalten (Columns) in Pixel-Angabe (hier 4 Spalten a 200px)*/
    grid-template-columns: 200px 200px 200px 200px;
    /* ... ODER ... */
    /* Spalten (Columns) in Bruch-Einheiten (hier 4 Spalten) */
    grid-template-columns: repeat(4, 1fr); 

    grid-column-gap: 10px; /* Spaltenabstand */
    grid-row-gap: 10px; /* Zeilenabstand */
}

Display More

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

Seferd · Jan 21st 2023

Belarus Vielen Dank, genau was ich suchte!

Profilfeld Anordnung

Participate now!

Share