Problème de superposition (texte sur image)
Résolu
Bonsoir,
J'ai cherché sur le net, mais cela ne correspond pas à ce que je recherche. Au niveau d'un fichier HTML, j'ai un souci au niveau d'un tableau dans lequel il devrait y avoir une superposition, celle d'un texte sur une image, dont j'ai modifié la hauteur, hors le texte se retrouve en-dessous l'image et non sur l'image.
Si quelqu'un a une idée ; merci par avance.
La cellule du tableau :
<tr>
<td><img src="images/left02.gif" width="165" height="32" alt="" border="0"><p class="title">Mon texte</p></td>
</tr>
J'ai cherché sur le net, mais cela ne correspond pas à ce que je recherche. Au niveau d'un fichier HTML, j'ai un souci au niveau d'un tableau dans lequel il devrait y avoir une superposition, celle d'un texte sur une image, dont j'ai modifié la hauteur, hors le texte se retrouve en-dessous l'image et non sur l'image.
Si quelqu'un a une idée ; merci par avance.
La cellule du tableau :
<tr>
<td><img src="images/left02.gif" width="165" height="32" alt="" border="0"><p class="title">Mon texte</p></td>
</tr>
4 réponses
-
Coucou,
HTML:<table> <tr> <td class="imgTD" > <img src="images/left02.gif" alt="" ><p class="title">Mon texte</p> </td> </tr> </table>
CSS:
.imgTD { position:relative; } .imgTD img, .imgTD .title {position:absolute;} .imgTD img { top:0; left:0; width:165px; height:32px; border:none; } .imgTD .title { top:10px; left;10px; }
Après a toi de modifier les valeur de top et left, cela devrait marcher. -
Bonjour Elsyfiryos62,
Le code que tu m'as proposé fonctionne, mais cela a eu pour conséquence de faire disparaître une autre partie de mon tableau (la zone de recherche), mais en jouant sur les marges j'ai réglé le problème.
Merci pour ton aide. -
Salut,
Il faudrait le code CSS qui va avec car c'est lui qui gère la position des éléments!
-
Merci pour ton aide tryan44 ; j'ai essayé "vertical-align: top;", mais cela ne marche pas...
Voilà le code Css :
.title {
color : #FFFFFF;
margin-top : 1px;
padding-bottom : 1px;
margin-bottom : 1px;
margin-left : 37px;
margin-right : 10px;
font-size : 10px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
display: table-cell;
}
