[Erledigt] Bilder mit Positionsangaben nicht von oben links

Heinerlutscher · 04.03.2009, 19:21

Hallo,

habe folgendes Problem:

Ich habe ein Bild und möchte ein 2. darauflegen, also überlappen. Benutze dafür folgenden Code:

<div style="position: absolute; z-index: 1; left: 68px; top: 76px">
<img border="0" src="deinbild.jpg" width="259" height="259"></div>

<div style="position: absolute; z-index: 2; left: 95px; top: 90px">
<img border="0" src="deinbild2.jpg" width="100" height="50"></div>

Allerdings beginnen die left und top Werte von oben links.

Sie sollen aber dynamisch beginnen, sagen wir mal in einer Tabelle.
Also das in einer Tabelle sozusagen der Nullpunkt ist.

Wie kann man das machen?

Servus

nikosch · 04.03.2009, 19:23

mit position:relative;

Heinerlutscher · 04.03.2009, 19:30

Ja, habe ich auch schon probiert, dann überlappt es aber nicht und das 2. Bild ist daneben.

nikosch · 04.03.2009, 19:32

Lies Dir die Beschreibung zu relative durch. Du kannst auch beide kombinieren. Wichtig: Du mußt die Positionierungsangaben ineinander verschachteln.

Heinerlutscher · 04.03.2009, 19:55

Hast du da ein Beispiel mit dem Verschachteln?

nikosch · 04.03.2009, 20:02

Code:

<div><img />
     <div><img /></div>
</div>

Heinerlutscher · 04.03.2009, 20:27

Vielen Dank für deine Hilfe. So funktioniert es:
(Des ganze in einer Tabelle drin)

Code:

<div style="position: relative; z-index: 1; left: 0px; top: 0px">
<img border="0" src="bild1.png" >


<div style="position: absolute; z-index: 2; left: <?php echo $pos2_x; ?>px; top: <?php echo $pos2_y; ?>px">
<img border="0" src="bild2.png">

</div>

<div style="position: absolute; z-index: 3; left: <?php echo $pos3_x; ?>px; top: <?php echo $pos3_y; ?>px">
<img border="0" src="bild3.png">

</div>
<div style="position: absolute; z-index: 4; left: <?php echo $pos4_x; ?>px; top: <?php echo $pos4_y; ?>px">
<img border="0" src="bild4.png">

</div>
</div>

nikosch · 04.03.2009, 20:35

Imho zu kompliziert. Das sollte auch gehen:

Code:

<style>
.main {
  position:relative;
  top:10px;
  left:20px;
  }

.main div {
  position:absolute;
  display:block;
  top:0;
  left:0;
  }

</style>

<div class="main">
  <img />
  <img />
  <img />
</div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder ohne DB sicher speichern	Diet	PHP Tipps 2005	6	25.03.2009 00:07
Links generieren für Bilder Galerie	Atomic	PHP Tipps 2009	14	22.02.2009 12:59
Entscheidung für Bilder	maclaim1988	PHP Tipps 2009	2	07.02.2009 18:50
Links vom Untermenü in Container öffnen	Surfer	PHP Tipps 2008	0	27.12.2008 19:24
bilder zu groß?!	lindner	PHP Tipps 2006	9	19.10.2006 08:32
Bilder löschen		PHP Tipps 2005-2	4	24.10.2005 11:37
Bilder ohne Namen zu wissen per php auf Internetseite zeigen		PHP Tipps 2005-2	10	11.10.2005 18:35
Ueberlagerte Links		HTML, Usability und Barrierefreiheit	0	01.10.2005 19:44
Bilder aus einem unterverzeichis anzeigen.Hilfe		PHP Tipps 2005-2	3	12.09.2005 15:36
Mehrere Bilder Hochladen und bearbeiten		PHP Tipps 2005-2	7	23.07.2005 13:48
Tabelle ganz links	lalala	HTML, Usability und Barrierefreiheit	1	06.07.2005 14:29
Bilder in Tabellen	nixdorf	HTML, Usability und Barrierefreiheit	36	09.05.2005 21:15
[Erledigt] bilder als links OHNE rahmen verzweifel		HTML, Usability und Barrierefreiheit	4	02.03.2005 11:57
Funktion schreibt Text links oben hin...		PHP Tipps 2004	5	29.09.2004 14:09
Menü Links tauschen		PHP Tipps 2004	14	03.09.2004 09:17

04.03.2009, 19:21
Heinerlutscher Neuer Benutzer Registriert seit: 26.01.2008 Beiträge: 14	[Erledigt] Bilder mit Positionsangaben nicht von oben links Hallo, habe folgendes Problem: Ich habe ein Bild und möchte ein 2. darauflegen, also überlappen. Benutze dafür folgenden Code: <div style="position: absolute; z-index: 1; left: 68px; top: 76px"> <img border="0" src="deinbild.jpg" width="259" height="259"></div> <div style="position: absolute; z-index: 2; left: 95px; top: 90px"> <img border="0" src="deinbild2.jpg" width="100" height="50"></div> Allerdings beginnen die left und top Werte von oben links. Sie sollen aber dynamisch beginnen, sagen wir mal in einer Tabelle. Also das in einer Tabelle sozusagen der Nullpunkt ist. Wie kann man das machen? Servus


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.03.2009, 19:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	mit position:relative; __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

04.03.2009, 19:30
Heinerlutscher Neuer Benutzer Registriert seit: 26.01.2008 Beiträge: 14	Ja, habe ich auch schon probiert, dann überlappt es aber nicht und das 2. Bild ist daneben.

04.03.2009, 19:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Lies Dir die Beschreibung zu relative durch. Du kannst auch beide kombinieren. Wichtig: Du mußt die Positionierungsangaben ineinander verschachteln. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

04.03.2009, 19:55
Heinerlutscher Neuer Benutzer Registriert seit: 26.01.2008 Beiträge: 14	Hast du da ein Beispiel mit dem Verschachteln?

04.03.2009, 20:02
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Code: <div><img /> <div><img /></div> </div> __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

04.03.2009, 20:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Imho zu kompliziert. Das sollte auch gehen: Code: <style> .main { position:relative; top:10px; left:20px; } .main div { position:absolute; display:block; top:0; left:0; } </style> <div class="main"> <img /> <img /> <img /> </div> __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --