2009-06-16 12 views
3

J'ai des problèmes avec les images d'une table. Bien que je mette tr width = 95, et que l'image ait aussi une largeur de 95, le tr aura automatiquement une largeur de 97 (padding de 2 px sur la droite).Image Padding en CSS, HTML

Cependant, j'ai explicitement déclaré style = "padding: 0px".

Une page échantillon est la suivante: http://beta.worcell.com/sony.html

Un autre problème que j'ai est le flèches haut et bas (dans la colonne d'achat). Je voudrais qu'ils aient un espacement égal à partir de la zone de texte, mais ajouter un autre saut de ligne à la flèche du bas créerait trop d'espace. Serais-je capable de changer cela en CSS?

Merci.

+3

Firebug est votre ami apprendre à l'utiliser :) https: //addons.mozilla.org/fr-fr/firefox/addon/1843 –

Répondre

8

Le rembourrage ne semble pas être le problème, ce sont les marges définies. Dans la feuille de style, vous avez: la partie est ce qui fait vos images 97px plutôt que 95px. Réglez-le sur "marge: 0px;" et les images semblent normales. Ensuite, vous devez également ajouter,

menu img { 
    margin: -2px; 
} 

afin de garder vos images de menu alignées comme vous les aviez.

Pour les flèches haut et bas, vous devez repenser votre balisage. Le lien vers le bas est dans un formulaire, mais le lien vers le haut n'est pas, ce qui est un peu incohérent. Elles sont également contenues dans les balises de paragraphe qui s'affichent sous forme de blocs, ce qui les fait apparaître l'une sous l'autre, donc la flèche vers le bas n'apparaît qu'après le bas de la boîte de quantité, etc.

+0

merci pour la réponse. J'ai édité le CSS, et ça a l'air mieux maintenant. Cependant, il y a toujours un espace entre l'image du produit et la bonne bordure, comment dois-je procéder pour les changer? – segfault

3

partie du problème est le suivant: dans styles.css (ligne 77) vous avez

tr td { 
    border:1px solid #DDDDDD; 
    padding:0.6em; 
} 
4

vous devez commencer avec un good css reset. cela devrait prendre soin des problèmes de remplissage pour vous. importer le css reset comme premier style CSS sur votre page, et partir de là.

aussi, ne l'utilise

<br/> 

si vous pouvez l'aider. tout ce que br fait peut être réalisé en utilisant la marge

+1

Il y a des moments où un élément
est correct. par exemple. 1600 Pennsylvania Ave
NW Washington,
DC 20500,
États-Unis – Quentin

+0

Même cela pourrait peut-être être mieux fait en utilisant un microformat: http://microformats.org/wiki/adr il est extrêmement verbeux mais il aide les agents utilisateurs à comprendre le document - et vous pouvez coiffer les balles. – Oli

0

"padding: 0px" dans votre code s'applique à la cellule du tableau dans ce cas, pas l'étiquette de l'image.

0

Vous devez:

styles.css (line 15) 
img { 
border:0 none; 
margin:-2px; <-- remove this 
padding:0; 
} 

styles.css (line 77) 
tr td { 
border:1px solid #DDDDDD; 
padding:0.6em; <-- remove this 
} 
0

Hmmmmm, 152 mises en garde en HTML Validator, de nombreuses balises non fermées ....

pour le problème spécifique de l'espace à côté de l'image, vous pouvez essayer de retirer le espace blanc entre le </une étiquette > et la </td > tag.