# Bild an bestimmte position



## Tobias K. (23. Februar 2004)

moin


Für meine HP möchte ich ein Bild, dass auch als link dient, über einem anderen an einer bestimmten Stelle positionieren. Das ganze soll natürlich Auflösungsunabhängig sein.

Ich habe nur Grundkenntnisse in HTML, CSS, Javascript, deshalb weiss ich nciht mal ob ich hier richtig bin. Hat jemand ein Beispiel oder würde mir eins schreiben?


mfg
umbrasaxum


----------



## rootssw (23. Februar 2004)

Hallo!

Das geht relativ einfach per CSS.
Einfach im style-Attribut z. B. folgendes setzten:

position: absolute; top: 100px; left: 100px;

Wenn du das bei beiden Bildern angibst, werden diese von links oben jeweils 100px "abstehen".
Die absolute Positionierung besagt, dass die Position am nächst höher gelegenen Element ausgerichtet werden soll (also z. B. am Body-Tag oder einem DIV), aber wenn du das in einer Tabelle schreibst, wird das Bild evtl. außerhalb der Tabelle stehen.
Dann müsstest du "position:relative;" angeben.
Wenn du dann noch dahinter

z-index:0;

Angibst, kannst du bestimmen, welches Bild vorne und welches hinten stehen soll (je höher die Zahl, desto weiter vorne das Bild).

Hier mal ein Link für weitere Infos:

http://www.selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position


----------



## Tobias K. (23. Februar 2004)

moin


Jo danke!
Das mit dem CSS Zeug hatte ich schon nur das "div" hatte mir noch gefehlt.
Mein Problem ist jetzt aber das es bei mir mit Opera perfekt aussieht aber mit dem I-Explorer nciht. Kannst vielleicht mal gucken und mir einen vorschlag machen?

http://www.umbrasaxum.de


mfg
umbrasaxum


----------



## rootssw (23. Februar 2004)

Also, bei mir sieht das bei Opera, IE und Netscape immer gleich aus!
Aber mal 'ne Frage:

Was sucht das hier:


```
style="position:absolute;left:555px;top:200px"
```

Ohne eigenen Tag unter dem Abschluss des Body-Tags?! Sollte das nicht evtl. in ein <img>-Tag?!


----------



## Tobias K. (23. Februar 2004)

moin


Hatte ich vergessen rauszunehmen.

Bei mir sieht es in Opera perfekt aus, im IE aber nicht.


mfg
umbrasaxum


----------



## rootssw (23. Februar 2004)

Sorry, ich weiss nicht, was du meinst!
Bei mir sieht es in allen Browser gleich aus!
Kannst du das Problem mal näher beschreiben?!
Hier mal ein Bild von meinem IE:







Was mich wohl stören würde (ich weiss nicht, ob du vielleicht sogar das meinst) ist, dass, wenn man die Größe des Fensters ändert, sich das Enter-Bild nach rechts verschiebt und somit außerhalb des Schmelzwassers endet.
Das würde ich beheben, indem ich dem Image einfach (genauso wie dem Eiswürfel-Bild) Positionsangaben spendiere, statt des <center></center>
Da seh' ich grad, bei dir ist ja alles durcheinander gewürfelt, div, center, Positionsangaben,... (übrigens <center> ist depracted!)


----------



## Tobias K. (23. Februar 2004)

moin


Das Enter soll genau in dem schwrzen freien Feld sein!
Ja der Code ist unordentlich, mach ihn grad "sauber".

Mein Ziel ist es einfach das das Enterbild als Link dient und zwar nur das Enterbild.

Hab es jetzt nochmal überarbeitet und kommt dem schon näher was ich will.
Aber das wahre isses einfach nicht.


mfg
umbrasaxum


----------



## rootssw (23. Februar 2004)

Also, ich hab' das gerade mal so gemacht, wie ich es evtl. umsetzten würde.
Hier das Ergebnis.

Code:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv=content-type content="text/html; charset=windows-1252">
</head>
<body bgcolor=#000000>
<table cellspacing=0 cellpadding=0 border=0 align="center" width="800">
  <tr>
    <td>
		<img alt="" src="umbrasaxum-dateien/eiswuerfel_ganz_ohne_enter.jpg" border=0 width="800" height="481">
		<a href="http://www.umbrasaxum.de/main.htm">
			<img  src="umbrasaxum-dateien/eiswuerfel_mitte_mitte.gif" border=0 style="position:absolute; left:343px; top:338px;"> 
		</a>
	</td>
  </tr>
  <tr>
    <td align="center">
      <img height=68 alt="" src="umbrasaxum-dateien/umbrasaxum_schwarz_eis.jpg" width=659 border=0>
	 </td>
  </tr></table>
</body></html>
```


Ich pack das Ganze dann auch noch mal in den Anhang.
Wenn das Enter-Bild weiter nach rechts soll, musst du einfach nur die Style-Eigenschaft "left" ändern.

PS:
Ich war so frei, aus deinem BMP-Bild ein GIF-Bild zu machen (das Laden dauerte mir einfach zu lange - dadurch spart man immerhin 43 KByte).


----------



## Tobias K. (23. Februar 2004)

moin


Klappt auch nicht. Das Enterbild ist zuweit links.


mfg
umbrasaxum


----------



## rootssw (24. Februar 2004)

Hab' ich doch schon geschrieben:



> Wenn das Enter-Bild weiter nach rechts soll, musst du einfach nur die Style-Eigenschaft "left" ändern.


----------



## Tobias K. (24. Februar 2004)

moin


Ja is schon klar.
Es passt in Opera aber im IE wieder nicht.


mfg
umbrasaxum


----------



## rootssw (24. Februar 2004)

?!
Warum das denn?
Wenn ich mir die Seite anschaue, ist das Enter-Bild bei Opera (7) und IE (5.5) an der EXAKT gleichen Position!
Es dürfte normal auch nicht anders sein, da die Position mittels CSS in Pixeln festgelegt ist - und die Größe der Spalte auch?!


----------



## rootssw (24. Februar 2004)

Ich hab' jetzt nochmal ein DIV hinzugefügt!
Jetzt müsste es klappen!

Link


----------



## Tobias K. (24. Februar 2004)

moin


Ja!
Jetzt klappt es endlich.
Tausend dank!


mfg
umbrasaxum


----------



## rootssw (24. Februar 2004)

JUHUUUU!
Endlich geschaft!


----------

