- Messages : 35
- Remerciements 1
Aligner plusieurs images horizontalement
- Django29
-
Auteur du sujet
- Hors Ligne
- Membre senior
-
Réduire
Informations
il y a 7 ans 10 mois - il y a 7 ans 10 mois #11641
par Django29
Réponse de Django29 sur le sujet Aligner plusieurs images horizontalement
Bonjour Mihaly
J'ai testé sur un autre site, et un autre framework (JSN Sun au lieu de Helix), et l'alignement se fait effectivement automatiquement horizontalement.
Mais sur le site en cours, j'ai retesté sur une autre page, rien à faire. J'ai été obligé de placer des div manuellement.
Je peux t'envoyer un lien en message personnel mais il ne semble pas y avoir cette possibilité sur ton forum.
Merci d'avoir répondu.
J'ai testé sur un autre site, et un autre framework (JSN Sun au lieu de Helix), et l'alignement se fait effectivement automatiquement horizontalement.
Mais sur le site en cours, j'ai retesté sur une autre page, rien à faire. J'ai été obligé de placer des div manuellement.
Je peux t'envoyer un lien en message personnel mais il ne semble pas y avoir cette possibilité sur ton forum.
Merci d'avoir répondu.
Dernière édition: il y a 7 ans 10 mois par Django29.
Connexion ou Créer un compte pour participer à la conversation.
- Django29
-
Auteur du sujet
- Hors Ligne
- Membre senior
-
Réduire
Informations
- Messages : 35
- Remerciements 1
il y a 7 ans 10 mois #11642
par Django29
Réponse de Django29 sur le sujet Aligner plusieurs images horizontalement
Bonjour
La solution, pour aligner horizontalement des images quand le template impose un alignement vertical :
Dans l'onglet "Avancé" du gestionnaire d'images JCE => Style => display: inline;
La solution, pour aligner horizontalement des images quand le template impose un alignement vertical :
Dans l'onglet "Avancé" du gestionnaire d'images JCE => Style => display: inline;
Connexion ou Créer un compte pour participer à la conversation.
- mihaly
-
- Hors Ligne
- Administrateur
-
il y a 7 ans 10 mois - il y a 7 ans 10 mois #11643
par mihaly
Mihàly Marti alias Sarki
Réponse de mihaly sur le sujet Aligner plusieurs images horizontalement
Hello Django29,
Merci de cette précision, mais il faut avant tout regarder pourquoi les images passent à la ligne.
Là en l’occurrence c'est parce que dans le CSS du template il y a une propriété qui n'est pas juste, au lieu de "block" il faudrait avoir "inline-block", cela permet d'avoir les propriétés de block et de inline (voir : la-cascade.io/la-difference-entre-block-et-inline/)
Dans le CSS cela se trouve à la ligne 1762 :Pour corriger cela, il vaut mieux créer un fichier "custom.css" que tu places dans le dossier "css" du template, ce fichier te permets de mettre des valeurs de substitution à celles de la feuille CSS par défaut du template, car si tu modifies ce dernier les changements seraient perdus lors d'une mise à jour, alors que pas le fichier "custom.css".
Cela permet également que cette correction s'applique également aux images qui ne sont pas insérées avec JCE mais avec une autre extension (boutique en ligne par exemple).
Il faudrait donc mettre dans ce fichier "custom.css" la valeur suivante :Comme tu le vois il n'est pas nécessaire de reprendre toutes les valeurs, seule celle modifiée est nécessaire.
Note : je n'ai pas compris pourquoi tu n'as pas réussi à aligner tes images côte à côte en leur attribuant un alignement à gauche, car avec la valeur block cela fonctionne.
Merci de cette précision, mais il faut avant tout regarder pourquoi les images passent à la ligne.
Là en l’occurrence c'est parce que dans le CSS du template il y a une propriété qui n'est pas juste, au lieu de "block" il faudrait avoir "inline-block", cela permet d'avoir les propriétés de block et de inline (voir : la-cascade.io/la-difference-entre-block-et-inline/)
Dans le CSS cela se trouve à la ligne 1762 :
img {
display: block;
height: auto;
max-width: 100%;
}Cela permet également que cette correction s'applique également aux images qui ne sont pas insérées avec JCE mais avec une autre extension (boutique en ligne par exemple).
Il faudrait donc mettre dans ce fichier "custom.css" la valeur suivante :
img {
display: inline-block;
}Note : je n'ai pas compris pourquoi tu n'as pas réussi à aligner tes images côte à côte en leur attribuant un alignement à gauche, car avec la valeur block cela fonctionne.
Mihàly Marti alias Sarki
Dernière édition: il y a 7 ans 10 mois par mihaly.
Connexion ou Créer un compte pour participer à la conversation.
- Django29
-
Auteur du sujet
- Hors Ligne
- Membre senior
-
Réduire
Informations
- Messages : 35
- Remerciements 1
il y a 7 ans 10 mois - il y a 7 ans 10 mois #11644
par Django29
Réponse de Django29 sur le sujet Aligner plusieurs images horizontalement
Effectivement, j'avais déjà rencontré ce pb dans des modules de Mijoshop sur un autre site.
Dans le cas présent, l'alignement horizontal fonctionne avec le style : display: inline; ou display; inline-block; ajouté dans JCE.
Mais dès que j'ajoute une légende à une image (par la fonction spécifique de JCE), l'alignement revient en vertical.
La modif de la ligne :
img {
display: inline-block;
}
dans template.css ne rétablit pas l'alignement horizontal. Seul display: inline; ou inline-block; ajouté dans le style de l'onglet "Acancé" de JCE fonctionne, pour moi, et sans légendes.
LASTMINUTE.COM :
ça y est, j'ai enfin trouvé. Dans le popup d'ajout des légendes => Onglet "Container" => Alignement gauche.
Toutes les images s'alignent enfin horizontalement, même avec des légendes.
Dans le cas présent, l'alignement horizontal fonctionne avec le style : display: inline; ou display; inline-block; ajouté dans JCE.
Mais dès que j'ajoute une légende à une image (par la fonction spécifique de JCE), l'alignement revient en vertical.
La modif de la ligne :
img {
display: inline-block;
}
dans template.css ne rétablit pas l'alignement horizontal. Seul display: inline; ou inline-block; ajouté dans le style de l'onglet "Acancé" de JCE fonctionne, pour moi, et sans légendes.
LASTMINUTE.COM :
ça y est, j'ai enfin trouvé. Dans le popup d'ajout des légendes => Onglet "Container" => Alignement gauche.
Toutes les images s'alignent enfin horizontalement, même avec des légendes.
Dernière édition: il y a 7 ans 10 mois par Django29.
Les utilisateur(s) suivant ont remercié: mihaly
Connexion ou Créer un compte pour participer à la conversation.
- mihaly
-
- Hors Ligne
- Administrateur
-
il y a 7 ans 10 mois #11654
par mihaly
Mihàly Marti alias Sarki
Réponse de mihaly sur le sujet Aligner plusieurs images horizontalement
Super, bien vu merci, à noter dans un coin, une info qui devrait être dans un tuto 
A+
A+
Mihàly Marti alias Sarki
Connexion ou Créer un compte pour participer à la conversation.
Temps de génération de la page : 0.078 secondes
