Fork me on GitHub






Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Semi pro
Inscrit: 13/04/2007 20:36
Messages: 849
Bonsoir
J’utilise le module WFDownloads avec le bloc Ramdom qui permet de montrer différentes applications à chaque affichage de la page. (https://www.frxoops.org/modules/newbb/ ... id=233066#forumpost233066)

Par contre, je n’arrive pas à mettre chaque application dans une colonne distincte. Pourtant je créé un bloc de 3 colonnes, j’indique que je veux afficher 3 applications (qui comprend Titre, sous-titre, screenshot et petite description) tout est OK pour l’affichage mais le problème c’est que je me retrouve avec le titre de la deuxième application dans la première colonne et le reste qui s’affiche dans la 2éme et ainsi de suite.

Savez-vous comment régler ce problème ?

Merci d’avance pour vos réponses.
Bonne soirée

Posté le : 29/09/2014 21:32

Une personne qui n'a jamais commis d'erreurs n'a jamais tenté d'innover. [Albert Einstein]
Partager Twitter Partagez cette article sur GG+
Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
ce n'est pas un problème de délimitation lié aux balises HTML que tu as utilisée ?
Est ce le template d'origine du bloc ? c'est difficile de te répondre précisément ou de t'orienter sans info complémentaire ou code source

Posté le : 30/09/2014 00:22
Partager Twitter Partagez cette article sur GG+
Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Semi pro
Inscrit: 13/04/2007 20:36
Messages: 849
Bonsoir Montuy

Ci-dessous le code que j'ai dans le bloc. (Par contre il peut y avoir des trucs pas très clair car je ne suis pas vraiment fort dans ce domaine )
<!--<div class="downloads-block">-->
<
div class="wfbrcolonne">
  <{foreach 
item=download from=$block.downloads}>
    <
div>
        <
div class=".wfbritemHead">
            <
span class="wfbritemTitle">
                <
a title="<{$download.title}>" href="<{$xoops_url}>/modules/<{$download.dirname}>/singlefile.php?cid=<{$download.cid}>&lid=<{$download.id}>" rel="directory" ><{$download.title}></a>
            </
span>
        </
div>
        <{if 
$download.publisher != ''}>
        <
div class="wfbritemInfo">
<!--            <
span class="wfbritemPoster"><{$smarty.const._MB_WFD_SUBMITTER}> : <{$download.submitter_uname}></span> -->
<!--            <
span class="wfbritemLicense"><{$smarty.const._MB_WFD_DOWNLICENSE}> : <{$download.license_desc}></span> | -->
            <
span class="wfbritemPostDate"><{$smarty.const._MB_WFD_SUBMITDATE}> : <{$download.date}></span> | 
<!--            <
span class=".wfbritemRating"><{$smarty.const._MB_WFD_RATINGC}>(<{$download.votes}>)</span> | -->
            <
span class="wfbritemHits"><{$smarty.const._MB_WFD_DOWNLOADHITS}> : <{$download.hits}> fois</span>

        </
div>
        <{/if}> 
        <{if 
$show_screenshot == true || $download.description}>
        <
div class="wfbritemBody"
            <
div class="wfbritemText"
              <{if 
$download.screenshot}> 
             <
img class="wfbrimageshot" width="<{$shotwidth}>" height="<{$shotheight}>" src="<{$xoops_url}>/modules/<{$download.dirname}>/images/screenshots/<{$download.screenshot}>" /> 
             <{/if}> 
             <{if 
$download.description != ""}> 
               <{
$download.summary}>
               <{/if}>
            </
div>
            <
div class="endline"></div>
        </
div>
        <{/if}> 
    </
div>
    <{/foreach}>
</
div>


et ensuite le code CSS en rapport
.wfbritemInfo padding1pxcolor#333; background-color: inherit; text-align: right; font-size: .8em; font-style: italic; }
.wfbritemPoster font-size100%; font-styleitaliccolor#8E8E8E; }
.wfbritemLicense font-size100%; font-styleitaliccolor#8E8E8E; }
.wfbritemPostDate font-size100%; font-styleitaliccolor#8E8E8E; }
.wfbritemRating font-size100%; font-styleitaliccolor#8E8E8E; }
.wfbritemHits font-size100%; font-styleitaliccolor#8E8E8E; }

.wfbritemHead padding2px 2px 2px 15pxborder-bottom1px solid #C6C6C6; color: #242424; background: #DFDFDF; font-weight: bold;}
.wfbritemTitle a font-size100%; font-weightboldfont-variantsmall-caps; }
.
wfbritemTitle a:hover color#fb8a04; }
.wfbritemBody padding-left5px; }
.
wfbrimageshot max-height:100pxmax-width:100px; }
.
wfbritemText margin-top1pxmargin-bottom30pxcolor#666; background-color: inherit; text-align: justify; }
.endline clearbothwidth100%;break-after:right; } 

.
wfbrcolonne {-moz-column-count:3;
-
webkit-column-count:3;
-
o-column-count:3;
column-count:3;
-
moz-column-gap:20px;
-
webkit-column-gap:20px;
-
o-column-gap:20px;
column-gap:20px;
-
webkit-column-rule-width:1px;
-
webkit-column-rule-color:#cbcefb;
-webkit-column-rule-style:dotted;
-
moz-column-rule-width:1px;
-
moz-column-rule-color:#cbcefb;
-moz-column-rule-style:dotted;
-
o-column-rule-width:1px;
-
o-column-rule-color:#cbcefb;
-o-column-rule-style:dotted;
column-rule-width:1px;
column-rule-color:#cbcefb;
column-rule-style:dotted;}

.
wfbrcolonne1{-moz-column-count:1;
-
webkit-column-count:1;
-
o-column-count:1;
column-count:1;
displayblock;}


Merci d'avance pour ton aide

Posté le : 30/09/2014 21:19

Une personne qui n'a jamais commis d'erreurs n'a jamais tenté d'innover. [Albert Einstein]
Partager Twitter Partagez cette article sur GG+
Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
déjà,il y a une erreur ici
<div class=".wfbritemHead">

C'est plutôt
<div class="wfbritemHead">


De plus, l'utilisation de column-count n'est pas préconisé parce que :
* c'est du CSS (n'est pas reconnu par tous les navigateurs
* que cette fonction CSS 3 n'est pas supporté par tous les navigateurs supportant CSS3
Donc, si ton site ne s'adresse qu'à des personnes qui ont un mobile, smartphone ou tablette équipé d'Android pas de soucis. Sinon, si quelqu'un utilise IE9 par exemple, et bien le navigateur ne va prendre en compte column-count.

Dans ce cas j'utiliserai plutôt la propriété CSS table et table-cell

un exemple comme ça, j'ai pas testé

<!--<div class="downloads-block">-->
<
div class="tableG">
  <{foreach 
item=download from=$block.downloads}>
    <
div class="cellule">
        <
div class="wfbritemHead">
            <
span class="wfbritemTitle">
                <
a title="<{$download.title}>" href="<{$xoops_url}>/modules/<{$download.dirname}>/singlefile.php?cid=<{$download.cid}>&lid=<{$download.id}>" rel="directory" ><{$download.title}></a>
            </
span>
        </
div>
        <{if 
$download.publisher != ''}>
        <
div class="wfbritemInfo">
<!--            <
span class="wfbritemPoster"><{$smarty.const._MB_WFD_SUBMITTER}> : <{$download.submitter_uname}></span> -->
<!--            <
span class="wfbritemLicense"><{$smarty.const._MB_WFD_DOWNLICENSE}> : <{$download.license_desc}></span> | -->
            <
span class="wfbritemPostDate"><{$smarty.const._MB_WFD_SUBMITDATE}> : <{$download.date}></span> | 
<!--            <
span class=".wfbritemRating"><{$smarty.const._MB_WFD_RATINGC}>(<{$download.votes}>)</span> | -->
            <
span class="wfbritemHits"><{$smarty.const._MB_WFD_DOWNLOADHITS}> : <{$download.hits}> fois</span>

        </
div>
        <{/if}> 
        <{if 
$show_screenshot == true || $download.description}>
        <
div class="wfbritemBody"
            <
div class="wfbritemText"
              <{if 
$download.screenshot}> 
             <
img class="wfbrimageshot" width="<{$shotwidth}>" height="<{$shotheight}>" src="<{$xoops_url}>/modules/<{$download.dirname}>/images/screenshots/<{$download.screenshot}>" /> 
             <{/if}> 
             <{if 
$download.description != ""}> 
               <{
$download.summary}>
               <{/if}>
            </
div>
            <
div class="endline"></div>
        </
div>
        <{/if}> 
    </
div>
    <{/foreach}>
</
div>

et la partie CSS lié simplement au 3 colonnes (j'ai tout mit)
.tableG{
  
width100%;
  
displaytable;
}
.
cellule {
  
width32%;
  
displaytable-cell;
}

Posté le : 01/10/2014 09:36

Edité par montuy337513 sur 02/10/2014 08:05:49
Partager Twitter Partagez cette article sur GG+
Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Semi pro
Inscrit: 13/04/2007 20:36
Messages: 849
Bonsoir Montuy

Je te remercie grandement cela marche parfaitement.

Par contre si tu pouvais corriger ton dernier post (si quelqu'un voudrait l'utiliser) car en ligne 4 c'est indiqué
<div class="cell">
au lieu de
<div class="cellule">


Encore un grand merci d'avoir pris de ton temps pour trouver la solution

Bonne soirée

Posté le : 01/10/2014 22:32

Une personne qui n'a jamais commis d'erreurs n'a jamais tenté d'innover. [Albert Einstein]
Partager Twitter Partagez cette article sur GG+
Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
c'est bon, j'ai corrigé

Posté le : 02/10/2014 08:06
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

64 Personne(s) en ligne (46 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 64 | Plus ...