Discussion :

[Flodelarab]

Il parait que la différence entre "div" et "span", c le saut de ligne .... mais quand j'ecris ce qui suit il me met les 2 images (superpositions de plusieurs images) l'une dessous l'autre.

Que faire? une idée?
pkoi ne me met il pas tout a la suite ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<span style="position:relative;"> 
 
<SPAN style="position: absolute; top: 00px; left: 00px;"> <IMG SRC="fondgr.gif" > </SPAN>  
<SPAN style="position: absolute; top: 216px; left: 172px;"> <IMG SRC="BBGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 216px; left: 138px;"> <IMG SRC="BBGR.gif" > </SPAN> 
 
</span>
 
<span style="position:relative;">
 
<SPAN style="position: absolute; top: 00px; left: 00px;"> <IMG SRC="fondgr.gif" > </SPAN>  
<SPAN style="position: absolute; top: 187px; left: 257px;"> <IMG SRC="BBGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 245px; left: 223px;"> <IMG SRC="BBGR.gif" > </SPAN>
 
</span>

[francis m]

sauf erreur de ma part, les position absolute sont spécifiques à une balise de type bloc comme div, et pas de type inline comme span

la différence entre les deux n'est pas le saut à la ligne. div est un bloc, à considérer comme un paragraphe, tandis que span sert à modifier un style à l'intérieur d'un paragraphe, par exemple mettre un mot en couleur

[Flodelarab]

sauf erreur de ma part, les position absolute sont spécifiques à une balise de type bloc comme div, et pas de type inline comme span

Ben, en l'occurence, non.
Voila ma source

Comment superposer des images en permettant à l'image de fond d'etre considéré comme un caractère ?

J'arrive a superposer mais 2 groupes sont placé l'un sous l'autre et non l'un après l'autre

[Flodelarab]

Ayéééééééééééééééé

g trouvé!

Il y a les balises blocs avec les sauts de lignes et les balises inline, sans saut de ligne. Donc, ça, c t bon.

Le html n'est que du texte, qu'on interprete si on trouve une balise. Rien de nouveau jusqu'ici.

MAIS

Le positionnement absolu ou fixé sort l'objet du texte (ou du flux) pour le positionné non pas par rapport au parent mais au dernier ancêtre positionné.
Un élément est dit positionné si son positionnement est absolu ou fixé.

trublion du groupe, le positionnement relatif est hybride: l'élement n'est pas sorti du texte mais positionné quand même.

Conclusion: On crée un conteneur inline (avec span) positionné relativement. toutes les images a l'intérieur positionnées en absolu.

Ce code HTML est en fait généré par du code php. Je vais pouvoir avoir mon image de fond compté comme un caractère normal et mettre par dessus mes éléments variable, puis continuer le texte comme ci de rien était.
Voici le texte qui marche:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<SPAN style="position: relative; top: 00px; left: 00px;"> 
<IMG align="top" SRC="fondgr.gif" > 
 
<SPAN style="position: absolute; top: 71px; left: 155px;"> <IMG SRC="BNGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 71px; left: 189px;"> <IMG SRC="BNGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 100px; left: 138px;"> <IMG SRC="BNGR.gif" > </SPAN> 
 
</span> 
 
<SPAN style="position: relative; top: 00px; left: 00px;"> 
<IMG align="top" SRC="fondgr.gif" > 
 
<SPAN style="position: absolute; top: 42px; left: 70px;"> <IMG SRC="BNGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 71px; left: 87px;"> <IMG SRC="BNGR.gif" > </SPAN> 
<SPAN style="position: absolute; top: 71px; left: 121px;"> <IMG SRC="BNGR.gif" > </SPAN> 
 
</span>