Webmaster Hub > Régler la bordure d'une photo

Version complète: sur le forum Webmaster Hub : Régler la bordure d'une photo

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

v4np13

jeudi 22 décembre 2005 à 09:36

Bonjour,
J'ai un petit problème de bordure sur cette page: http://objectifd1.celeonet.fr/photos/

Sur IE, bizarrement, ça fonctionne au poil tandis que sur firefox, il y a quelques pixels en trop en bas et à droite.

Voici le code CSS:

CODE

.rssThumbFloat a{
    background-color: transparent;
float: left;
width: 100px;
height: 100px;
border: 2px solid #AAAAAA;
margin: 0 15px 15px 0;
text-align: center;
padding: 2px;
}
.rssThumbFloat a:hover{
border-color: #488ED3;
margin: 0 15px 15px 0;
}
.rssThumb{
    display: block;
    color: #FFF;
    background-color:transparent;
    width: 96px;
    height: 96px;
    text-align: center;
    text-decoration: none;
}
.rssThumbFloat img{
    border:0;
}

Merci pour votre aide

Dan

jeudi 22 décembre 2005 à 13:24

A mon avis c'est le padding qui dérègle le tout.
Sous Internet explorer il s'ajoute à la taille de la boîte, contrairement aux recommandations du W3C.

C'est probablement la raison pour laquelle tu as dû mettre une taille de 96px, pour arriver à 100px avec 2px de padding de part et d'autre

Dan

v4np13

jeudi 22 décembre 2005 à 14:34

Si j'enleve le padding, elle sera calée dans le haut à gauche.

J'aimerai obtenir le résultat qu'on voit sur IE avec FF. J'ai déjà fait quelques essais sans résultats concluants. J'aime bien l'espace entre la photo et la bordure, ça fait un peu "respirer" le site.

Comment puis-je y arriver?

Dan

jeudi 22 décembre 2005 à 14:42

Tout simplement en mettant une marge à la photo. Par exemple 2px en haut et à gauche en lieu et place du padding de la DIV

Dan

v4np13

jeudi 22 décembre 2005 à 14:49

Et oui, c'était encore une fois tout bête

Comment est-ce que je fais pour bloquer sur des trucs aussi élémentaires pfff

Merci Dan :up:

Dan

jeudi 22 décembre 2005 à 15:23

Il faut toujours garder à l'esprit, dès qu'on met du padding, que I.E. ne le gère pas comme il devrait.
Le padding est compté à tort en plus de la taille de la boîte contenante.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.