| Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads |
Titre du sujet : Re: Comment mettre 3 informations dans chaque colonne distincte - WFDownloads
par montuy337513 sur 01/10/2014 09:36:12
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{
width: 100%;
display: table;
}
.cellule {
width: 32%;
display: table-cell;
}
|
|
