28173 sujets

CSS et mise en forme, CSS3

[Résolu] Superposer texte sur image sans div

Bonjour à tous,

Je cherche une méthode permettant de superposer un texte sur une image dans un tableau sans avoir à mettre l'image en background (car l'image est une information).

Pour le moment, j'utilise un margin-bottom négatif sur la classe donnée aux images ; cela fonctionne sur firefox et devinez quoi... pas sur ie... le texte se met en dessous de l'image...

Si quelqu'un a une astuce ! Merci de m'en faire part !

Goldooo Smiley decu
Modifié par goldooo (01 Sep 2007 - 19:07)
Tu peux mettre ton cadre contenant (le tableau) en position relative ce qui te permettra d'utiliser les positions absolue relativement à celui-ci. Bien sur il faut mettre un z-index supérieur à l'élément qui sera au premier plan.
coucou Smiley smile

j'ai essayé de parvenir au résultat que tu recherches.

ça donne :


<!--code xhtml-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table>
  <tr>
    <td>
    <div id="conteneur-1">
        <div id="image-1"><img src="back.gif" alt="image" /></div>
        <div id="texte-1">texte</div>
    </div>
    </td>
    <td>
    <div id="conteneur-2">
        <div id="image-2"><img src="back.gif" alt="image" /></div>
        <div id="texte-2">texte</div>
	</div>
    </td>
  </tr>
</table>

</body>
</html>




/* CSS Document */
*{
padding: 0;
margin: 0;
border: 0;
}

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 10px;
}

#conteneur-1, #conteneur-2{
position:relative;
background-color: red;
width: 50px;
height:50px;
}

#texte-1, #texte-2{
position:absolute;
top: 15px;
left: 10px;
}

J'ai utilisé cette image : http://img375.imageshack.us/img375/4764/backjw6.gif

sur ff et ie ça fonctionne et ça donne : http://img394.imageshack.us/img394/1580/resultatod9.gif
Merci à vous deux pour vos suggestions !

matmat : J'ai essayé, sous FF pas de problèmes mais IE ne prend pas en compte que la div qui contient le tableau est en overflow... Tout mon contenu déborde.

buh31 : Ta solution avec div reste la plus stable, tu commences à me convaincre d'utiliser quand même des div pour mon problème Smiley smile
Re

Finalement en investigant un peu dans la direction absolue - relative et z-index j'ai réussi! Merci pour ton conseil Matmat ! Smiley biggrin
Sujet clos
Aller à