Discussion :

[agrotic]

Bonjour,

je souhaite afficher une image en surimpression sur une page.
j'ai donc fait une DIV de taille null et je déplace l'image en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<style>.addFavorite{ 
position:relative; 
left:500px; 
top:-60px; 
z-index:1000; 
border:0px; }</style>
[...]
<div style="width:0px;height:0px;">
<a href="toto.htm" class="addFavorite">
<img src="/images/img_addfavorite.gif" border="0"></a>
</div>

mon pb : tout est impécable sous FF, mais IE 7 me garde la DIV affichée et me décale le reste de la page de la hauteur de l'image... pas cool

merci à tous ceux qui savent de me dire quel train j'ai bien pu manquer ...
Nico.

[Candygirl]

Dans ton cas il me semble que le positionnement absolu serait plus approprié ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.addFavorite { 
  position:absolute; 
  left:500px; 
  top:-60px;
}

[beeboo]

essaie avec position:absolute;

[agrotic]

merci de votre rapidité
en fait, ma page est centrée en largeur ... du coup, le absolute n'est pas compatible ...

[Candygirl]

en fait, ma page est centrée en largeur ... du coup, le absolute n'est pas compatible ...

?

Le positionnement absolu se fait raport au plus proche encêtre positionné, par défaut la fenêtre du navigateur. Si tu attribues un position:relatif à ton conteneur centré, ton positionnement absolu se fera depuis ce dernier et "suivra" donc ton centrage.

ou alors je n'ai pas compris ce que tu voulais dire

[agrotic]

en fait, je suis en train de rajouter un 'sticker' dans une page faite en HTML à papa (sans positionnement par CSS : tableaux, etc...).
de fait, je n'ai aucun élément positionné à ma disposition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
	<style>.addFavorite{ position:relative; left:500px; top:-60px; z-index:1000; display:block; border:0px; }</style>
	<table cellpadding="0" cellspacing="0" border="0" width="694" align="center">
		<tr>
			<td><img SRC="/images/tetiere.jpg" WIDTH="694" HEIGHT="103" border="0">
			<div style="height:0px;width:0px;"><a class="addFavorite" href="titi.htl"><img src="/images/img_addfavorite.gif" border="0"></a></div>
			</td>
		</tr>
	</table>

le résultat en IMG : FireFox et IE

[Candygirl]

ok je vois...

quite à devoir rajouter un div et bricoler je ferais plutôt du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.addFavorite {
  position:absolute;
  left:500px;
  top:50px; /* à ajuster */
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<td><div style="position:relative;"><img SRC="/images/tetiere.jpg" WIDTH="694" HEIGHT="103" border="0">
			<a class="addFavorite" href="titi.htl"><img src="/images/img_addfavorite.gif" border="0"></a></div>
			</td>

ou, plus simplement pour l'html, et si ça ne porte pas à conséquence pour le retse de la mise en page sur les différents navigateurs:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<td style="position:relative; display:block;">
  <img SRC="/images/tetiere.jpg" WIDTH="694" HEIGHT="103" border="0">
  <a class="addFavorite" href="titi.htl"><img src="/images/img_addfavorite.gif" border="0"></a>
</td>

ou encore, en restant sur un positionnement relatif:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<td>
  <img SRC="/images/tetiere.jpg" WIDTH="694" HEIGHT="103" border="0">
  <a class="addFavorite" href="titi.htl"><img src="/images/img_addfavorite.gif" border="0"></a>
</td>

et en ajoutant dans le css des margin négatifs de la taille de l'image, mais c'est vraiment du bricolage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addFavorite {position:relative; top:-60px;left:500px;display:block; margin-right:-100px; margin-top:-80px;}

Tu as un doctype correctement renseigné en haut de tes pages ? Peut-être une des causes de la mauvaise interprétation de IE avec ton bricolage d'origine.