28172 sujets

CSS et mise en forme, CSS3

Problèmes de positionnement d'images dans une table

Bonjour,


Pourriez-vous prendre un peu de votre temps pour m'aider dans mon positionnement d'images ?

En fait, je souhaite simplement que :
- les images (image_0 et image_1) soient centrées horizontalement, et en haut verticalement dans chaque élément de la table.
- La vignette (image_2) doit être fixée au point (160,155) dans chaque élément de la table.
- Les textes tomberaient en dessous de image_0 et image_1

Merci d'avance pour votre aide !



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//" "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;
	cursor: pointer;
	background-color:#FF0;
	position: relative;
}
.case img.image_0,
.case img.image_1 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
}
.hidden {
	display: none;
}
.case img.image_2 {
	position: relative;
	top: 155px;
	left: 160px;
	width: 70px;
	height: 70px;
	z-index: 100;
	border: 1px solid #CBCACA;
}
.case:hover img.image_2 {
	display: block;
}
.case img.image_2:hover ~ .image_0 {
	display: none;
}
.case img.image_2:hover ~ .image_1 {
	display: block;
}
.case p {
	position: absolute;
	top: 215px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
}

-->
</style>
</head>

<body>
<table>
	<tr>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
    </tr>
	<tr>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='70' height='70' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' width='211' height='211' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' width='211' height='211' />
            <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        </td>
    </tr>
</table>


</body>
</html>

Modifié par jytest (11 Jun 2013 - 10:29)
Sujet clos
Aller à