[css] Positionnement d'une img par rapport a une autre img

25 févr. 2006, 20:46

J'ai une image qui se situe dans un tableau [voir la page]

<table width="930" height="700" border="0" align="center" cellpadding="0" cellspacing="0" class="txt" id="table" style="border: 1px solid #000000;">
  <tr>
    <td id="cell" align="center"><img src="img/galaxie.jpg" id="carte_galaxie" style="cursor : crosshair;" width="600" height="600" border="0" usemap="#galaxie"></td>
  </tr>
</table>

J'aimerai positioné sur celle ci une autre image et le 0 serait le coin supérieur-gauche de cette même image comment faire ?

la source qui me donnera le positionnement des images est en php :

<?
$sql = mysql_query("SELECT coord_x, coord_y FROM planetes WHERE players=".$_SESSION['id_user']);
if (mysql_num_rows($sql) != 0)
{
	while (list($coord_x, $coord_y) = mysql_fetch_row($sql))
	{
		$left = $coord_x-15;
		$top = $coord_y-15;
		echo('<img src="img/vous-ici.gif" width="30" height="30" style="position: absolute; top: '.$top.'px; left:'.$left.'px;">');
	}
}
?>

si vous aviez une idée

25 févr. 2006, 21:08

Il faut que l'image positionnée soit à l'intérieur d'un élément qui soit lui-même positionné, même en relatif éventuellement : de cette manière, la seonde image sera en absolu par rapport aux dimensions de l'élément parent dans lequel elle est insérée.

26 févr. 2006, 01:03

http://test.derniere-bataille.net/carte_galaxie.html

y'a plus qu'un pb sous ie il en veux pas de mon positionnement ...

c'est con parce que la ça fonctionne ^^

j'y suis presque quoi

26 févr. 2006, 12:29

J'ai essayer de trouver comment tu positionnais des éléments, pour les trois cercles, je n'ai pas trouvé. Le principe est le suivant :

Dans un élément positionné, tu peux positionner d'autres éléments à l'intérieur. Exemple :

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Éléments positionnés</title>
<style type="text/css">
/* <![CDATA[ */
#carre {
    width: 400px;
    height: 400px;
    border: 3px dashed #ccc;
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -200px;
}
#point1 {
    position: absolute;
    top: 200px;
    left: 205px;
    border: 1px solid #c00;
    margin: 0;
}
#point2 {
    position: absolute;
    top: 100px;
    left: 155px;
    border: 1px solid #c00;
    margin: 0;
}
/* ]]> */
</style>
</head>
<body>
<div id="carre">
  <p  id="point1">1</p>
  <p id="point2">2</p>
</div>
</body>
</html>

Affiche ce code dans n'importe quel navigateur et inspire-t-en pour ajuster ta feuille de style.

26 févr. 2006, 14:04

J'ai essayer de trouver comment tu positionnais des éléments, pour les trois cercles, je n'ai pas trouvé.

Code : Tout sélectionner

<td height="600" align="left" valign="top" background="http://game.derniere-bataille.net/img/fond_carte.jpg" id="cell"> 
      <img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 478px; padding-left:162px; z-index: 0;"><img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 337px; padding-left:466px; z-index: 0;"><img src="http://game.derniere-bataille.net/img/vous-ici.gif" width="29" height="29" style="position: absolute; padding-top: 482px; padding-left:476px; z-index: 0;"> 
      <img src="http://game.derniere-bataille.net/img/galaxie.gif" id="carte_galaxie" style="cursor : crosshair; position: absolute; z-index: 1;" width="600" height="600" border="0" usemap="#galaxie"></td>

une simple superposition avec des padding ... mais sous ie les padding il en veux pas

26 févr. 2006, 14:17

Au lieu d'un padding, fais un positionnement, là ça va fonctionner, position relative, ce sera relatif à l'élément parent, donc la cellule td

26 févr. 2006, 15:52

plus simplement avec un margin ça a l'air de fonctionner

26 févr. 2006, 16:00

Méfie-toi, les marges sont parfois diversement interprétées d'un navigateur à l'autre, un positionnement sera beaucoup plus sûr :
Si tu positionnes ton vaiseau près de Tatooïne sous Firefox, il risque de se retrouver près de Dagobah sous Internet Explorer : les conséquences risquent de varier un peu dans la vision du jeu même si les actions auront théoriquement la même conclusion.

26 févr. 2006, 16:04

j'ai fais les tests

sous 800*600 / Win 98SE

ok pour les 2 navigateurs
sous 1024*768 / Win XP

ok pour les 2 navigateurs
sous 1280*1024 / Win XP

ok pour les 2 navigateurs
sous 1600*1200 / Win XP

ok pour les 2 navigateurs

et sous mon pc : 1440*768 / Win XP

ok pour les 2 navigateurs

je crois que c'est bon ^^

c'est résolu

merci de ton aide en tt cas

l'exemple du positionnement je le garde il est pas mal

26 févr. 2006, 16:09

Alors c'est excellent, que la force soit avec toi

26 févr. 2006, 16:09

tu veux venir essayer le jeu une fois fini

26 févr. 2006, 16:13

Je ne suis habituellement pas très jeux online, mais c'est pas exclus que je vienne faire un tour, pourquoi pas, en Dark Cyranus, je serait peut-être acceptable pour me faire éclater la tête en deux coups de sabre laser

26 févr. 2006, 16:15

gniark ... tu peux venir en simple programmeur pour donner des conseils

26 févr. 2006, 16:18

Ben tu me préviendras quand ce sera opérationnel et j'irai faire un tour, mais je ne promets pas une grande assiduité

[css] Positionnement d'une img par rapport a une autre img

Qui est en ligne