CSS – Bilder als Block

[ooAlbert]

Hi,

ich hab ein Bild erstellt, das ich in kleinere Teilbilder zerschnitten habe. Jetzt möchte ich gern die Teilbilder in ein Div kippen um dann wieder das Gesamtbild zu haben.
Jetzt hab ich das probiert, aber zwischen den Teilbildern sind diverse Freiräume entstanden und somit ist alles zerflückt. Mir ist jetzt nicht klar wie man das beheben kann.


Hier mal das "Div":


<div ID="inhalt">
<img src="start/start_z1.gif" alt="start1">
<img src="start/start_z2.gif" alt="start2">
<img src="start/start_z3.gif" alt="start3">
<img src="start/start_z4.gif" alt="start4">
<img src="start/start_z4_2.gif" alt="start42">
<img src="start/start_z5.gif" alt="start5">
<img src="start/start_z5_2.gif" alt="start52">
<img src="start/start_z5_3a.gif" alt="start53">
<img src="start/start_z5_4.gif" alt="start54">
<img src="start/start_z6.gif" alt="start6">
<img src="start/start_z7.gif" alt="start7">
<img src="start/start_z8.gif" alt="start8">
</div>




Das CSS sieht dafür so aus:

#inhalt {
margin:0;
padding:0;
position:relative;
left:123px; top:73px;
width: auto;
height: auto;
float: left;
}


mfg

[AintCoolName]

Lies mal das hier (http://forum.de.selfhtml.org/archiv/2007/10/t160103/) vielleicht hilft dir das auch mit dem doc type.

[wry]

Versuch mal folgendes in deinem .css hinzuzufügen:
img {float:left}

[ooAlbert]

ich hab noch rumprobiert und bin dann aus das gekommen:

#inhalt {
margin:0;
padding:0;
position:absolute;
left:123px; top:73px;
width: 677px;
height: 527px;
display:block ;
}

dann hab ich hinter jede abgeschlossene Zeile in der HTML Datei ein "<br>" gesetzt, dann war das bild wieder zusammen ohne freiräume. ein guter Stil ist das vermutlich nicht :)

"img {float:left}" hat nichts bewirkt.

mfg

[wry]

Dachte zuerst du wolltest diese kleinen Abstände zwischen den Bildern loswerden (siehe Bild). Vielleicht sind die aber auch nur in Opera zu sehn :smile:

http://www.abload.de/img/floatleftku9i.png

[ooAlbert]

ja die abstände meinte ich, ich versteh das auch noch nicht so richtig, da ich nirgens Leerzeichen oä. drin habe.

[Nedo]

Hört sich nach nem baseline Problem an...

Probier mal die Bilder unten auszurichten, sprich
vertical-align:bottom;

[DanMan]

ja die abstände meinte ich, ich versteh das auch noch nicht so richtig, da ich nirgens Leerzeichen oä. drin habe.
Die Umbrüche hinter den img-Elementen haben den gleichen Effekt.

[wurs0]

Benutz einfach eine Tabelle, damit ist alles viel einfacher. Allgemein ist von CSS abzuraten, da es einfach unnötig kompliziert ist und nicht von allen Browsern unterstützt wird.

[DanMan]

Benutz einfach eine Tabelle, damit ist alles viel einfacher. Allgemein ist von CSS abzuraten, da es einfach unnötig kompliziert ist und nicht von allen Browsern unterstützt wird.
Ja, genau. :ugly:

[mictasm]

Benutz einfach eine Tabelle, damit ist alles viel einfacher. Allgemein ist von CSS abzuraten, da es einfach unnötig kompliziert ist und nicht von allen Browsern unterstützt wird.
War das jetzt ernstgemeint, da fehlt doch ein Smilie?


Die Umbrüche hinter den img-Elementen haben den gleichen Effekt.
Das ist meiner Meinung nach der entscheidene Tipp, das hat mich auch schon mehrfach geärgert.