Frage von Gegengift 26.05.2011

Leerraum zwischen 2 Bildern durch Zeilenumbruch im Quelltext HTML / CSS

  • Hilfreichste Antwort von derwendtde 26.05.2011
    1 Mitglied fand diese Antwort hilfreich

    Hi. Durchaus seltsam und mit CSS eigentlich nicht zu erklären. Welchen Editor benutzt Du? Bei manchen Editoren kann man irgendwo in den Optionen festlegen, wie eine Zeilenschaltung interpretiert werden soll. Diese Option sollte auf "Linux" stehen, keinesfalls auf "Windows". Vielleicht ist auch die Rede von CR & LF, CR oder LF, dann bitte CR nehmen.

    Hintergrund: Besonders "schlaue" Editoren versuchen Dir Arbeit abzunehmen und hauen ohne Markup (da müsste ja dann ein =br / > stehen) einfach die Abstände rein.

    Teste bitte mal folgendes: Einfach diese CSS-Anweisung schreiben und die Seite neu laden:

    br, cr, lf {height:0; margin:0; padding:0; margin-left:20000px; }
    

    Wenn der Abstand dadurch weggeht, ist es das Problem, das ich eingangs beschrieben habe. Evtl kann Dein Editor auch "Steuerzeichen anzeigen", also Tabs und Zeilenumbrüche, man kennt so was von Word mit den Absatzmarken. Dann wird auch sichtbar, was am Zeilenende getan wird.

    Ach ja, zum Schluss bitte noch gucken, dass die Zeichencodierung der HTML-Datei auf "UTF-8 (ohne BOM)" steht.

  • Antwort von Equinoxe 26.05.2011
    4 Mitglieder fanden diese Antwort hilfreich

    Was willst du denn genau machen? Wie soll das gewünschte Endergebnis aussehen?

  • Antwort von kuechentiger 27.05.2011
    2 Mitglieder fanden diese Antwort hilfreich

    Was ist das?

    <img></img>
    

    IMG hat kein End-Tag!

    Und ob die IMG-Tags im Quelltext hintereinander oder untereinander stehen ist völlig egal, solange nicht mit css etc. eine Formatierung gemacht wird oder mit br ein Umbruch, werden sie immer nebeneinander angezeigt. Macht dein Editor einen unsichtbaren Umbruch rein?

    Wenn sie ohne Abstand untereinander sein sollen, dann macht man das z.B. so:

    img {float:left; clear:left}
    
  • Antwort von derwendtde 28.05.2011
    1 Mitglied fand diese Antwort hilfreich

    So. Ich habe 5 Versuche gebraucht:

    • Beide Bilder müssen in irgend einen Block-Container. So hab ich ihn auch genannt. Dann wird's auch valide.
    • Mit HTML5 Doctype und /> XHTML Notation habe ich es ebenfalls probiert, keine Änderung.
    • Also hilft wirklich nur CSS siehe 2. Bild

    Ich hoffe, die Änderungen sind sichtbar, die Markierung ist ganz leicht heller als der Hintergrund.

    Browser war in beiden Fällen Opera 11 auf Mac OS X

    Valide durch Container, aber mit Abstand. Browser: Opera
    Valide durch Container, aber mit Abstand. Browser: Opera
    Valides 4.01 strict mit Einfach-Notation und :first-child Workaround f. margin
    Valides 4.01 strict mit Einfach-Notation und :first-child Workaround f. margin
Du kennst die Antwort? Frage beantworten
Bitte noch eine Antwort ... Frage erneut stellen
Diese Frage und Antworten teilen:

Verwandte Fragen


Verwandte Tipps

Fragen Sie die Community –

anonym und kostenlos!