Besoin d'aide pour CSS

[jeromax]

Salut
je suis en train d'essayer de mettre mon site en CSS
Je suis bloqué sur un petit problème.
Voila mon code d'origine:

<table cellpadding="3px" background="cadre.gif">
  <tr><td>
    <a href="url">
      <img src="vignette.jpg">
    </a>
  </td></tr>
</table>

Avec ce code, j'ai ma vignette centrée au milieu d'un cadre (_cadreImage.gif)
car cadre.gif est 3px plus grand de tous les cotés par rapport à vignette.jpg

Mon problème, c'est que je n'arrive pas à avoir le même résultat avec les CSS
Pour le moment, mon code c'est:

<style>
.cadreVignette{
    width:156px;
    height:119px;
    background-image:url('cadre.gif');
    padding:3px;
}
</style>
[...]
<div class="cadreVignette">
  <a href="url">
    <img src="vignette.jpg">
  </a>
</div>

mais c'est moche !
Comment je peux centrer(hauteur & largeur) une image au milieu d'un div ?

 

[jerome347]

Juste une idée : en mettant un padding sur l'image au lieu du cadre ?

 

[Sébastien Billard]

Tu a une propriété background-position: center;

 

[jeromax]

Tu a une propriété background-position: center;

merci je ne connaissais pas, et ça marche !
j'ai rajouté aussi text-align:center dans les propriétés de la div qui contient le cadre.Du coup, l'image est bien centrée horizontalement dans son cadre, mais pas verticalement et comme le valign ne marche que pour les <td> ...
j'ai essayé avec les padding et les margin, mais ça fout tout en l'air...
:cry:

 

[jerome347]

<style>
.cadreVignette{
    width:156px;
    height:119px;
    background-image:url('cadre.gif');
}
.cadreVignette img {
    width:150px;
    height:113px;
    padding:3px;
}
</style>
<div class="cadreVignette">
	<a href="url">
		<img src="vignette.jpg">
	</a>
</div>

:?:

 

[jeromax]

YES ! !
mais avec margin à la place de padding
COOOL ! !
Merci ! !

 

[yanhl]

Sans vouloir être chiant :
http://www.w3.org/TR/CSS21/

Lire ça, c'est non seulement pouvoir refaire tout son code avec des tables en CSS propre, mais aussi aller plus loin, jusqu'à simplifier son code coté serveur.

J'ai mis le lien pour ceux qui voudraient s'y mettre à fond : cette doc semble difficile d'accès, mais j'en ai vu aucune autre aussi lisible et précise.
Sérieusement, si vous avez quelques jours de libres devant vous, lisez-la, faites des tests, et vous ne coderez plus de la même manière.
Surtout si vous faites des intranets pour Mozilla :lol: