Comment retirer les marges d'une photo

**solorac** · 16/01/2009, 11h22

Bonjour la Communauté,

J'avais effectuer l'opération avec succès il y a 3 ou 4 ans mais impossible de me souvenir de la manip.

J'ai une simple photo sur une page html (cette page sera redimmensionner à la taille d'une pop-up), mais je voudrai qu'il n'y ait aucune marge aucune.
Hors, avec le code suivant je l'ai comment faire pour la retirer ?

Voiçi le code html (très simple)

Code :

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

1
2
3
<body>
<div class="photo"><img src="plateforme1.jpg" width="730" height="487" alt="Vue 1 sur l'entrepot" /></div>
</body>

Et la Css

Code :

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

.photo{margin:0; padding:0;}

Merci pour votre aide

**HiRoN** · 16/01/2009, 11h47

Salut,

En faisant ceci, tu retires les marges du div englobant l'image seulement.
Appliques la class directement sur l'image ou spécifie une hauteur à ton div

**solorac** · 16/01/2009, 12h04

cela ne fonctionne pas j'ai toujours une marge identique en haut et a gauche.
Je vais essayé de retrouvé une méthode que j'avais réalisé il y a quelques temps.

**HiRoN** · 16/01/2009, 12h40

Envoyé par solorac

cela ne fonctionne pas j'ai toujours une marge identique en haut et a gauche.

En haut et à gauche ?

Ne serais-tu pas victime de l'héritage d'une propriété CSS appliqué ailleurs ?
Testé sous quel(s) navigateur(s) ?

**solorac** · 16/01/2009, 14h17

Non car je n'ai aucun autre code dans ma css.

**c_s_s** · 16/01/2009, 14h18

Une idée toute bête : tu es sûr que les marges ne sont pas dans ton image ?

Sinon, tu es sûr que ce sont les marges autour de l'image que tu vois, ce ne serait pas les marges naturelles du body ?

Ca change quelque chose si tu mets dans la feuille de style :

Code :

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

1
2
3
4
body {
margin:0;
padding:0;
}

Tu constates ce problème sur quel navigateur ?

**solorac** · 16/01/2009, 15h15

Salut,

Non ce n'est pas dans mon image
Mais appliquant ta solution, la marge de gauche et en haut a disparue.
Il reste celle du bas je crois 1 px et celle de droite environ 10px.
Je n'arrive pas a voir où cela peut etre parametrer.
A+

Mon navigateur est ie7

**solorac** · 16/01/2009, 15h25

J'ai trouvé la solution, ou presque car il semblerait qu'il subsiste un petit pixel, m'enfin....

Dans ma nouvelle fenetre, je ne mets plus les dimensions de la photo.

Avant :

Code :

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

<div class="photo"><img src="plateforme1.jpg" width="700" height="487" alt="Vue 1 sur l'entrepot" /></div>

Après :

Code :

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

<div class="photo"><img src="plateforme1.jpg" alt="Vue 1 sur l'entrepot" /></div>

Est-ce normal ?? Je ne saurais dire.

Merci pour ton aide

**c_s_s** · 16/01/2009, 15h53

Les tailles indiquées dans ta balise HTML étaient-elles bonnes.

Sinon, tu peux essayer d'ajouter ça dans la feuille de style :

Code css :

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

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

**HiRoN** · 16/01/2009, 15h54

Il est pourtant, il me semble, conseillé de mettre les attributs width & height notamment pour les navigateurs dits "portables" qui utiliseraient ces attributs afin de calculer au mieu les tailles de pages, images etc. à afficher.

Les tailles indiquées dans ta balise HTML étaient-elles bonnes ?

+ 1...

**HiRoN** · 16/01/2009, 16h20

Sinon, fournis la totalité de ta page XHTML (DocType inclus) + CSS + pourquoi pas l'image en question (afin de reproduire le cas réel)

**solorac** · 16/01/2009, 16h26

Oui, bien sur les tailles indiquées sont bonnes.

J'ai rajouté Display, mais rien à faire j'ai toujours ce petit pixel qui traîne.

Rageant...

Ok, voici ma page html, la css et la photo

Bon j'ai aussi le pb du centrage de la popup que je suis en train de traiter dans le forum javascript...

**c_s_s** · 16/01/2009, 16h39

Je crois que tu nous as donné le code HTML de la page qui ouvre le popup.

Il nous faudrait plutôt le code HTML du popup si la photo est sur cette page là.

**solorac** · 16/01/2009, 17h20

Et voilà
Merci pour votre aide

Et aussi merci pour les excellents cours et tutoriels CSS

**c_s_s** · 16/01/2009, 21h01

Dans ta page photo1.html, il y a un script avec cette ligne :

Code javascript :

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

var demiH=((hauteur-487)/2);

La marge sous ta photo vient peut-être du fait que 487/2 ne donne pas une valeur entière.

Est-ce que tu peux couper ta photo pour qu'elle fasse 486px de haut, et modifier le script en conséquence.
Ca pourrait peut-être résoudre le problème.

**Erwan31** · 16/01/2009, 22h29

Envoyé par HiRoN

Il est pourtant, il me semble, conseillé de mettre les attributs width & height notamment pour les navigateurs dits "portables" qui utiliseraient ces attributs afin de calculer au mieux les tailles de pages, images etc. à afficher.

Oui mais pas que les navigateurs pour mobile, les navigateurs graphique en général même si c'est plus crucial pour les navigateurs mobiles au vu du faible débit sur appareil portatifs.
En revanche ils servent à savoir si le navigateur pour mobile peut ou non afficher l'image.
Au delà d'une certaine limite, il ne l'affichera pas (en principe en tous cas).

Sans ces attributs, le navigateur ne réserve pas l’espace qu’elle prendra une fois chargée dès le chargement de la page et doit attendre le chargement complet de l'image pour afficher le contenu qui la suit.

D'autre part ces attributs permettent aussi à Google Image d'extraire et d'afficher les images dont les préférences de tailles ont été définies dans les options de recherche.
Il doit sans doute exister plein d'autres cas ou ses attributs sont utiles, il ne faut donc jamais les oublier, ils font partie des propriété intrinsèques d'une image.

Bonne soirée

**solorac** · 19/01/2009, 09h40

Bonjour,

Oui, je peux mettre aussi 486 et couper légerement la photo, mais cela ne résoudra pas le problème de la marge à droite, celle du bas peut-être. Je vais essayer de ce pas et je te tiens au courant

A+

**solorac** · 19/01/2009, 09h43

Négatif, la modif ne change rien.
Je vais encore chercher et tiens le forum informé

Comment retirer les marges d'une photo

CSS

Discussions similaires

Partager

Partager