Leerraum zwischen 2 Bildern durch Zeilenumbruch im Quelltext HTML / CSS

... komplette Frage anzeigen

4 Antworten

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 bewerten Vielen Dank für Deine Bewertung
Kommentar von derwendtde
26.05.2011, 23:45

Oups, cr und lf können aus dem CSS raus, sind ja gar keine HTML-Elemente.

0

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

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Gegengift
28.05.2011, 23:11

Danke..

Also wie gesagt. Es reicht wenn ich die IMGs einfach hintereinander ohne Umbruch und ohne Leerzeile notiere. Da die IMGs jetzt ja in einem übergeordneten Container stehen.. (vorher war es das Gleiche eben mit BODY). Da die IMGs eben Inline Elemente innerhalb von BODY oder eben DIV sind, wird logischerweise ein Abstand angezeigt, wenn ich zwischen 2 Inline-Elementen einen Umbruch oder eine Leerzeile mache.

Der Denkfehler ist einfach, dass man grundsätzlich bei IMG von einem Blockelement ausgeht - dann dürfte der Abstand ja nicht sein... Aber bei Inline Elementen eben...

Das läuft aufs Gleiche raus (Abstand/ohne Abstand):

<div>
<span>MIT</span>
<span>ABSTAND</span>
</div>



<div>
<span>OHNE</span><span>ABSTAND</span>
</div>
0

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 bewerten Vielen Dank für Deine Bewertung
Kommentar von Gegengift
27.05.2011, 19:35

Danke..

Also IMG hab ich nur hier im Forum falsch geschrieben. Ist schon alleinestehend notiert.

Also beide Bilder kommen hintereinander und dazwischen bildet sich ein 5px breiter Leerraum, wenn ich im Quelltext das zweite Bild in eine neue Zeile schreibe..

0

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

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Gegengift
26.05.2011, 22:21

Beide Bilder sollen ohne Abstand aneinanderstoßen. Padding und Margin und Border Null bringt nichts..

Nur wenn ich im Quelltext so notiere

<img></img><img></img>

verschwindet der Abstand zwischen den Bildern.

So notiert hab ich einen kleinen Abstand

<img></img>

<img></img>
0

Was möchtest Du wissen?