HTML/CSS: Text über einem Bild => Zeilenumbruch entsteht

Es gibt 16 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    HTML/CSS: Text über einem Bild => Zeilenumbruch entsteht

    Ich habe derzeit das Problem, dass ich, wenn ich einen Text über einem Bild anzeigen lassen möchte, immer einen unerwünschten Zeilenumbruch bekomme.

    Mein Code sieht etwa so aus:

    HTML-Quellcode

    1. <div...zindex:1...><img.../></div><div...zindex:2...>TEXT</div>


    Was muss ich tun, damit der 2. Div-Tag keinen anschließenden Umbruch erzeugt? Ansonsten klappt das Übereinanderlegen von Text auf Bild.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    HTML-Quellcode

    1. <div id="outer-container">
    2. <div id="inner-image"><img src="" /></div>
    3. <div id="inner-text">Text im Bild</div>
    4. </div>


    Styling

    HTML-Quellcode

    1. #inner-image {
    2. position: absolute;
    3. top: 0;
    4. left: 0;
    5. }
    7. #inner-text {
    8. position: absolute;
    9. top: 0;
    10. left: 0;
    11. }


    das sollte funktionieren

    Danke erstmal. Ich werde es morgen in der Firma versuchen (dort habe ich den Quellcode). Ich melde mich dann nochmal.

    Span statt Div habe ich aber glaube ich schon versucht.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Funktioniert leider nicht. Wenn ich "absolute" angebe, sind Grafik und Text ganz oben im Dokument, aber nicht an der richtigen Stelle. Mit "relative" geht's auch nicht. Hier mal mein aktueller Code (Grafik ist hier richtig, Text ganz oben links im Dokument):

    HTML-Quellcode

    1. <div>
    2. <div><img style="position:relative;left:103px;" src="./proja_color_week_planned.png" width="857" height="16" border="0" alt="" /></div>
    3. <div style="position:absolute;left:0;top:0;color:black;">Stunden: <b>23,50 / <span style="color:#00ff00">80,00</span></b>, Status: <b>Vorbereitung</b></div>
    4. </div>
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Nein den Outer Container muss nicht relativ gesetzt werden. Elemente in diesem DIV werden dann Absolut in Bezug auf den äußeren Container gesetzt solange keine Top und Left angaben gemacht werden.

    Man siehe meine Beispielseite an, da funktioniert es ja.

    Sorry, aber es funktioniert leider immer noch nicht. ;)

    Ich habe es zunächst mit Span versucht. Auch da bleibt der Zeilenumbruch.

    Dann habe ich es wie in Dodos Beispiel versucht. Leider ist die Grafik dann zu weit nach unten verschoben. Hier noch etwas Code drumherum (wie man sieht, befindet sich das Ganze in einer Tabellenspalte):

    HTML-Quellcode

    1. <td style="padding-top:3px;padding-bottom:3px;" colspan="12">
    2. <div>
    3. <div style="position:absolute;"><img style="position:relative;left:103px;" src="./proja_color_week_planned.png" width="846" height="16" border="0" alt="" /><img style="position:relative;left:103px;" src="./proja_color_week_planned_outside.png" width="11" height="16" border="0" alt="" /></div>
    4. <div style="position:absolute;color:black;">Stunden: <b>29,75 / <span style="color:#00ff00">80,00</span></b>, Status: <b>Vorbereitung</b></span>
    5. </div>
    6. </td>


    Nochmal als Hinweis, falls das bisher nicht so gut rübergekommen ist: Das Übereinanderlegen von Bild und Text funktionierte tadellos. Nur der nachfolgende Zeilenumbruch störte mich.

    Edit: Ach ja, die Positionsangabe beim Bild (bzw. es sind zwei hintereinander) ist nötig, weil es links nicht am Anfang beginnen soll.

    EDIT 2: Es hat nun geklappt! Ich musste beim unteren DIV "relative" angeben (statt "absolute"). Hier der funktionierende Code:

    PHP-Quellcode

    1. <div>
    2. <div style="position:absolute;"><img style="position:relative;left:103px;" src="./proja_color_week_planned.png" width="846" height="16" border="0" alt="" /><img style="position:relative;left:103px;" src="./proja_color_week_planned_outside.png" width="11" height="16" border="0" alt="" /></div>
    3. <div style="position:relative;color:black;text-align:center;">Stunden: <b>29,75 / <span style="color:#00ff00">80,00</span></b>, Status: <b>Vorbereitung</b></span>
    4. </div>


    Ich danke euch!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Auch wenn es jetzt Funktioniert, ich glaube du hast da nochn paar Fehler drin, dass die Grafik bei mir soweit nach unten verschoben war habe ich extra gemacht um dieses top 0 und left 0 auszuschließen, das kam durch die Margin Positionierung des äußeren DIV-Containers.

    Du kannst die Positionsangabe in den Bildern löschen, da würde ich mit Padding arbeiten.

    HTML-Quellcode

    1. <div>
    2. <div style="position:absolute; padding-left: 103px;">
    3. <img src="./proja_color_week_planned.png" width="846" height="16" border="0" alt="" />
    4. <img src="./proja_color_week_planned_outside.png" width="11" height="16" border="0" alt="" />
    5. </div>
    6. <div style="position:abolute;color:black;text-align:center;">Stunden: <b>29,75 / <span style="color:#00ff00">80,00</span></b>, Status: <b>Vorbereitung</b></div>
    7. </div>


    Zudem hast du beim Div für den Text hinten vergessen das Div zu schließen und vielleicht musst du deswegen relativ angeben, weil somit der äußere Div nicht existierte.

    Sollen die beiden Bilder neben einander oder unter einander in der ersten Div sein??

    Das mit dem nicht geschlossenen Div ist mir irgendwann auch aufgefallen (da stand noch span). Ich hab's auf DIV geändert und es funktionierte immer noch alles einwandfrei. Die Bilder müssen (und sind) direkt nebeneinander.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Aber das macht man nicht so, dafür lieber mit Floating arbeiten. Mit Positions angaben muss man ganz vorsichtig sein, damit hatte ich immer oft probleme in verschiedenen Browsern, mit padding ist da sicherer und wenn die Images nebeneinander sollen würde das so aussehen

    HTML-Quellcode

    1. <div>
    2. <div style="position:absolute; padding-left: 103px;">
    3. <img style="float: left;" src="./proja_color_week_planned.png" width="846" height="16" border="0" alt="" />
    4. <img style="float: left;" src="./proja_color_week_planned_outside.png" width="11" height="16" border="0" alt="" />
    5. <div style="clear: both;"></div>
    6. </div>
    7. <div style="position: abolute; color: black; text-align: center;">Stunden: <b>29,75 / <span style="color:#00ff00">80,00</span></b>, Status: <b>Vorbereitung</b></div>
    8. </div>


    Ist die Seite für die das machst öffentlich einsehbar bzw. kannst du mal eine Beispielsseite machen? Dann kann ich dir den CSS validen Code geben, der auch in allen Browsern richtig angezeigt wird.

    Danke, ich werde das am Montag mal so umsetzen und schauen, ob's immer noch richtig aussieht. Die Seite ist nicht öffentlich, sondern läuft in einem Intranet. Da wir nur einen einzigen Browser verwenden, muss der Code eigentlich nicht für alle Browser optimiert werden.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Achso, naja aber trotdem, mit jedem Browser Update wird ja auch das CSS angepasst an den Standard, heißt was früher mal verziehen wurde kann nach einem Update nicht mehr erlaubt sein.
    Halt nur so zur Info, das nicht ständig den Code anpassen musst =)

    Ich habe es nun mit deinem Code getestet, aber dadurch ist die Grafik viel zu weit unten. Ich lasse es jetzt so, wie ich es ursprünglich hatte, denn so geht es ja einwandfrei.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

Facebook
Telefonspende