PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS – Bilder als Block


ooAlbert
2010-04-19, 16:16:24
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
2010-04-19, 17:25:21
Lies mal das hier (http://forum.de.selfhtml.org/archiv/2007/10/t160103/) vielleicht hilft dir das auch mit dem doc type.

wry
2010-04-19, 17:26:22
Versuch mal folgendes in deinem .css hinzuzufügen:
img {float:left}

ooAlbert
2010-04-19, 18:18:05
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
2010-04-19, 18:42:14
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
2010-04-20, 11:46:24
ja die abstände meinte ich, ich versteh das auch noch nicht so richtig, da ich nirgens Leerzeichen oä. drin habe.

Nedo
2010-04-20, 13:01:39
Hört sich nach nem baseline Problem an...

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

DanMan
2010-04-21, 01:18:13
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
2010-04-26, 22:00:27
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
2010-04-27, 21:00:25
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
2010-04-28, 00:23:29
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.