CSS Positionierung auf einem Bild

[Edemund]

Hallo,

ich stehe mal wieder vor einem Problem.

Die Idee ist folgende:
Ich habe ein (Gund-)Bild (wie z.B. eine Karte) und positioniere darüber mit CSS verschiedene kleinere Bilder (gifs bzw. pngs), die sich somit mit dem Grundbild zu einem neuen, veränderbaren Bild zusammensetzen sollen.

Beispiel:
Ich habe ein Auto als Grundbild und kann dann unterschiedliche Karosseriefarben darüberlegfen, größere Reifen, andere Fensterformen etc.

Das Photoshoptechnische dazu ist schon alles gelöst, jetzt muss es nur noch in CSS so realisiert sein, dass die gifs erstens exakt an einer bestimmten Stelle über dem Grundbild liegen (sonst gibt es logischerweise ja unschöne Überlappungen) und zweitens das Bild an alle möglichen Stellen im Dokument verschoben werden kann (wird öfters auf der Seite verwendet), ohne dass ich jedes Mal die Positionierung der gifs anpassen muss.

Schön und gut. Ich hatte das bis jetzt folgendermaßen realisiert:

<div id="grundbild">
       <div id="gif1"></div>
        <div id="gif2"></div>
        <div id="gif3"></div>
         <!-- usw. usf. -->
</div>

Das CSS zu den jeweiligen IDs sah folgendermaßen aus:

#grundbild {
background: #FFFFFF url('grundbild') no-repeat center;
width: 500;
height: 200;
z-index:1;
}

/*das hier jetzt als  Beispiel, wie die Gif-Bilder positioniert werden sollten *'/
#gif1 {
position:relative;
top:10px ;
left:20px;
background: url(gif1) no-repeat left top;
width:10px;
height:20px;
z-index:2;
}

Hat soweit auch alles schön in sich gepasst - die Tatsache, dass sich die gifs auch in der Position aufeinander beziehen (wollte eigentlich, dass sie alle nur vom "grundbild") abhängig sind, habe ich mit Positionsangaben auch noch hingeschoben - aber jetzt musste ich feststellen, das es sich eben nicht nur auf das "grundbild" bezieht, sondern bei kleinstem Verschieben (es muss nur eine größere Schriftgröße eingegeben werden), sich alles verzieht, weil sich die gifs eben doch am Browser(rand) ausrichten.

Ich hoffe ich habe euch jetzt nicht verschreckt mit meinem geringfügigen CSS-Wissen und hoffe, der ein oder andere kann mir ein wenig helfen, da ich nach ewigem Herumprobieren, was denn evtl. funktionieren könnten, nicht mehr so ganz weiterweiß.

LG Edemund

 

[vop]

Versuch doch mal die Bildchen in einen div-Container zu legen, den du mit CSS positionierst.

Oder aber du schaust mal hier http://www.walterzorn.de/dragdrop/dragdrop.htm, vielleicht hilft Dir das weiter.

vop

 

[Edemund]

Hallo,
vielen Dank für den Tipp, nun ist es immerhin nur noch vom Bild abhängig und lässt sich schön durch die Gegend schieben - das hat mir schon einmal groß geholfen.

Jetzt sind allerdings noch zwei weitere Probleme da:
Problem no.1: Firefox und IE interpretieren Positionsangaben unterschiedlich. Als sie noch abhängig vom Browserfenster waren, war das kein Problem, da einfach alles unterschiedlich interpretiert wurde. Jetzt sitzt das Grundbild bei beiden in einer Tabelle (exakt gleich) und die relativen gifs sitzen je Browser ein wenig anders (Da auf das Bild bezogen).

Ich habe bis jetzt nur die Lösung gefunden, einfach eine Browserschleife einzubauen und zwei unterschiedliche Stylesheets drüberzulegen.

Problem no.2:
Der IE interpretiert keine Transparenz in den png-Dateien die ich anstelle von gif-Dateien drüberlege, da die Gifs so unsaubere Ränder haben (fällt gerade bei Runden Objekten sehr stark auf).
Das habe ich insoweit gelöst, dass ich mit dem Chroma-Filter (den wiederum nur der IE interpretiert) den Bereich, der eigentlich transparent sein sollte (und im IE hellblau dargestellt wird) transparent mache.
Allerdings arbeitet der Chroma Filter gerade bei kleineren Bereich fehlerhaft, bzw. der IE färbt sie nicht blau ein, so dass immer wieder unschöne weiße Pixel stehengelassen werden.

Gibt es noch weitere Möglichkeiten, den IE zu überlisten, das PNG transparent zu interpretieren oder muss ich im IE stylesheet doch das Gif-Format verwenden?

Vielen Dank schon einmal,
Edemund