Problème de superposition (texte sur image)
Résolu
rick7
Messages postés
258
Date d'inscription
Statut
Membre
Dernière intervention
-
rick7 Messages postés 258 Date d'inscription Statut Membre Dernière intervention -
rick7 Messages postés 258 Date d'inscription Statut Membre Dernière intervention -
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>
A voir également:
- Superposer un texte sur une image html css
- Extraire texte d'une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Légender une image - Guide
4 réponses
Coucou,
HTML:
CSS:
Après a toi de modifier les valeur de top et left, cela devrait marcher.
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.
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.
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;
}
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;
}