verschachteltes Positionieren

[takahe]

Hallo,

ich positioniere mit dem Befehl

<div style="position:absolute; left:120px; top:100px">
<img src="punkt.gif" alt="" width="10" height="10" border="0">
</div>

eine Grafik. Welche "Ecke" der Grafik wird dann auf den Koordinaten 120/100 angezeigt? Logisch wäre die linke obere Ecke, da ja das Koordinatensystem auch links oben beginn, oder?

Die Frage stellt sich mir, da ich es nicht schaffe, die Grafik exakt zu plazieren.

Für eine Antwort wäre ich dankbar,

Grüsse

Takahe

[Kai Lahmann]

hi

<div style="position:absolute; left:120px; top:100px">
<img src="punkt.gif" alt="" width="10" height="10" border="0">
</div>

eine Grafik. Welche "Ecke" der Grafik wird dann auf den Koordinaten 120/100 angezeigt? Logisch wäre die linke obere Ecke, da ja das Koordinatensystem auch links oben beginn, oder?

jo, welche Ecke sonst? Verpass dem <div> einen 'border', dann sieht man das besser.

Grüße aus Bleckede

Kai

[takahe]

Hm, ja, danke. Im IE sieht's eigentlich auch ganz gut aus, im Netscape sieht es so aus, als ob die Grafik um ein paar Pixel verschoben ist.

Mittlerweile ist mir aber was viel schlimmeres aufgefallen. Im Opera funktioniert die Anzeige gar nicht...

Was ist denn am nachfolgenden Code falsch???

<style type="text/css">
<!--
body { }
#karte { position:relative; z-index:1; }
#nadel { position:absolute; top:100px; left:120px; width:20px; height:20px; z-index:2; }
-->
</style>

<div id="karte">
  <img src="karte.gif" alt="" width="500" height="500" border="0">
  <div id="nadel">
    <img src="nadel.gif" alt="" width="20" height="20" border="0">
  </div>
</div>

[ole]

hi

#karte { position:relative; z-index:1; }
#nadel { position:absolute; top:100px; left:120px; width:20px; height:20px; z-index:2; }

du solltest probieren tags mit class zu formatieren und nicht über id, da nicht alle browser das untersützen.

so long
ole
(8-)>

[Kai Lahmann]

hi

du solltest probieren tags mit class zu formatieren und nicht über id, da nicht alle browser das untersützen.

wäre mir neu - welche denn nicht?

Grüße aus Bleckede

Kai

[ole]

hi Kai

zumindest der nn4.x interpretiert das u.U. nicht korrekt (AFAIK)

[Kai Lahmann]

hi

zumindest der nn4.x interpretiert das u.U. nicht korrekt (AFAIK)

div#id mag er nicht, #id geht.

Grüße aus Bleckede

Kai

[takahe]

Hi Ole,

ich habs auch schon mit class versucht, aber selbes Resultat. Der Opera zeigt zwar das "karte.gif" an, nicht aber die eigentlich drübergelegte Datei "nadel.gif". Im IE und NS klappt es.

<style type="text/css">
<!--

body { }
div.karte {
position: relative;
height: 560px;
width: 570px;
}

div.nadel {
position: absolute;
top:<? echo $ypos ?>px;
left:<? echo $xpos ?>px;
height: 20px;
width: 20px;
}

-->
</style>

<div class="karte">
<img src="karte.gif" alt="" width="500" height="500" border="0">
  <div class="nadel">
    <img src="nadel.gif" alt="" width="20" height="20" border="0">
  </div>
</div>

[Kai Lahmann]

hi

Hm, ja, danke. Im IE sieht's eigentlich auch ganz gut aus, im Netscape sieht es so aus, als ob die Grafik um ein paar Pixel verschoben ist.

NN4 oder NN6?

Mittlerweile ist mir aber was viel schlimmeres aufgefallen. Im Opera funktioniert die Anzeige gar nicht...

hmmmm

#karte { position:relative; z-index:1; }
#nadel { position:absolute; top:100px; left:120px; width:20px; height:20px; z-index:2; }

Ansich nichts, aber ob das alle Browser (insbesondere Opera und Netscape 4) mit dem position:relative; so ganz auf die Reihe bringen, weiß ich nicht....

Grüße aus Bleckede

Kai

[takahe]

Hi Kai,

»»Ansich nichts, aber ob das alle Browser (insbesondere Opera
»»und Netscape 4) mit dem position:relative; so ganz auf die
»»Reihe bringen, weiß ich nicht....

solange ich nur die beiden <div> nicht verschachtle, klappt die Anzeige. Aber ich muß die "nadel.gif" ja irgendwie an das Elternelement "karte.gif" ranhängen. Und sobald ich die beiden <div> verschachtle, wird die "nadel.gif" nicht mehr angezeigt.

[Frank Jonas]

Hallo Kai,

AFAIK hat Opera wohl Probleme mit z-index.

Gruß Frank