HTML & CSS - Box-Überschrift auf HTML Seite mit Bild versehen

    Affected Version
    WoltLab Suite 5.3

    Moin zusammen,


    ich versuche gerade auf einer eigenen HTML-Seite Boxen zu erstellen (das klappt an sich auch), welche dann später im Feinschliff mit CSS verschönert werden sollen (das klappt an sich auch). Nun möchte ich in der Boxüberschrift jedoch anstelle eines z.B. FontAwesome-Icons ein entsprechend großes Bild anzeigen lassen. Füge ich das Bild nun allerdings ein, wird dieses auf der eigentlichen Seite nicht angezeigt. Habe schon diverse Möglichkeiten probiert aber bin da bisher nicht viel weiter gekommen.

    Mein HTML-Code sieht bisher so aus:


    Anschauen kann man sich da ganze hier: https://craftunion.org/testseite/


    Das "logo_klein.png" soll nun vor dem "Clan Allgemein" angesiedelt werden. Weiß da jemand, wo ich den Fehler gemacht habe?




    Viele Grüße und einen schönen Sonntag

    • Best Answer


    Versuch es mal damit. Im Bilder-Pfad haben die .. vor dem /images gefehlt, dadurch konnte kein Bild geladen werden. Davon unabhängig wurde der Klasse .testBild keine Breite / Höhe sowie Eigenschaft (display) zugewiesen, dadurch hatte die Klasse eine Breite von 0px - hätte also ohnehin nichts angezeigt. Mit den Werten kann und müsste natürlich rumgespielt werden.


    (Das display: flex; beim Titel bewirkt das sowohl das Bild auch die eigentliche Überschrift in einer Linie angezeigt werden)

    Ahh, es kann manchmal so einfach sein. Danke dir, daran habe ich gar nicht gedacht. Dann werde ich damit mal herumspielen :)



    Viele Grüße

    Ich muss doch tatsächlich nochmal nachfragen. Die Hilfestellung von SgtKaneki war sehr hilfreich und die Boxen sehen nun auch so aus, wie sie aussehen sollen. Aktuell scheitert es jedoch daran die gesamten Boxen zu zentrieren. Hat da jemand noch eine gute Lösung für?

    mit center funktioniert das leider nicht, dann zerstückelts das ganze Design.



    Viele Grüße

    Mir selbst erscheint es nicht unbedingt genial, aber:


    Code
    .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    margin-left: 29.1666666%;
}


    hat den gewünschten Effekt. Ich habe lediglich den Abstand nach links zu den vorhandenen Anweisungen hinzugefügt.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

    Wenn ich eine bessere Idee gehabt hätte, hätte ich sie Dir nicht vorenthalten. Es ist nur so ein Gefühl, dass es auch schöner geht.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

    Wenn die Boxen einfach nur mittag angezeigt werden sollen vom Content Bereich, wäre die einfachste und vorallem auch sauberste Lösung folgende, einfach bei dem obigen Code von mir der Klasse .ApplicationFormGen { zusätzlich ein: justify-content: center; hinzufügen.

    Stimmt, genau das war es, was mir die ganze Zeit durch den Kopf ging, aber ich kam nicht drauf. Diese Lösung erspart die Berechnung des margins und funktioniert auch bei anderen Boxbreiten oder weiteren Boxen automatisch.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

    Quote from knaffi

    Das zeigt jedoch dann logischerweise nur den Box-Titel mittig

    NACHTRAG: Mein Fehler - hatte übersehen dass ich im obigen Codeschnipsel noch .boxTitle drin stehen hatte, das sollte natürlich raus. Entschuldige.

    Quote from norse

    Stimmt, genau das war es, was mir die ganze Zeit durch den Kopf ging, aber ich kam nicht drauf. Diese Lösung erspart die Berechnung des margins und funktioniert auch bei anderen Boxbreiten oder weiteren Boxen automatisch.

    Alternativ hätte man auch mit margin: 0 auto; arbeiten können, dadurch wird die Box auch zentriert. Viele Wege führen nach Rom :)

    Quote from SgtKaneki

    Alternativ hätte man auch mit margin: 0 auto; arbeiten können,


    Das hatte ich versucht, es geht nicht.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

    Quote from SgtKaneki

    NACHTRAG: Mein Fehler - hatte übersehen dass ich im obigen Codeschnipsel noch .boxTitle drin stehen hatte, das sollte natürlich raus. Entschuldige.

    Haha, da hätte ich auch selber drauf kommen können :D


    EDIT: Funktioniert zwar, dass die Boxen nun mittig sind, jedoch ist auch von der linken Box der Titel mittig.

Participate now!

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

Register Yourself Login