✔ Bilder übereinander php

[fixxxxxi]

Hallo,

ich habe folgendes Problem: Ich habe 4 Screenshots in der Größe 1024x768. Diese 4 Screenshots werden in einer Ergebnisliste untereinander dargestellt. Um die Page grafisch etwas aufzubessern und die Screens dieser anzupassen, möchte ich ein png, welches die Umrandung darstellt über die Screenshots legen. Dies habe ich so gelöst, das ich den screen via img tag einbinde und darüber den rahmen mit einem div, welcher relativ positioniert ist. Im Firefox funktioniert dies wunderbar - ABER - im inetexplorer oder opera nicht. da wird zwar der rahmen über das bild gelegt, aber die stelle, an dem der div ohne positionierung ist, wird freigelassen, so dass eine Lücke entsteht.

Ich habe auch schon versucht den Screen als Tabellenbackground zu benutzen und das zweite Bild drüber zulegen, aber da das Backgroundbild größer ist als die Tabelle selbst, wird immer nur ein Teil des Screens angezeigt und nicht alles.

Wie kann ich mein Problem lösen?

Link zur Page: http://hermitcrew.de/index.php?wars-more-208# (zB.WarID 208)

Das ist der PHP Teil mit der Ergebnissliste:

function get_erg_liste($wid) {
	$list = ''; $enar = array ( 'jpg', 'gif', 'png', 'jpeg');
	$erg = db_query("SELECT * FROM prefix_warmaps WHERE wid = ".$wid);
	while($row = db_fetch_assoc($erg) ) {
		if ( $row['opp'] == $row['owp'] ) {
			$farbe = 'fff818'; #pat
		} elseif ( $row['opp'] < $row['owp'] ) {
			$farbe = '69e01c'; #win
		} elseif ( $row['opp'] > $row['owp'] ) {
			$farbe = 'e01c1c'; #los
		}
		foreach($enar as $v) {
			if ( file_exists ( 'include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v ) ) {
				$size=getimagesize('include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v);
				$breite=$size[0];
				$hoehe=$size[1];
               break;
 		}
		}
		$list .= '<tr bgcolor="#000000">';

//Mappics oder Mapnamen in Lastwars? 

    $wahl='0'; //0=Pics 1=Schrift
    if ( $wahl == '0' ) { $auswahl = '<td><a><img src="include/images/warmaps/'.$row['map'].'.png" width=" 150" height="70" border="0"></a></td>'; } else { $auswahl = '<td><font color="#000000">'.$row['map'].'</font></td>'; }

    $list .= $auswahl;

		$list .= '<td align="center"><font color="#'.$farbe.'">'.$row['opp'].'</font></td>';
		$list .= '<td align="center"><font color="#'.$farbe.'">'.$row['owp'].'</font></td>';



    if ( file_exists ( 'include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v ) ) {
$list .= '
<td>
<img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.jpg" width="150" height="70" border="0">

<div style="position: relative; width: 0px; height: 0px; z-index: 2; left: 0px; top: -70px" id="Ebene1">
<a href="#" onClick="javascript:window.open(\'include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'\',\'bild\',\'height='.$hoehe.',width='.$breite.'\')">
<img src="include/images/warmaps/screen.png" width="150" height="70" border="0">
</a>	
</div>

</td>'; 
} else {
$list .= '<td><img src="include/images/warmaps/no_screen.png" width="150" height="70" border="0"></td>';
}
    		$list .= '</tr>';
	}
return ($list);
}

Dies ist der Teil, um welchen es eigentlich geht:

    if ( file_exists ( 'include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v ) ) {
$list .= '
<td>
<img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.jpg" width="150" height="70" border="0">

<div style="position: relative; width: 0px; height: 0px; z-index: 2; left: 0px; top: -70px" id="Ebene1">
<a href="#" onClick="javascript:window.open(\'include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'\',\'bild\',\'height='.$hoehe.',width='.$breite.'\')">
<img src="include/images/warmaps/screen.png" width="150" height="70" border="0">
</a>	
</div>

</td>'; 
} else {
$list .= '<td><img src="include/images/warmaps/no_screen.png" width="150" height="70" border="0"></td>';
}

Liebe Grüße Chris