CSS Problem - Text nicht bündig zur Grafik

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • CSS Problem - Text nicht bündig zur Grafik

    Liebe Coder-Kollegen,

    ich habe eine Grafik und rechts davon Text. Mein Problem: Der Text soll oben bündig zur Grafik positioniert sein, ist es aber nicht.
    Obwohl padding und margin auf 0 gesetzt sind und für img und h1 ein margin-top von 10px definiert ist, geht der Text 3px weiter runter also auf 13px (Windows IE und Firefox).
    Ich könnte ein Konstrukt bauen wo die Grafik 10px und der Text nur 7px runtergesetzt sind, aber das entspricht nicht meiner Anforderung, da es möglich sein muss, innerhalb der DIV den Text gegen irgendein anderes Element, z.B. Flash, iFrame, eine weitere DIV etc. auszutauschen. Da die anderen Elemente ausser dem Text richtig positioniert werden sind sie dann 3 pix höher und nicht mehr bündig zur Grafik, d.h. es muss einen Weg geben wie ich den Text bei einer margin-top: 10px Definition exakt auch auch 10px Abstand von oben setzen kann.


    Danke für jeden sachdienlichen HInweis

    Ike



    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html>
    4. <head>
    5. <title>Demo</title>
    6. <style type="text/css">
    7. * {
    8. margin: 0px;
    9. padding: 0px;
    10. }
    11. h1 {
    12. font: bold 10px/13px arial;
    13. float: left;
    14. vertical-align: top;
    15. }
    16. img {
    17. float: left;
    18. margin: 0px 10px 0px 0px;
    19. display: block;
    20. }
    21. div {
    22. width: 400px;
    23. display: block;
    24. margin: 0px 0px 10px 0px;
    25. }
    26. </style>
    27. </head>
    28. <body>
    29. <div>
    30. <img src="demo.jpg" width="150" height="150" alt="" />
    31. <h1>§§§gggMMM<br>§§§gggMMM</h1>
    32. <div style="clear: both"></div>
    33. </div>
    34. <div>
    35. <img src="demo.jpg" width="150" height="150" alt="" />
    36. <h1>§§§gggMMM<br>§§§gggMMM</h1>
    37. <div style="clear: both"></div>
    38. </div>
    39. </body>
    40. </html>
    Alles anzeigen
  • line-height und Code-Beispiel

    Hallo,
    wenn man line-height unter 10px setzt, dann drückt es zwar den Text nach oben, aber dann laufen die Zeilen des Textes ineinander und das kann ja nicht sein. Der Zeilenabstand muss ja unabhängig von dem Rand nach oben einstellbar sein.

    Ich habe ja ein Code-Beispiel hineingepackt, man braucht nur eine flächige Grafik in demo.jpg umbenennen und kann sich dann mal im Internet Explorer oben die Bündigkeit angucken.
    Die Oberkante des Textes ist 3 Pixel unter der Grafik.


    danke nochmal

    ike
  • Was ist, wenn du den Text in ein p-Tag steckst? Eventuell kannst du es dann separater behandeln, wie man es ja automatisch auch bei Flash oder einem iFrame tut. Per float könntest du dann das Bild umfließen lassen.

    Quellcode

    1. <img src="demo.gif" alt="" /><p>Text</p>
  • p und h1 sind ja in erster Linie erstmal nur Blockelemente. Durch den float:left und margin,padding:0px hat er eigentlich das genannte erreicht.

    Ich sag einfach mal, dass das Vorhaben nicht funktioniert. Eine Textzeile hat eben eine gewisse Höhe. Die Textzeile beginnt ganz oben bei 0px und der Text nimmt nicht 100% der Höhe ein. Und genau so sieht es auch aus. Änderst du die Zeichengröße auf Zeilenhöhe hast du den Erfolg. Aber bei mehr als einer Zeile siehts nunmal doof aus. Weil du die 2te Zeile nicht in ein extra Tag mit anderer Zeilenhöhe stecken kannst. Negatives padding wäre wohl eine Lösung. Funktioniert aber glücklicherweise nicht in allen Browsern ;)