28172 sujets

CSS et mise en forme, CSS3

Problème avec les avant-plans ! z-index fonctionne pas !

Bonsoir,


J'ai un souci avec un des div en avant-plan.
J'ai beau utiliser la propriété z-index = 100...

Rien n'y fait, cela ne fonctinne pas !
C'est bizarre ce truc !
Pourquoi ?

Puis-je vous demander votre aide ?
D'avance, je vous en remercie !

Bonne soirée.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
.case {
	width: 235px;
	height: 300px;
	border: 1px;
	border-color: #CBCACA;
	border-style: solid;
	padding: 0px 5px 0px 5px;
	margin: 0px 20px 10px 0px;
}
.miniature {
	position: relative;
	top: 170px;
	left: 190px;
	width: 40px;
	height: 40px;
	z-index: 100;
	background-color: #FF0000;
}
-->
</style>
</head>

<body>
<table>
	<tr>
        <td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
    </tr>
 	<tr>
        <td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
    	<td>
        <div class='case'>
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or</br>description...<br>99 €</p>
        <div class='miniature'>&nbsp;</div>
        </div>
      	</td>
    </tr>
</table>

</body>
</html>
J'ai bien une solutin.
Mais n'y a-t-il pas plus propre ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
.case {
	width: 235px;
	height: 300px;
	border: 1px;
	border-color: #CBCACA;
	border-style: solid;
	padding: 0px 5px 0px 5px;
	margin: 0px 20px 10px 0px;
}
.miniature {
	position: relative;
	top: 170px;
	left: 190px;
	width: 40px;
	height: 40px;
	z-index: 100;
	background-color: #FF0000;
}
-->
</style>
</head>

<body>
<table>
	<tr>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
    </tr>
 	<tr>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
        </td>
    	<td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' alt='bague' style='text-align:center;'>
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div class='miniature'>&nbsp;</div>
        </div>
      	</td>
    </tr>
</table>

</body>
</html>
Sujet clos
Aller à