Forum CMS Made Simple FR
[RESOLU]Pb affichage des vignettes avec gallery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [RESOLU]Pb affichage des vignettes avec gallery (/thread-1214.html)


[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 08/05/2011

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.3
#~ Url du site : www.randokerlouan.fr
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.3
#~ Installed Modules:
#~ * CMSMailer: 2.0.1
#~ * FileManager: 1.1.0
#~ * MenuManager: 1.7.5
#~ * ModuleManager: 1.4
#~ * News: 2.11.1
#~ * nuSOAP: 1.0.2
#~ * Printing: 1.1.2
#~ * Search: 1.6.10
#~ * ThemeManager: 1.1.4
#~ * TinyMCE: 2.8.3
#~ * CGExtensions: 1.23
#~ * Captcha: 0.4.3
#~ * Gallery: 1.4.4
#~ * DownCnt: 1.1.1
#~ * FrontEndUsers: 1.12.11
#~ * FormBuilder: 0.7
#~ * CustomContent: 1.7.3
#~ * Statistics: 1.1.3
#~ * CGSimpleSmarty: 1.4.8
#~ * CGGoogleMaps: 2.1.3
#~ * JQueryTools: 1.0.10
#~ * Showtime: 2.0.3
#~ * SiteMapMadeSimple: 1.2.2
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 64000000
#~ * default_upload_permission: 664
#~ * url_rewriting: mod_rewrite
#~ * page_extension: .html
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.17
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 128M
#~ * max_execution_time: 120
#~ * output_buffering: On
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 64M
#~ * upload_max_filesize: 64M
#~ * session_save_path: /tmp (1777)
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

J'utilise le module Gallery dans plusieurs pages de mon site avec le gabarit fancybox. Cela fonctionne mais j'ai un petit souci car entre 2 pages j'ai un affichage différent des vignettes sur la page. Dans un ce cas :
http://www.randokerlouan.fr/randokerlouan/travail-sur-le-terrain/le-balisage.html
il y a peu d'espace entre la fin d'affichage des vignette et le bas de page et dans le cas suivant :
http://www.randokerlouan.fr/randokerlouan/travail-sur-le-terrain/ouverture-des-chemins.html
l'espace entre les vignettes et le bas de la page est énorme.

J'utilise le gabarit fancybox que j'ai un peu touché voici le code
Code :
<div class="gallery">
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{foreach from=$images item=image}
    <div class="img">
    {if $image->isdir}
        <a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
        {$image->titlename}
    {else}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
    {/if}
    </div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

J'ai essayé de voir dans le css associé et je n'ai trouvé que ceci qui parle hauteur :
Code :
.gallery .img {
    /*height: 120px; */
    /*width: 120px;   Adjust as you see fit */
    float: left;
    margin: 10px;
    text-align: center;
}

Cela fait un moment que je cherche et je ne trouve rien. Avez-vous une idée de comment je peux rendre homogène l'affichage des galeries de photos ?

Merci d'avance pour votre aide

Amicalement

Alain

[RESOLU]Pb affichage des vignettes avec gallery - jissey - 08/05/2011

bonjour,
lorsque je supprime le clear: both sur
Citation :<div class="galleryclear">&nbsp;</div>
,
ça remonte tout. Mais si la ligne des vignettes n'est pas complète, cela pose un problème.
Il faut peut-être chercher de ce côté là.

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 09/05/2011

Merci jissey pour ta réponse.
J'ai fais plein de tests dans ce sens mais je me heurte toujours au même problème. J'ai mis la hauteur et la largeur à auto, j'ai essayé float right pour la div .gallery.img rien n'y fait.

Je reste avec cet affichage ou cela remonte tout et si la ligne des vignettes n'est pas complète cela fait bizarre.

D'autres idées ?

[RESOLU]Pb affichage des vignettes avec gallery - bess - 09/05/2011

c'est la largeur à auto (ou pas de largeur) qui fout la merde

Code :
.gallery .img {
    float: left;
    height: auto;
    margin: 10px;
    text-align: center;
    width: 100px;
}

j'ai déjà rencontré plein de fois le soucis. Regarde le code css d'origine, le développeur de Galery te précisait qu'il faut y mettre la largeur d'une miniature.

Fallait le faire Smile

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 09/05/2011

Merci pour ta réponse Bess,

J'ai mis le code suivant :
Code :
.gallery .img {
    height: auto;
    width: 100px;  /* Adjust as you see fit */
    float: left;
    margin: 10px;
    text-align: center;
}
Le commentaire est celui d'origine et je le traduirai par "régler comme bon vous semble" en fait c'est google qui le traduit comme ça.

Résultat c'est comme avant, j'ai des bas de blocs main très loin après les galeries de photos sauf pour la page "balisage".

Je continu de chercher

[RESOLU]Pb affichage des vignettes avec gallery - bess - 10/05/2011

c'est un autre soucis... j'avais pas compris ça...

claque ce code dans le css de back1 à la place de l'existant :

Code :
float: right;
width: 72%;

le soucis viens de la traduction du float:left de ta bande de gauche qui est ultra-fumeux dans les navigateurs...

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 10/05/2011

Tu as raison Bess, lorsque je mets ce code dans la div back1 je n'ai plus le problème de bas des block main après les galeries. Par contre ça fout le b..... dans l'affichage à savoir que tous le bloc main s'affiche en dessous de la sidebar certes à sa place à droite mais juste après le sidebar.


Voici le code css avant l'ajout de ton code :
Code :
div#content {
/* some air above and under menu and content    */
    margin: 1.5em auto 2em 0;
    padding: 0px;
}

/* this gets all the outside calls that were used on the div#main before  */
div.back1 {
/* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */
    margin-left: 29%;
/* and some air on the right
    margin-right: 2%;*/
}
/* this is an IE6 hack, you may see these through out the CSS */
* html div.back1 {
/* unlike other browser IE6 needs float:right and a width */
    float: right;
    width: 69%;
/* and we take this out or it will stop at the bottom  */
    margin-left: 0%;
/* and some air on the right */
    margin-right: 10px;
}
div.back2 {

Voici avec ton code :

Code :
div#content {
/* some air above and under menu and content    */
    margin: 1.5em auto 2em 0;
    padding: 0px;
}

/* this gets all the outside calls that were used on the div#main before  */
div.back1 {
/* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */
    margin-left: 29%;
        float: right;
        width: 72%;
/* and some air on the right
    margin-right: 2%;*/
}
/* this is an IE6 hack, you may see these through out the CSS */
* html div.back1 {
/* unlike other browser IE6 needs float:right and a width */
    float: right;
    width: 69%;
/* and we take this out or it will stop at the bottom  */
    margin-left: 0%;
/* and some air on the right */
    margin-right: 10px;
}
div.back2 {


J'avais essayé il y a 6 à 8 mois d'enlever ces div back1 2 et 3 pour simplifier mais je n'ai pas réussi à reproduire l'affichage que je voulais sans ces div. Donc je les ai remises.

[RESOLU]Pb affichage des vignettes avec gallery - bess - 10/05/2011

Remet la modification que je puisse constater et traiter le soucis. J'ai pas encore un compilateur CSS dans le cerveau.

et regarde : www.su3.fr ça marche très bien, donc ma piste est bonne Wink

[RESOLU]Pb affichage des vignettes avec gallery - bess - 10/05/2011

sinon ton soucis de div 1/2/3 se résoudra quand tu compilera les donnée dans la div1 :

background-color: #CBFF97;
border: 1px solid black;
border-radius: 15px 15px 15px 15px;
float: right;
width: 72%;

et ça c'est la base du CSS par contre ... et l'utilisation intelligente de firebug qui m'aide beaucoup dans mes réponses.

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 11/05/2011

Ok, j'ai fait une page de test sur le site, avec un gabarit copié de celui en prod ainsi qu'une css copiée également. J'ai mis le code que tu m'as fournis dans la div back1.
Le résultat :
1) sous firefox cela ne change rien et quand je regarde avec firebug la css j'ai l'impression qu'il utilise la div html.back1 qui il me semblait était là pour IE,
2) sous IE là j'ai résolu le problème de l'espace sous les galeries de photo mais le block main s'affiche après la sidebar

voici le lien :
http://www.randokerlouan.fr/randokerlouan/page-de-test.html

J'ai également fais des test pour supprimer les div back2 et 3 sans des résultats satisfaisansts mais il faut que je comprenne ce qui se passe avant d'aller plus loin.

Merci pour ton aide

Alain

[RESOLU]Pb affichage des vignettes avec gallery - bess - 11/05/2011

retire le margin-left: 29%; de div.back1, je t'ai jamais dit de le laisser, je ne vois décidément pas ce qui te pousse à le conserver

Citation :quand je regarde avec firebug la css j'ai l'impression qu'il utilise la div html.back1 qui il me semblait était là pour IE

html.back1 n'est pas dédié à IE
* html.back1 par contre est dédié à IE, voilà c'était juste pour préciser au cas ou.

de mon côté Firebug affiche bien le css de div.back1

Enfin pour les autres points évoqué fait définitivement MES modifications, cherche pas à comprendre pour le coup, fais le, là on jongle entre des modifs à toi, à moi, tes tests,... on va jamais s'en sortir.

donc retire les div html back2 et 3 de ton gabarit, remplace COMPLÉTEMENT le css de back1 par ce que j'ai préconisé hier et préviens moi que je regarde la suite.

[RESOLU]Pb affichage des vignettes avec gallery - bess - 11/05/2011

tiens au passage, ma modification de width:auto en width:100px est également à faire pour la hauteur :

Code :
.gallery .img {
    float: left;
    height: 100px;      <--- A modifier
    margin: 10px;
    text-align: center;
    width: 100px;
}

Dernière précision pour + de lisibilité : la fin du contenu du centre de ta page contient énormément de retour à la ligne.

je cite :

Code :
<p></p>
<p>&nbsp;</p>
<br>
<br>

Essaie d'épurer, ce n'est pas grave, juste une question d’esthétique.

Pareil pour page précédente <-> page suivante :

Code :
<p>
Page précédante :
<a title="Mentions légales" href="http://www.randokerlouan.fr/randokerlouan/conatctez-nous/mentions-legales.html">Mentions légales</a>
<br>
<br>
<br>
<br>
</p>


[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 11/05/2011

Bien, j'ai modifié le code de galley.img et j'ai supprimer ce que j'ai trouvé comme saut de ligne.

J'ai supprimé les div back 2 et 3 du gabarit et j'ai également supprimer les entrées correspondantes dans la css dont voici le code :
Code :
div.back1 {
/* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */
/* Ajout d'une bordure autour du block main, modifier la couleur de la bordure ici (AG 10/05/2010)*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
        behavior: url(border-radius.htc);
        border: 1px solid black;
/* Couleur de fond du block main, modifier la couleur ici */
        background-color: #CBFF97;
        float: right;
        width: 72%;
}
/* this is an IE6 hack, you may see these through out the CSS */
* html div.back1 {
/* unlike other browser IE6 needs float:right and a width */
    float: right;
    width: 69%;
/* and we take this out or it will stop at the bottom  */
    margin-left: 0%;
/* and some air on the right */
    margin-right: 10px;
}
div#main {
/* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */
    width: auto;
    padding: 10px 15px;
}

Vois le résultat, ce n'est pas totalement bon, je n'ai plus de couleur de fond et le block main s'affiche après la sidebar. Ce que je ne pige pas c'est qu'avec firebug j'ai toujours les entrées back2 et back 3 dans la css alors que je les ai enlevées dans le code. J'ai également vidé le cache du site et c'est pareil...

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 11/05/2011

Bon, juste après avoir posté ma réponse, j'ai eu l'idée de vider le cache de mon navigateur... et là ça marche donc si tu vas voir ma page de test ce doit être bon également.

Merci pour ta patience

Alain

[RESOLU]Pb affichage des vignettes avec gallery - bess - 11/05/2011

RAZ chez moi Smile

si tout est bon chez toi et que tu n'as plus de question n'oublie pas le [résolu] dans le titre de ton tout premier message ! Smile

[RESOLU]Pb affichage des vignettes avec gallery - AG1111 - 13/05/2011

Merci bess,

C'est également bon pour moi, je vais passer ce post en résolu. Par contre des questions j'en ai des tonnes...mais cela fera l'objet d'autres posts

Amicalement

Alain