Abstand zwischen zwei Bildern lässt sich nicht verringern

firebird

Hallo,
ich wollte ein Logo mit einer Linie(Bilddatei) vom Inhalt der Seite trennen. Allerdings war mir der Standard-Abstand zwischen logo und der Linie zu gross, aber er lässt sich irgendwie nicht verringern.Was mache ich falsch?

Grevas

src="logo.png" erstmal..

Ansonsten keine Ahnung was du sonst noch in deinen CSS Dateien definiert hast.

mach mal

HTML

#pic1, #pic2 {
 display: block;
 padding: 0;
 margin: 0;
}
#pic1 {
    margin-bottom: 2px;
}

synaptic

haste das mal irgendwo als link oder kannste des hochladen? bei so bilderdingern is immer doof, wenn selber nich gucken/testen kann

JFM

Bei meiner letzten Internetseite war folgendes:
Aus Gründen der Übersichtlichkeit habe ich jeden IMG-Tag in eine eigene Zeile geschrieben:

Code

<img src="" id="" />
<img src="" id="" />

Resultat: Abstand zwischen den Bildern (Leerzeichen?!), auch mit margin oder padding nicht zu entfernen.
Bei der folgenden Schreibweise:

Code

<img src="" id="" /><img src="" id="" />

Folge: Kein Abstand ...
Vielleicht ist es bei dir genauso.
In meinem Fall habe ich das einfach als Lösung akzeptiert und mich nicht weiter damit beschäftigt.

Keine Ahnung ob dieses verhalten bei Inline-Elementen normal ist und ein Leerzeichen immer ausgegeben wird ... ?!
Andererseits kann ich mich nicht daran erinnern, das dieses Problem schon mal aufgetreten ist. Kann aber sein das ich da noch nicht mit xhtml gearbeitet habe ..

firebird

Ich weiss nicht wie ich die Dateien hochladen kann, aber hier ist der Inhalt aller Dateien.
inde.htm:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<link rel="stylesheet" type="text/css" href="layout.css" />
<title>example</title>
</head>


<body>


    <div id="box">
        <img id="pic1" src=logo.png alt="XY-GmbH" />
        <img id="pic2" src=line.png alt="" />
    </div>


</body>
</html>

Alles anzeigen

layout.css:

Code

body {
    text-align: center;
    background-color: #404A37;
    font-family: arial,sans-serif;
}
#box {
    margin-right: auto;
    margin-left: auto;
    width: 780px;
    height: auto;
    background-color: #FF0000;
    text-align: center;
}
#pic1 {
    margin-top: 0px;
    margin-bottom: 0px;
    }
#pic2 {
    margin-top: 0px;
    margin-bottom: 0px;
    }

Alles anzeigen

logo.png + line.png

JFM

Hast du geprüft ob es an dem Umbruch liegt? Wenn ich diesen in deinem Code entferne, verschwindet auch der Abstand ...

synaptic

also ich seh da keinen abstand... ich nutze den firefox 3.6.8

Unregistriert

Google, Stichwort xhtml und blockelemente

Unregistriert

Das erste Bild steht als Listenelement auf der Grundlinie des imaginären Fließtextes. Dadurch entsteht in dieser (x)html Version ein Freiraum zwischen den beiden Bildern.

Unregistriert

Danke. Der Tipp mit dem Blockelement hat mir weitergeholfen

Unregistriert

Fickt euch

Tags