mettre des images au même format

[felinity]

Re : mettre des images au même format

Je le vois ligne 192 : <link rel="stylesheet" href="/templates/jp-magazine/css/custom.css" />
L'url est : www.chumeditions.com

Curieusement j'ai ajouté class="vignette" dans mes div inclus dans le <table><tr><td> et ça marche à peu près. Il y a encore des écarts dans les hauteurs et largeur par endroits.

[webcrea]

Re : mettre des images au même format

Dans quelle page c'est installé ?

Pas nécessaire de les mettre dans une table, tu vas perdre le responsive

[felinity]

Re : mettre des images au même format

C'est en page d'accueil, ce sont les 12 images que tu peux voir (des couvertures de livres).
Si je mets hors de <table> :
<div style="width:80%;">
<div class="vignette"><img src="images/couv_border_black/le_chardon.jpg" alt="" width="140" height="195" /></a></div>
<div class="vignette"><img src="images/couv_border_black/glaive.jpg" alt="" width="140" height="195" /></a></div>
</div>
....
Les images sont l'une au-dessus de l'autre.
Je vais essayer dans une autre page que la page d'accueil pour voir ce que ça ferait, je mme deande si les onglets {tab} ne pertuvbent pas.

[felinity]

Re : mettre des images au même format

Dans un page article vierge j'ai mis :
<div style="width: 80%;">
<div class="vignette"><img src="images/couv_border_black/le_chardon.jpg" alt="" width="140" height="195" /><img src="images/couv_border_black/glaive.jpg" alt="" width="140" height="195" /> <img src="images/couv_border_black/le_chardon.jpg" alt="" width="140" height="195" /> <img src="images/couv_border_black/glaive.jpg" alt="" width="140" height="195" /></div>
</div>

Dans l'éditeur c'est parfait et à l'affichage les img sont superposées : http://www.chumeditions.com/index.php/feuilleton-hebdo

Je m'arrête pour ce soir
Merci, vraiment, pour le temps que tu mes consacres.

[webcrea]

Re : mettre des images au même format

1 image par div vignette

[PhilJ]

Re : mettre des images au même format

Bonjour,

Dans un page article vierge j'ai mis :
<div style="width: 80%;">
<div class="vignette"><img src="images/couv_border_black/le_chardon.jpg" alt="" width="140" height="195" /><img src="images/couv_border_black/glaive.jpg" alt="" width="140" height="195" /> <img src="images/couv_border_black/le_chardon.jpg" alt="" width="140" height="195" /> <img src="images/couv_border_black/glaive.jpg" alt="" width="140" height="195" /></div>
</div>

La classe .vignette devrait concerner les images elles-mêmes et non pas le container <div> accueillant les images.

=> Essayez ceci :
—

<div>

<img class="vignette" alt="" src="/images/couv_border_black/le_chardon.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/glaive.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/malemor.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/correspondant.jpg">

</div>

Cordialement,

[webcrea]

Re : mettre des images au même format

Bonjour,




La classe .vignette devrait concerner les images elles-mêmes et non pas le container <div> accueillant les images.

=> Essayez ceci :
—

<div>

<img class="vignette" alt="" src="/images/couv_border_black/le_chardon.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/glaive.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/malemor.jpg">
<img class="vignette" alt="" src="/images/couv_border_black/correspondant.jpg">

</div>

Cordialement,

Oui image ou div ça le fera, tout dépend si par la suite on a pas le besoin d'ajouter un titre ou une légende

[felinity]

Re : mettre des images au même format

Bonjour,

Merci pour cette relance. Ca semble mieux se passer avec le code PhilJ. Webcrea, tant pis pour des légendes et pour le titre pas besoin. Aussi si ça fonctionne comme ça, je fais avec.

Il reste eux choses que je n'arrive pas à régler :
1 -l'espace entre les images: ce que j'ai dans l'éditeur n'est pas pris en compte par les navigateurs (FF et Chrome)
2 - J'ai du blanc sur blanc, j'ajoute pour chaque img border="2px", ce n'est pas lu par les navigateurs. Si je savais où mettre un backgroundcolor pour toute la page article, j'aurais une solution pour éviter le blanc sur blanc à défaut de bordure.

Cordialement
Gilles

- - - Mise à jour - - -

J'ai oublié : pour le moment je travaille seulement sur une page test : http://www.chumeditions.com/index.php/feuilleton-hebdo

[PhilJ]

Bonjour,

Merci pour cette relance. Ca semble mieux se passer avec le code PhilJ.

Vous devriez éliminer les codes inutiles, ci-dessous en rouge, car ils interfèrent avec vos définitions CSS :
—
<div>

<img width="120" border="2px" height="175" alt="" src="/images/couv_border_black/le_chardon.jpg" class="vignette">&nbsp;&nbsp;&nbsp;
<img width="120" border="2px" height="175" alt="" src="/images/couv_border_black/glaive.jpg" class="vignette">&nbsp;&nbsp;&nbsp; <img width="120" border="2px" height="175" alt="" src="/images/couv_border_black/malemor.jpg" class="vignette"> &nbsp;&nbsp;
<img width="120" border="2px" height="175" alt="" src="/images/couv_border_black/glaive.jpg" style="border-width: 2px;" class="vignette">

</div>

Aussi, ce que je ne peux pas figurer ici en rouge : ne laissez aucune espace entre chaque image. Donc évitez :
—

<img alt="" src="/images/couv_border_black/le_chardon.jpg" class="vignette"> <img alt="" src="/images/couv_border_black/glaive.jpg" class="vignette">

=> Saisissez plutôt :
—

<img alt="" src="/images/couv_border_black/le_chardon.jpg" class="vignette"><img alt="" src="/images/couv_border_black/glaive.jpg" class="vignette">

__________________

Il reste eux choses que je n'arrive pas à régler :
1 -l'espace entre les images: ce que j'ai dans l'éditeur n'est pas pris en compte par les navigateurs (FF et Chrome).

=> Ajoutez à la règle CSS la directive en vert ci-dessous :

.vignette {

display: inline-block;
float: left;
height: 205px;
margin: 1px;
vertical-align: top;
width: 23%;
padding: 4px; /* à adapter selon vos préférences */

}

2 - J'ai du blanc sur blanc, j'ajoute pour chaque img border="2px", ce n'est pas lu par les navigateurs. Si je savais où mettre un backgroundcolor pour toute la page article, j'aurais une solution pour éviter le blanc sur blanc à défaut de bordure.

=> Ajoutez les 2 nouvelles directives suivantes à la définition de la classe .vignette :
—

border: 1px solid #ccc; /* à adapter selon vos préférences */
margin-bottom: 3px; /* à adapter selon vos préférences */

Vous pourriez aussi utiliser un ombrage — en plus de, ou bien à la place de la définition de la bordure :
—

box-shadow: 2px 2px 4px #888; /* à adapter selon vos préférences */

Cordialement,

[felinity]

Re : mettre des images au même format

Bonjour,

Voilà, c'est fait, et sans votre aide à tous les deux, jamais je n'y serais parvenu.
Il me reste à mettre des images un plus propres et à vois coent ajouter une légende.
Pour info, quand j'ai voulu ajouter le class="effectck-julia" title="::xxxx" de l'image effect CK, un petit utilitaire que j'avais écheté sur le net, tout s'est dérégler.
Merci encore à tous les deux.
Cordialement
Gilles

[felinity]

Re : mettre des images au même format

J'ai oublié, vous pouvez voir le résultat ici : www.chumeditons.com

[PhilJ]

Bonjour Gilles,

[...] Il me reste à mettre des images un [peu] plus propres...

A ce sujet, vous obtiendriez certainement un résultat beaucoup plus régulier — et avec moins de déformations — si toutes vos images avaient exactement les mêmes dimensions (= même largeur et même hauteur), ce qui n'est pas le cas actuellement.

Une petite astuce si vous n'y arrivez pas facilement en redimensionnant vos images sans les déformer :
—

• Dans votre logiciel de d'imagerie numérique préféré (GIMP ou autre), créez une image vide avec un fond blanc dont les dimensions seront exactement celles de toutes vos images finales.
• Toujours dans votre logiciel de d'imagerie, ouvrez la première image, puis copiez-la, et collez-la dans l'image vide. Ajustez le collage verticalement et horizontalement, puis fusionnez votre image dans l'image au fond blanc. Enfin, enregistrez votre image corrigée.
• Faites les mêmes opérations pour les images suivantes.

Ensuite, vous aurez peut-être besoin d'intervenir un peu au niveau de la définition de votre classe .vignette pour les propriétés width et height (largeur et hauteur), et peut-être aussi au niveau de la propriété margin (marges externes) dont les valeurs sont actuellement particulièrement élevées — surtout sur écran étroit.

[...] ajouter une légende.
Pour info, quand j'ai voulu ajouter le class="effectck-julia" title="::xxxx" de l'image effect CK [...] tout s'est dérégler.

Le code pour chacune de vos images devrait être quelque chose comme :
—

<img class="vignette effectck-julia" src="/images/couv_border_black/le_chardon.jpg" alt="" title="Le chardon flamboyant::Roman de Maëlys de Belleville ">

Bien entendu, le plugin doit être installé et activé. Normalement, cela devrait bien marcher.



PS : le lien que vous donnez dans votre dernier message vers votre site est incorrect.


Cordialement,

[felinity]

Re : mettre des images au même format

Merci pour cette nouvelle aide. Je regarderai ça au plus vite et je reviendrai ici vous le dire.
Bonne journée.
Gilles

PS : le bon lien est www.chumeditions.com