28172 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage de trois photos côte à cote

Bonjour à la communauté,
Je coince sur un problème probablement banal de mise en place de trois photos côte à côte.
J'ai bricolé sous Excel un programme de mise à l'échelle de trois photos de tailles différentes afin qu'une fois réduites, les exigences suivantes soient respectées :
- les trois photos côtes à côtes doivent loger dans un conteneur de 980 px de large,
- les trois photos doivent avoir la même hauteur,
- les marges, bordures et padding adoptés en CSS doivent être respectées.
Cela fonctionne très bien et me fournit trois images théoriquement contenues dans leur conteneur : largeur totale 979 px (donc inférieure à celle du conteneur 980 px).
Lorsque je rentre ces trois images dans ma page HTML de test, la troisième photo, au lieu de s'afficher à la droite de la seconde, se retrouve sous les deux autres (aussi bien avec FF 16 qu'avec IE 8).

Evidemment, en pratique, il me suffirait de très légèrement réduire les dimensions des trois photos mais mon problème de fond est de comprendre pourquoi ce qui est censé se produire ne se produit pas Smiley decu

Si quelqu'un pouvait m'indiquer ce qui ne colle pas dans mon test, il me rendrait un grand service car je cherche en vain depuis des jours.

La page HTML de test se trouve à l'adresse :
http://www.cyranorion.fr/eta/pages/test-photos.html

Merci beaucoup de m'avoir lu.
Cordialement(,
Jean Le Brun

PS : je travaille avec Xp Pro SP3
As-tu pris en compte ton margin et padding dans tes mesures car quand j'agis dessus tout rentre dans l'ordre.
Modifié par rodolpheb (24 Nov 2012 - 10:18)
En fait c'est une particularité html que je ne m'explique pas!! :
Il faut que tu écrives tes balises img à la suite (pour supprimer un margin par défaut):
<p class="album">
<img width="278" height="348" alt="" src="photo_1.jpg"><img width="370" height="348" alt="" src="photo_2.jpg"><img width="280" height="348" alt="" src="photo_3.jpg">
</p>


Normalement il n'y a pas de margin par défaut sur les balises img mais dans le cas de ton écriture de code html cela en crée d'où ton problème de calcul.
Bonjour rodolpheb et merci pour ta diligence à me répondre.

rodolpheb a écrit :
As-tu pris en compte ton margin et padding dans tes mesures car j'agis dessus tout rentre dans l'ordre.


Lorsque j'effectue mon calcul sous Excel, je tiens strictement compte des margin, border et padding utilisés dans les styles CSS.
De toutes façons, ce n'est pas mon calcul qui est en cause car lorsque on fait la somme de toutes ces "marges" et largeurs d'images, on trouve bien 979 px pour un conteneur de 980 px et la troisième image déborde.


rodolpheb a écrit :
Il faut que tu écrives tes balises img à la suite (pour supprimer un margin par défaut)


Cela m'inspire deux remarques :
- je croyais que tous les "blancs" entre les instructions ne comptaient pas, c'est à dire que j'étais persuadé qu'écrire les balises img l'une après l'autre ou ligne à ligne cela revenait strictement au même, non ?
- penses-tu que d'autorité, FF et IE ajouteraient des margin non programmés (ce que tu appelles des margin par défaut).

Merci pour le coup de main.
Amitiés et à+
Jean Le Brun
Bonjour rodolpheb,

rodolpheb a écrit :
En fait j'ai fait un post sur ce problème et voici la réponse de Raphael :
&quot;Il ne s'agit pas véritablement de marges, mais de &quot;caractère blanc&quot; (ou &quot;whitespace&quot;).

Explication en détail : http://www.alsacreations.com/article/lire/626-impact-rendu-indentation-code.html &quot;


Impeccable, j'ai mis mes trois balises bout à bout et non ligne à ligne ... et mes trois images sont correctement entrées côte à côte dans le conteneur.
Je vous dois un grand merci à toi et Raphaël.

Je conclue de cela que pour résoudre mon problème, j'ai deux solutions :
- mettre bout à bout mes balises,
- dans mon programme Excel de calcul des tailles finales de mes images, tenir compte, en sus des margin, padding et border, d'un espace supplémentaire entre chaque image. Ainsi je peux laisser mes balises ligne à ligne, ce qui est quand même beaucoup plus lisible.
Mais, dans ce cas, quelle est la largeur d'un espace en px ? A moi de tester ou trouve-t-on cela quelque part ?

Encore merci.
Amicalement,
Jean Le Brun
Bonjour rodolpheb, salut à la communauté,

rodolpheb a écrit :
Cet espace est de l'ordre de 4px....mais il peut varier selon les navigateurs Smiley smile


4 px semble effectivement la valeur à prendre en compte.

J'ai réalisé un test consistant à afficher côte à côte 10 vignettes (image identique affichée 10 fois) en plaçant les balise <img> ligne à ligne.
Pour déterminer la bonne largeur d'image, j'ai tenu compte non seulement des margin, pading, border du CSS mais aussi d'un "espace" de largeur E en pixels.
Quatre tests avec E = 6, 5, 4, 3 px.
Pour 3 px, la dernière image déborde.
Pour 5 px, il reste manifestement de la marge disponible.
Pour 4 px, il ne reste que 2px de marge à gauche, 7 px à droite. C'est donc le meilleur choix !
Pourtant la sommation de toutes les largeurs donnent pile la largeur du conteneur.
Il reste donc une petite "incertitude" puisque il reste un peu de marge disponible Smiley decu
Je la suppose à rechercher dans la définition adoptée par les navigateurs à la notion de PIXEL, à moins qu'il y ait un autre "loup" à découvrir ???

Mes tests sont toujours visibles à :
http://www.cyranorion.fr/eta/pages/test-photos.html

Merci pour ta réponse, Amitiés et à+
Jean Le Brun
Bonjour CyranOrion,

Content que tu aies obtenues tes réponses. Tu peux marquer ton message en résolu.

Amitiés.

Rodolphe
Re,

rodolpheb a écrit :
Bonjour CyranOrion,

Content que tu aies obtenues tes réponses. Tu peux marquer ton message en résolu.

Amitiés.

Rodolphe


OK, c'est fait. Merci encore et peut-être à un de ces jours.
Amitiés,
jean Le Brun
Sujet clos
Aller à