Comment retirer les marges d'une photo

Version imprimable

16/01/2009, 11h22
solorac

Comment retirer les marges d'une photo
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:

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:

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

Merci pour votre aide
16/01/2009, 11h47
HiRoN

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 ;)
16/01/2009, 12h04
solorac

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.
16/01/2009, 12h40
HiRoN

Citation:

Envoyé par solorac

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

En haut et à gauche ? 8O
Ne serais-tu pas victime de l'héritage d'une propriété CSS appliqué ailleurs ?
Testé sous quel(s) navigateur(s) ?
16/01/2009, 14h17
solorac

Non car je n'ai aucun autre code dans ma css.
16/01/2009, 14h18
c_s_s
Une idée toute bête : tu es sûr que les marges ne sont pas dans ton image ? :aie:

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:

1 2 3 4 body { margin:0; padding:0; }
Tu constates ce problème sur quel navigateur ?
16/01/2009, 15h15
solorac

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
16/01/2009, 15h25
solorac

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:

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

Après :

Code:

<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
16/01/2009, 15h53
c_s_s
Les tailles indiquées dans ta balise HTML étaient-elles bonnes.

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

1 2 3 .photo img { display:block; }
16/01/2009, 15h54
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 mieu les tailles de pages, images etc. à afficher.

Citation:

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

+ 1...
16/01/2009, 16h20
HiRoN

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

1 pièce(s) jointe(s)

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...
16/01/2009, 16h39
c_s_s

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à. ;)
16/01/2009, 17h20
solorac

Et voilà
Merci pour votre aide

Et aussi merci pour les excellents cours et tutoriels CSS :ccool:
16/01/2009, 21h01
c_s_s

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

Code:

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.
16/01/2009, 22h29
Erwan31

Citation:

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 ;)
19/01/2009, 09h40
solorac

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+
19/01/2009, 09h43
solorac

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