✔ Bilder übereinander legen

[Kammi_]

Hallo Community da ich hier schon des öfteren hilfe gefunden habe, hoffe ich mal das ihr mir weiter helfen könnt und zwar bin ich wie hier vorgegangen.

http://www.tutorials.de/forum/css/199934-bilder-uebereinander-legen.html

nur hab ich jetzt noch das problem das mir das 2te bild oben links angezeigt wird anstat im Monitor

css:

#unten
{
background-color:#efefef;
width:100px;
height:100px;
z-index:0;
}
#oben
{
	background-color:#cdcdcd;
	position:absolute;
	center:15px;
	width:50px;
	height:50px;
	z-index:1;
	left: 40px;
	top: 73px;
}

die html

<link rel=stylesheet type="text/css" href="system/modules/matches/inc/match_style.css">
<table width="100%" height="120" border="0" cellpadding="2" cellspacing="2" bgcolor="#FAFAFA" style="border-style:solid;border-width:1px;border-color:#E0E0E0;background-position:left top;background-position-x:left;background-position-y:top;background-repeat:no-repeat;background-image:url(system/modules/matches/inc/matchbox_bg.png);">
<tr>
<th width="100%" height="14" align="center" valign="top" border="0">

<table width="100%" height="14" border="0" cellpadding="0" cellspacing="0">
<tr>
 <th width="40" height="100%" align="left" valign="center" border="0" class="normal_text">
  &nbsp;<br>
 </th>
 <th width="200" height="100%" align="left" valign="center" border="0" class="normal_text">
  <span style="font-size:13px; color:#ffffff;">
  <b>%DATUM% Uhr</b><br>
  </span>
 </th>
 <th width="*" height="100%" align="right" valign="center" border="0" class="normal_text">
  <span style="font-size:13px; color:#ffffff;">
  <b>%LIGA%</b><br>
  </span>
 </th>
</tr>
</table>

</th>
</tr>

<tr>
<th width="100%" height="*" align="center" valign="top" border="0">

<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
 <th width="160" height="100%" align="center" valign="top" border="0" class="normal_text">
  <span style="font-size:13px; color:#707070;">
 <b> %SQUAD%</b>  </span><br>
  <a href="%LINK%"><div id="unten"><img src="system/modules/matches/inc/screen.gif" width="110" height="110" /></div><div id="oben"><img src="%SQUAD_BANNER%" width="60" height="60" /></div></a><br>

<img src="http://www.tutorials.de/forum/images/null.gif" width="1" height="3" border="0"><br>
<table width="100%" height="20" border="0" cellpadding="2" cellspacing="0">
<tr>
 <th width="100%" height="100%" align="left" valign="top" border="0" class="normal_text" style="border-style:solid;border-width:1px;border-color:#DADADA;" bgcolor="#F3F3F3">
   <p><span style="font-size:11px; color:#707070;">
     <b>Players:</b></span>
   <span style="font-size:11px; color:#707070;">%SQUAD_PLAYER%     </span><br>
   </p></th>
</tr>
</table> </th>

 <th width="*" height="100%" align="center" valign="center" border="0" class="normal_text">
  <span style="font-size:21px; color:#707070;">
  <b>%RESULT%</b>  </span><br>

<table width="100%" height="20" border="0" cellpadding="2" cellspacing="2">
<tr>
 <th width="100%" height="100%" align="center" valign="top" border="0" class="normal_text">
  <span style="font-size:13px; color:#707070;">
  <b>%MAPS%</b>  </span><br> </th>
</tr>
</table> </th>

 <th width="160" height="100%" align="center" valign="top" border="0" class="normal_text">
  <span style="font-size:13px; color:#707070;">
  <b>%GEGNER%</b>  </span><br>
  <a href="%GEGNER_LINK%" target="_blank"><img src="%GEGNER_BANNER%" border="0" width="110" height="110" style="border-style:solid;border-width:1px;border-color:#404040;"><a><br>

<img src="http://www.tutorials.de/forum/images/null.gif" width="1" height="3" border="0"><br>
<table width="100%" height="20" border="0" cellpadding="2" cellspacing="0">
<tr>
 <th width="100%" height="100%" align="left" valign="top" border="0" class="normal_text" style="border-style:solid;border-width:1px;border-color:#DADADA;" bgcolor="#F3F3F3">
   <p><span style="font-size:11px; color:#707070;">
     <b>Players:</b>
  </span>
   <span style="font-size:11px; color:#707070;">   %GEGNER_PLAYER%     </span><br>
     </p></th>
</tr>
</table> </th>
</tr>
</table>



<img src="http://www.tutorials.de/forum/images/null.gif" width="1" height="3" border="0"><br>
<table width="100%" height="20" border="0" cellpadding="2" cellspacing="0">
<tr>
 <th width="100%" height="100%" align="left" valign="top" border="0" class="normal_text" style="border-style:solid;border-width:1px;border-color:#DADADA;" bgcolor="#F3F3F3">
  <span style="font-size:11px; color:#707070;">
  <b>Statement-TeamDevcore: </b>
  <i>%SQUAD_STATEMENT%</i>
  </span><br>
 </th>
</tr>
</table>
<img src="http://www.tutorials.de/forum/images/null.gif" width="1" height="3" border="0"><br>
<table width="100%" height="20" border="0" cellpadding="2" cellspacing="0">
<tr>
 <th width="100%" height="100%" align="left" valign="top" border="0" class="normal_text" style="border-style:solid;border-width:1px;border-color:#DADADA;" bgcolor="#F3F3F3">
  <span style="font-size:11px; color:#707070;">
  <b>Statement-Gegner: </b>
  <i>%GEGNER_STATEMENT%</i>
  </span><br>
 </th>
</tr>
</table>

<p><span style="font-size:11px; color:#808080;"><a href="%LINK%"><img src="http://www.tutorials.de/forum/images/details_link.png" hspace="10" border="0" /><a href="%MATCHLINK_URL%"><img src="http://www.tutorials.de/forum/images/match_link.png" hspace="10" border="0" /></a>

<a href="%HLTV_URL%"  target="_blank" ><img src="http://www.tutorials.de/forum/images/watch_link.png" hspace="10" border="0" /></p></th>

</tr>
</table>

ich hoffe ihr könnt mir helfen

zufinden ist das ganze hier HomePage in den news Matchnews: ist apiC zu schlagen?

danke für eure hilfe

 

[Sven Mintel]

Moin,

ich weiss jetzt nicht, ob es die Strukturierung des "Programmablaufes" in dieser Seite gestattet, dies zu tun, aber das einfachste wäre, du tust beide Bilder in einen gemeinsamen Container und positionierst sie absolute.

Sie werden dann übereinandergelegt wie ein Stapel Skatkarten

<style type="text/css">
<!--
#bildcontainer img{position:absolute;}
-->
</style>
<!-- ................ -->
<div id="bildcontainer">
  <img src="http://www.tutorials.de/forum/images_v6/promo/chat.png">
  <img src="http://www.tutorials.de/forum/avatars/sven+mintel.gif?dateline=1188339003">
</div>

 

[Kammi_]

Also wenn ich das jetzt so mache wie du es mir gesagt hast hab ich zwar alle 2 unten drin nur ist alles verschoben

Verschobene Ansicht

 

[Sven Mintel]

Und anhand einer Grafik soll ich nun den Code erraten, der für diese Verschiebung verantwortlich ist?;-]

 

[Kammi_]

Und anhand einer Grafik soll ich nun den Code erraten, der für diese Verschiebung verantwortlich ist?;-]

ich habe den code genutzt den du mir um 2 uhr noch was gepostet hast

 

[Maik]

Moin,

ein Inline-Element (<a>) darf kein Block-Element (<div>) enthalten - siehe HTML-Elementreferenz für Inline-Elemente -, außerdem sind absolute Positionsangaben innerhalb eines Tabellengerüstes "etwas problematisch", wie man unschwer an deinem Versuch und dem Resultat für #oben sieht.

Mein Lösungsvorschlag lautet demnach folgendermaßen:

<th width="160" height="100%" align="left" valign="top" border="0" class="normal_text">
  <span style="font-size:13px; color:#707070;">
 <b> %SQUAD%</b>  </span><br>
 <a href="%LINK%"><img id="unten src="system/modules/matches/inc/screen.gif" width="110" height="110" /><img id="oben src="%SQUAD_BANNER%" width="60" height="60" /></a>

a img#unten {
    float:left;
    border:0;
}
a img#oben {
    border:0;
    margin-left:-60px; /* das zweite Bild #oben ist 60*60px groß */
    padding-top:-110px;  /* das erste Bild #unten ist 110*110px groß */
}

Mit den von mir gewählten Werten für margin-left- und padding-top wird das Grafikelement #oben in der oberen rechten Ecke des ersten Grafikelements #unten ausgerichtet. Falls eine andere Position erwünscht ist, einfach an den beiden Werten schrauben. Hierbei gilt: Je größer die beiden Negativ-Werte, desto weiter nach links und oben wandert das zweite Grafikelement #oben.

mfg Maik