Image découpée en CSS

Bonjour,
Je cherche à créer un cadre dans lequel je mettrais des images.
J'ai fait 3 tableaux.

Tab1:
Contient l'image haute du cadre

Tab2:
Contient le coté gauche du cadre, puis les images, puis le cadre droit.
Cela sur 2 ligne

Tab3:
Contient l'image basse du cadre.

Mon problème est que l'image du tableau 1 ne colle pas aux images du dessous...

A priori, il faudrait faire cela avec du CSS...
Cela reglerait il mon problème?
Je n'ai pas trouvé de tutorial à ce sujet...
Quelqu'un a une adresse?
;)

Voici l'image éclatée de mon tableau:
http://img207.imageshack.us/img207/5934/tableaud.jpg

Bonjour,

tu utilises des tableaux pour ta mise en page, et je pense que ca serait pas plus mal de faire ca avec des DIV et du CSS : un DIV par vignette, certainement en utilisant la propriété Float.

Sinon, montre nous ton code, et on pourra peut etre te dire d'où vient le décalage

bonsoir,

une piste :

Code:

---

border-collapse:collapse;

---

Cette valeur est par defaut : "separate" .

GC

Merci pour ces premières réponses.
Plusieurs choses:
Tout d'abord, la tableau éclaté ci dessus n'a cette forme que pour que vous compreniez comment il a été composé...
Je n'ai heureusement pas tous ces espaces dans les cellules.
Ce n'est qu'entre le premier tableau et le second, c'est à dire entre l'image haute du cadre et le reste que j'ai un espace.
Et cela, j'ai oublié de le préciser: uniquement sous IE...
Gros oublie pardonnez moi car cela doit être significatif.

D'autre part, je suis tout à fait intéressé de faire ce tableau dans les régles, c'est à dire en css avec des div, mais je ne sais pas du tout comment faire.
J'ai fait des recherches mais n'est pas trouvé de réponse à mon problème précis...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<TABLE BORDER="0" summary="" width="500px" cellspacing="0" cellpadding="0"> <tr> <td style="text-align: left;"> <img src="/images/perso/cadre_prod.jpg"> </td> </tr> </table>   <table border="0" summary="" width="500px" cellspacing="0" cellpadding="0"> <tr> <td style="text-align: left;" width="12px"><img src="/images/perso/cadre_prod_gauche.jpg"></td> <td style="background-color: #f4f4f4;"><?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bag_coq1.png"</a>'; ?> </td> <td style="background-color: #f4f4f4;"><?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bag_coq1.png"</a>'; ?> </td> <td style="background-color: #f4f4f4;"><?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bag_coq1.png"</a>'; ?> </td> <td style="text-align: right;" width="12px"><img src="/images/perso/cadre_prod_droite.jpg"> </td> </tr> <tr> <td style="text-align: left;" width="12px"><img src="/images/perso/cadre_prod_gauche.jpg"></td> <td style="background-color: #f4f4f4;"><?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bra1.png"</a>'; ?> </td> <td style="background-color: #f4f4f4;"> <?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bra1.png"</a>'; ?> </td> <td style="background-color: #f4f4f4;"> <?php echo '<a href="http://www.MONSITE.com/index.php?cPath=21"><img src="/images/perso/bra1.png"</a>'; ?> </td> <td style="text-align: right;" width="12px"><img src="/images/perso/cadre_prod_droite.jpg"> </td> </tr> </table>   <TABLE BORDER="0" summary="" width="500px" cellspacing="0" cellpadding="0"> <tr> <td style="text-align: left;"> <img src="/images/perso/cadre_prod_bas.jpg"> </td> </tr> </table>

---

EDIT:

Voila, c'est juste sous le premier tableau que j'ai l'espace.
La petite ligne blanche...
Et ce uniquement sous explorer...:
http://img207.imageshack.us/img207/6947/tableaum.jpg

c'est sûr que ca va être compliqué pour faire des bords arrondis (faisable, mais pas trivial). La propriété CSS existe mais ne fonctionnera pas sur IE, ce qui limite son utilisation.

une piste sans les tableaux :
HTML

Code:

---

1 2 3 4 5 6 7 8

<div id="contenu"> <div class="vignette"><img src="petitbob.jpg" /></div> <div class="vignette"><img src="petitbob.jpg" /></div> <div class="vignette"><img src="petitbob.jpg" /></div> <div class="vignette"><img src="petitbob.jpg" /></div>   <div class="clear"></div> </div>

---

CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div#contenu { border : 2px solid #D7D7D7; background-color : #F4F4F4; width : 70%; height : 500px; }   div.vignette { float : left; border : 1px solid black; }   .clear { clear : both; }

---

sinon, pourquoi as tu absolument besoin de ton tableau 1 ? tant que tu es avec les tableaux, un seul doit suffir.
Et dans le code que tu nous as donné, les balises img ne sont pas fermées (dans le PHP)

Merci Sebhm,
Exactement ce qu'il me fallait... :ccool:

En revanche je ne comprends pas trop le fonctionnement, c'est facilement explicable?

EDIT:

Bon, j'ai essayé de comprendre en regardant sur Gloogloo...
Le contenu représente le cadre bleu.
Le vignette le cadre noir.
Et le clear both est une sorte de fin de paragraphe c'est ça?

Concernant le vignette, je n'en ai pas trop besoin car en fait, le cadre arrondi, le cadre arrondi noir et le bouton tarif sont une seule et meme image.

Voici donc le résultat de mon code sachant que j'ai supprimé le "vignette" de mon stylesheet.css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div id="contenu">   <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <BR><BR> <img src="/images/perso/bag_coq1.png"></a>'; ?>&nbsp;&nbsp;&nbsp;&nbsp; <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <img src="/images/perso/bag_coq1.png"></a>'; ?>&nbsp;&nbsp;&nbsp;&nbsp; <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <img src="/images/perso/bag_coq1.png"></a>'; ?> <BR><BR>   <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <img src="/images/perso/bra1.png"></a>'; ?>&nbsp;&nbsp;&nbsp;&nbsp; <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <img src="/images/perso/bra1.png"></a>'; ?>&nbsp;&nbsp;&nbsp;&nbsp; <?php echo '<a href="http://www.monsite.com/index.php?cPath=21"> <img src="/images/perso/bra1.png"></a>'; ?>   <div class="clear"></div> </div>

---

J'ai compensé la définition des marges supérieures et inférieures avec des BR.
Y avait mieux à faire je suppose.
Je vais chercher les parametres marge en CSS...
;)

je ne saurais trop te conseiller les excellents articles de Openweb sur le positionnement :

1.flux et position relative
2.position float
3.position absolue et fixe


le N°2 étant celui qui t'interesse par rapport à ton post

Merci Sebhm, adresse tout à fait intéressante!
Je me penche sur tout ça.
:ccool: