Discussion :

[Anduriel]

Salut,
J'ai un div auquel je mets un padding:0.
Comme premier contenu de ce div, j'insere une image. Dans ses attributs j'ai mis margin et padding aussi à 0. Le problème c'est qu'il existe toujours un déclage de 2px entre mon image et le haut de mon div:



ici c'est la zone rose qui est le padding par défaut.
Comment régler ce problème et faire coller l'image au bord?
Merci

[Linaa]

Tu peux poster le code HTML/CSS correspondant?

[MasterOfChakhaL]

Ce n'est pas une solution à ton problème (j'attends de voir le code) mais avec le morceau d'image que tu nous montre, j'ai l'impression que tu aurais tout interêt à la mettre en image de fond (qui est facilement positionnable)

[Taum]

Petit truc pour virer toutes les marges/padding/border par défaut :
* { border: 0; padding: 0; margin: 0; }

Essaye de rajouter cette regle dans ton CSS et tu sauras si c'est effectivement dû à un padding par défaut ou pas

[Anduriel]

Salut,
Pour l'image en fond, j'aimerai éviter, sauf si c'est vraiment nécessaire.
Sinon les margin, padding, border 0 ne changent rien.

Voila le code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="blockcentre">
   <img src="images/top.gif" alt="" />
   <div class="lien"><img src="images/accueil.gif" alt="Informations" /> <a href="#" class="principal">Informations</a></div>
   <div class="lien"><img src="images/miseajour.gif" alt="Mises à jour" /> <a href="#" class="principal">Mises à jour</a></div>
   <div class="lien"><img src="images/demande.gif" alt="Demande" /> <a href="#" class="principal">Demande</a></div>
   <div class="lien"><img src="images/telecharger.gif" alt="Téléchargements" /> <a href="#" class="principal">Téléchargements</a></div>
   <div class="lien"><img src="images/screenshots.gif" alt="Screenshots" /> <a href="#" class="principal">Screenshots</a></div>
   <div class="lien"><img src="images/signezle.gif" alt="Signez-le!" /> <a href="#" class="principal">Signez-le !</a></div>
   <img src="images/bottom.gif" alt="" />
</div>

Et CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
div.lien {
 color: maroon;
 background: #FCF8EC;
 padding-top: 5px;
 margin:0;
 width: 300px;
 padding-left: 20px;
 border-bottom: 1px solid;
 border-color: #F7EACB;
}
div.blockcentre {
 margin-left: auto;
 padding: 0;
 margin-right: auto;
 text-align: left;
 margin-top: 150px;
 border: 1px solid maroon;
 width: 300px;
}
img {
 vertical-align: middle;
 border:0;
 margin: 0;
 padding: 0;
}

Merci

[MasterOfChakhaL]

Peut-être ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.blockcentre img {
  display: block;
}

[Anduriel]

C'est exactement ça!
Merci