Tabla de Afiliados

por **Harley V.** Jue Ene 14, 2016 10:45 am

En esta tablita de afiliados se pueden poner los afiliados élite que sean, ya que se ajusta por si sola si se agregan más afiliados.

Este es el código:

PA > Módulos > Gestión de los widgets del foro > Módulo Personalizado

Código:: <div id="Afistab"> <div class="Afistit"> Afiliados </div> <table cellspacing="10"> <tbody> <tr> <td> <div id="Afiher"> <img class="her" src="http://placehold.it/50x100" /><img class="her" src="http://placehold.it/50x100" /><img class="her" src="http://placehold.it/50x100" /><img class="her" src="http://placehold.it/50x100" /> </div> <div id="Adir"> <img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /><img class="dire" src="http://placehold.it/50x50" /> </div> </td> <td> <div id="Afisel"> <img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /><img class="elite" src="http://placehold.it/50x50" /> </div> </td> </tr> </tbody> </table> </div>

PA > Visualización > Colores > CSS Stylesheet

Código:: #Afistab {background: #134; width: 800px; margin: 0 auto; padding: 10px; border: 5px solid #79204e;} .Afistit {color:#ccc; font: Tulpen One 20px; display:block; background: #79204e; padding:5px; margin-top:-10px; text-align:center; letter-spacing:13px; text-transform:uppercase;} #Afisher {padding: 2px; width: 233px; margin-left:-6px;} .her {width:50px;height:90px; border:3px solid #79204e; display:inline-block;} #Afisel { padding: 5px; width: 550px;} #Adir {width: 240px; padding: 2px; text-align: center; margin-top:8px; margin-left:-15px;} .dire{width:50px;height:50px; border:3px solid #79204e; display:inline-block;} .elite{-webkit-transition: all 0.7s ease; transition: all 0.7s ease; width:40px; height:40px; margin:0px; border:3px solid #79204e;}