nicht angemeldet
Störender Abstand zwischen Grafiken
Hallo,
ich habe in meiner HTML Seite mehrere Grafiken, die alle ohne Abstand aneinander gefügt werden sollen. Der Browser fügt allerdings trotz margin=0 und padding=0 immer einen kleinen Abstand zwischen die Bilder. Wie kann ich den Abstand beseitigen?
Grüße,
Katharina
HTML:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/formate.css">
</head>
<body style="margin:0px; padding:0px;">
<img src="images/test.gif" vspace="0" hspace="0"/>
<img src="images/test.gif" vspace="0" hspace="0"/>
<img src="images/test.gif" vspace="0" hspace="0"/>
</body>
</html>
CSS:
img
{
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
}
-
Abgesehen von deinen vspace- und hspace-Angaben, die mir so nicht einmal bekannt sind, wird der Fehler wohl im Internet Explorer vorliegen, und der Abstand 3 Pixel betragen, nicht? =)
Die Lösung ist einfach: Schreibe alle 4 Bilder in eine Zeile, ohne Leerstelle zwischen den <img> tags, dann sollte es gehen....
Grüße
DeadDreamer
-
hallo,
Abgesehen von deinen vspace- und hspace-Angaben, die mir so nicht einmal bekannt sind
Das könnten sie aber, wenn du SELFHTML gelesen hättest, insbesondere das, was unter "Erläuterung" zusammengefaßt ist.
Die Lösung ist einfach: Schreibe alle 4 Bilder in eine Zeile, ohne Leerstelle zwischen den <img> tags, dann sollte es gehen....
Das könnte tatsächlich helfen. Trotzdem kann es, abhängig von der Größe der Einzelgrafiken, passieren, daß bei klein eingestellten Browserfenstern ein Umbruch dazwischengesetzt wird. Um das zu vermeiden, könnte noch nowrap eingesetzt werden.
Grüße aus Berlin
Christoph S.
-
hallo,
Abgesehen von deinen vspace- und hspace-Angaben, die mir so nicht einmal bekannt sind
Das könnten sie aber, wenn du SELFHTML gelesen hättest, insbesondere das, was unter "Erläuterung" zusammengefaßt ist.
Die Lösung ist einfach: Schreibe alle 4 Bilder in eine Zeile, ohne Leerstelle zwischen den <img> tags, dann sollte es gehen....
Das könnte tatsächlich helfen. Trotzdem kann es, abhängig von der Größe der Einzelgrafiken, passieren, daß bei klein eingestellten Browserfenstern ein Umbruch dazwischengesetzt wird. Um das zu vermeiden, könnte noch nowrap eingesetzt werden.
Grüße aus Berlin
Christoph S.
Hallo nochmal,
Euer Vorschlag hat geklappt - was mich wirklich verwundert.
Habe allerdings jetzt ein ganz anderes Problem: Die Bilder stehen in Tabellenzellen, die alle margin usw auf 0 gesetzt haben. Hier funktioniert das nicht. Ich habe den Bildern eine Höhe von 60px gegeben und der Tabellenzelle auch (im td und tr). Im Browser habe ich die Grafik jetzt ausgemessen und sie ist nur 58 px groß.
Könnt Ihr mir sagen, warum er die 60px nicht annimmt?
Katharina
-
Hallo,
Die Lösung ist einfach: Schreibe alle 4 Bilder in eine Zeile, ohne Leerstelle zwischen den <img> tags, dann sollte es gehen....
Euer Vorschlag hat geklappt - was mich wirklich verwundert.
Das ist nicht verwunderlich. Bilder sind im Textkontext Elemente, die sich in Textzeilen einordnen. Was erwartest Du bei
<p>
H
a
l
l
o
</p>als Ausgabe?
Habe allerdings jetzt ein ganz anderes Problem: Die Bilder stehen in Tabellenzellen, die alle margin usw auf 0 gesetzt haben. Hier funktioniert das nicht.
Das ist das selbe Problem in anderer Form. Die Bilder stehen in den Tabellenzellen auf der Textgrundlinie. Dabei bleibt unten Platz für Unterlängen z.B. bei "g".
Wenn die Bilder der einzige Inhalt der Tabellenzellen sind, dann hole sie mit display:block aus dem Textkontext, ansonsten setzte sie mit vertical-align:bottom auf die absolute Grundlinie.
viele Grüße
Axel
-
-
Das könnten sie aber, wenn du SELFHTML gelesen hättest, insbesondere das, was unter "Erläuterung" zusammengefaßt ist.
Bin ehrlich gesagt gleich mit CSS eingestiegen nach kurzem table-gefummel und code nun in strict, von daher weiss ich das nicht ;)
Grüße
DeadDreamer
-
-