Discussion :

[Iwebu]

Bonjour,

Je développe une petite galerie photo sur un site, j'utilise le display:inline-block pour positionner mes images en lignes avec un espace de 25px en appliquant un word-spacing:25px à mon conteneur.

Tout fonctionne très bien sur Firefox, Chrome et IE ... mais SAFARI ne respecte pas l’écart de 25px.

Firefox ; Chrome ; IE


Safari


Quelqu'un à déjà rencontré ce problème ? Est ce que Safari prend bien en compte le Word-spacing ... ?

Merci pour votre aide!

[NoSmoking]

Bonjour,

Est ce que Safari prend bien en compte le Word-spacing

oui mais visiblement de façon plus strict que les autres navigateurs

word-spacing sert à espacer les mots dans un texte or toi tu veux espacer des IMG et dans ce cas il est préférable de se servir des marges externes (margin), visiblement SAFARI tiens compte simplement des whiteSpace.

[Iwebu]

Bonjour NoSmoking,

Oui effectivement Word-Spacing sert a espacer les mots, on est bien d'accord, mais j'ai remarqué que cela fonctionnait également pour espacer les <div>, sans oublié de ré-appliquer un word-spacing:0px dans le <div> enfant.

En fait mes photos sont donc placées dans des <div> qui doivent être séparé de 25px ... je pourrais effectivement utiliser un margin-right:25px, mais le problème serait que je perds 25px à chaque ligne à droite de la dernière images de la ligne. Les images sont ajoutées dynamiquement via BDD et selon leur largeur, il peut y avoir une, deux ou trois ou quartes images par lignes. Je ne peux donc pas utiliser la marges car je ne saurai jamais combien d'images il y aura sur une ligne.

Je sais pas si je suis assez clair...



Je n'ai jamais essayé White-space... mais est ce qu'il est capable de faire ça ?

Merci encore.

[NoSmoking]

Je n'ai jamais essayé White-space... mais est ce qu'il est capable de faire ça ?

que des misères, tu ne peux pas jouer avec comme avec les autres éléments d'une page.
Regarde ce que j'en dis dans cette discussion.

Il me semble quand même plus intéressant de jouer avec les margin qu'avec tout autre chose pour espacer les éléments, après tout cette propriété est faite pour cela.
Dans ton cas je jouerais avec la margin-left sur les éléments autres que celui en début.

Je ne peux donc pas utiliser la marges car je ne saurai jamais combien d'images il y aura sur une ligne.

Cet argument n'est pas recevables car dans aucun des cas tu ne le sauras.

Comment est gérée ta mise en page, qui conditionne les retours à la lignes ?

[Iwebu]

Salut, et merci pour ton aide.

Voici mon CSS pour l'affichage des images :

Code :

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

1
2
3
 
#line-archive-news { position:relative; height:auto; width:1050px; text-align:center; margin-top:0px; margin-bottom:25px; margin-left:auto; margin-right:auto; word-spacing:25px; } /* Conteneur */
#line-archive-news .archive-news { position:relative; display:inline-block; height:430px; width:auto; text-align:center; vertical-align:top; margin-bottom:25px; } /* box contenant les images */

Je ne pourrais donc jamais savoir quelle image est placée en début de ligne ... à moins que tu puisses m'indiquer comment faire pour savoir cela.

MErci

[NoSmoking]

si tu ne sais pas comment vont s’agencer tes images au moment de la réalisation de la mise en page il te seras difficile de maintenir une marge de 25px entre chacune d'entre elles sans qu'à un moment cela ne parte en live.

[CCyrillus]

Pour ce que tu essaie de faire,

Code :

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

letter-spacing

aura le même effet et sera supporter par un plus grand nombre de navigateur. Probable que pour certains tu ai aussi besoin de faire un reset a 0 sur le font-size du conteneur( si tu fais ça, n'oublie pas de lui redonner une valeur en rem ou px sur les images pour le alt au cas ou et les autres éléments éventuellement adjacent).

[NoSmoking]

Pour ce que tu essaie de faire, letter-spacing

cela devrait effectivement mieux le faire.