Bilder zusammenkleben

[Chräcker Heller]

Hallo,

ich versuche nun seid geraumer Zeit "strict" ohne Tabelle ein Bild aus 5 Images zusammen zu kleben.

Bild 1
Bild 2, 3, 4
Bild 5

Dabei sollen die images natlos aneinander liegen. Per br am Ende jeder image-Zeile gehts nicht, kann ich auch verstehen. Hätte ich in jeder zeile nur ein image, würde ich display:block nehmen, aber so hauts "irgendwie" nicht hin. Ich dachte, ich sage dem image2 und 5, daß er mit display:block eine neue Zeile anfangen soll, aber image 2 "zieht image 3 nicht hinter sich her.", es bleibt alleine in seiner neuen Zeile. Setze ich display:block in image 1 (was ich unsinnig finde), dann klebt immerhin image 2 natlos drunter (???) Wenn Ihr jetzt vollkommen verwirrt seid, dann gehts Euch wie mir. Deswegen vereinfacht gefragt:

Wie schaffe ich es, ohne Tabelle, die bilder natlos zusammen zu kleben? (Div mit der breite des gesammten Bildes darum herum setzen, hat auch nichts geholfen....) strict und mozillaverträglich bitte ,-))))

Danke,

Chräcker

[Carsten Sebastian Schulze]

Hi!

ich versuche nun seid geraumer Zeit "strict" ohne Tabelle ein Bild aus 5 Images zusammen zu kleben.
Bild 1
Bild 2, 3, 4
Bild 5

img { border: none; }
span { white-space: nowrap; }

<div><img alt="" src="bild1.png"><br>
<span><img alt="" src="bild2.png"><img alt="" src="bild3.png"><img alt="" src="bild4.png"></span><br>
<img alt="" src="bild5.png"></div>

?

Carsten

[Kai Lahmann]

hi

span { white-space: nowrap; }

span ist inline, aber http://www.w3.org/TR/REC-CSS2/text.html#propdef-white-space (while-space nur für block-Elemente)

Grüße aus Bleckede

Kai

[Chräcker Heller]

Hallo,

nein, das ist es leider nicht. Das white-space ist ja nur eine Art "css-nobr".... umgebrochen wurde mir die mittlere Zeile ja "immerhin" nie. Zwischen den drei Image-Zeilen verursacht ein handelsübliches <br> (das ja auch in Deinem versuch noch "normal" drin steht) einen Abstand. "Wohl", weil das br eben eine bestimmtenm zeilenhöhe definiert. Nur brauche ich einen "neue-Zeile-bitte" Befehl, weil ich ja die drei zeilen untereinander haben möchte. Deswegen auch meine Idee mit dem display:block, da ja auch dem Element eine neue Zeile ermöglicht.... Trotzdem danke für die Mühe....

Chräcker

[Sven Rautenberg]

Moin!

Wie schaffe ich es, ohne Tabelle, die bilder natlos zusammen zu kleben? (Div mit der breite des gesammten Bildes darum herum setzen, hat auch nichts geholfen....) strict und mozillaverträglich bitte ,-))))

Was hälst du von positionierten Layern? Sind in diesem Fall, weil die Bilder ja irgendeine feste Größe haben, garnicht so schlecht.

<div style="position:relative; left:0px; top:0px;">
<div style="position:absolute;...">Bild1</div>
<div style="position:absolute;...">Bild2</div>
<div style="position:absolute;...">Bild3</div>
<div style="position:absolute;...">Bild4</div>
<div style="position:absolute;...">Bild5</div>
</div>

- Sven Rautenberg

[Chräcker Heller]

Hallo,

ja, das war es, Danke. Bei mir siehts so aus:

<div style="position:relative;">
<div style="position:absolute; top:0px; left:0px;"> bild1 </div>
<div style="position:absolute; top:78px; left:0px;">bild2,bild3,bild4</div>
<div style="position:absolute; top:99px; left:0px;">bild5</div>
</div>

Ich versuche ja gerade heimlich eine Seite möglichst ohne Tabelle, unsichtbaren Gif etc zu basteln, und da wollte ich scheinbar auch ohne positionierte divs mal auskommen, aber vor lauter Begeisterung für css kann man ja nicht alle html-tags wegschmeissen ;-)))

Danke, und auch in Deine Richtung: mögen die Bücher mit Euch sein ;-))

Chräcker

[Kai Lahmann]

hi

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

....so? [evtl. noch margin und padding von dem <div> ausdrücklich auf 0 setzen]

Grüße aus Bleckede

Kai

[Chräcker Heller]

Hallo,

ich hab sogar meinen Schreibtisch, meinem füller und meiner Tochter ein margin und pading mit 0 belegt ;-) leider bleiben die Lücken..... aber Svens lösung funktioniert. Ein relatives Div "drumherum" und darein absolute Divs (zum umliegenden relativen Div gesehen, Dir muß ichs nicht sagen, mir aber immer wieder ;-))

Danke wie immer, möge ein Buch mit Euch sein ;-)

Chräcker

[Kai Lahmann]

hi

Dir muß ichs nicht sagen, mir aber immer wieder ;-))

och doch - ich hab' mich gestern auch gefragt, wieso das ganze so das äußere <div> position:static hat, der Inhalt dann absolut zur Fensterecke positioniert wird - das es aber alle Browser so machen, glaub' ich das mal ;)

Grüße aus Bleckede

Kai

[Orlando]

Hi, Chräcker

ich versuche nun seid geraumer Zeit "strict" ohne Tabelle ein Bild aus 5 Images zusammen zu kleben.

Du hast zwar schon eine funktionierende Lösung von Sven erhalten, aber es gibt - wie bei CSS so oft - auch einen anderen Weg.

Bild 1
Bild 2, 3, 4
Bild 5

<img style="display:block;" />
<img style="float:left;" />
<img style="float:left;" />
<img style="float:left;" />
<img style="clear:left;" />

Diese Variante ist bei Veränderungen vielleicht noch einfacher zu warten.

strict und mozillaverträglich bitte ,-))))

Na, was hast du denn sonst erwartet? ;)

LG Orlando

[Mathias Bigge]

Hallo Chräcker,

eigenartig: Als ich begonnen hatte, regelmäßig mit Mozilla zu arbeiten, hatte ich genau das umgekehrte Problem: Während die älteren Browser immer automatisch einen vertikalen Abstand zwischen die vertikalen Bilder setzten, klebten sie beim Mozilla plötzlich ungeniert aneinander. Also: Bei mir reichte es, die Bilder einfach nebeneinander zu setzen und <br>s einzufügen, schon war der Quader fertig.....

Ob's an einer Anweisung in der zentralen CSS liegt? Oder ist das bei den anderen auch so? Aus Faulheit arbeite ich immer noch mit 0.9.9...

Bild 1
Bild 2, 3, 4
Bild 5

Viele Grüße
Mathias