Bild an bestimmte position

Status
Nicht offen für weitere Antworten.
Tobias K.

Tobias K.

Erfahrenes Mitglied
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
 
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
 
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
 
Also, bei mir sieht das bei Opera, IE und Netscape immer gleich aus!
Aber mal 'ne Frage:

Was sucht das hier:

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

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


Hatte ich vergessen rauszunehmen.

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


mfg
umbrasaxum
 
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:

umbrasaxum.JPG


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!)
 
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
 
Zuletzt bearbeitet:
Also, ich hab' das gerade mal so gemacht, wie ich es evtl. umsetzten würde.
Hier das Ergebnis.

Code:

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). :)
 

Anhänge

  • umbrasaxum.zip
    33,7 KB · Aufrufe: 18
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück