Text auf Bild mit <span> funktioniert nicht

  • Hallo Zusammen,
    Ich bin ziemlicher Anfänger, was das Gestalten von Websites mit HTML/CSS angeht. Aktuell arbeite ich an einer Website über Wordpress m.H. eines Childthemes.

    Ich versuche nun gerade einen Text auf einem Bild zu platzieren und bin genau dieser Anleitung gefolgt.

    Wenn es aber zu dem Schritt kommt:

    Code
    .bildmitbildunterschrift span {    
    background-color: red;    
    position: absolute;    
    bottom: 0;
    }

    Dann platziert sich mein Text einfach nicht auf dem Bild sondern bleibt konsequent darunter, Hat jemand eine Idee, woran das liegen könnte? Gibt es vllt eine Rule für irgendwas (?) die ich außer Kraft setzen muss?


    Vielen Dank im Voraus!

    Tanja

  • Hi,


    hast du das Bild selber mit position: relative; relativ positioniert?


    Code
    .bildmitbildunterschrift {
        width: 320px;
        position: relative;
        border: 5px solid red;
    }

    Ist ein bisschen schwierig zu sagen, wenn du nur einen Teil deines Codes postest :)

  • Zitat

    Code

    1. .bildmitbildunterschrift span {
    2. background-color: red;
    3. position: absolute;
    4. bottom: 0;
    5. }

    Dann platziert sich mein Text einfach nicht auf dem Bild sondern bleibt konsequent darunter

    Das Problem hatte ich auch, als ich versucht habe, es nachzustellen, aber es war eine Täuschung: Die Unterschrift war nicht unter, sondern auf dem Bild, aber weil die Hintergrundfarbe nicht teiltransparent war, hatte es den Anschein, dass sie darunter lag. Macht man die Hintergrundfarbe transparent, funktioniert es:

    Wie Du siehst, empfehle ich außerdem, die neuen semantischen Tag figure und figcaption zu verwenden.

Jetzt mitmachen!

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