Un bandeau avec plusieurs images
Pour le faire, j'utilise deux boites libres, sans afficher le titre de chaque boite (§titre FB47 - §titre FB48). Vous les sélectionnez sur la même ligne à Boites en haut sur la colonne de gauche et celle du centre avec une largeur de 50%.
L'ensemble est responsive et s'adapte à tous les écrans, pour les smartphones vous les sélectionnez avec une largeur de 100% l'une sous l'autre.
Voici le code de la première boite libre (FB47) :
<p style="margin:0 auto;"><img alt="fleurs03.jpg" src="photo/gal_609/fleurs03.jpg" style="border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; width: 100%;" /></p>
Et le code de la seconde boite libre (FB48) :
<p style="margin:0 auto;"><img alt="fleurs01.jpg" src="photo/gal_609/fleurs01.jpg" style="border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; float: left; width: 49%;" title="" /><img alt="fleurs12.jpg" src="photo/gal_609/fleurs12.jpg" style="border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; float: left; width: 49%;" title="" /><img alt="fleurs09.jpg" src="photo/gal_609/fleurs09.jpg" style="border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; float: left; width: 49%;" title="" /> <img alt="fleurs06.jpg" src="photo/gal_609/fleurs06.jpg" style="border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); margin: 0px; float: left; width: 49%;" title="" /></p>
Pour gérer l'affichage, j'ai ajouté dans le fichier styleplus.css:
#TopBoxes .tblbox.FB47 { margin: 0; background-color: transparent; border: 0; } #TopBoxes .tblbox.FB48 { margin: 0 0 0 -10px; background-color: transparent; border: 0; } #TopBoxes .tblbox.FB47 img:hover, #TopBoxes .tblbox.FB48 img:hover { background-color: #000; opacity: 0.8 !important; }
Vous devrez peut être ajuster le margin de margin: 0 0 0 -10px; pour le -10px.
La dernière partie avec img:hover sert à l'affichage de l'effet hover au passage du pointeur de la souris sur chaque image.
Vous devez arriver à ce résultat :
Comme vous le voyez, ce n'est pas insurmontable, même pour un débutant. Il vous restera à perfectionner le bandeau, par exemple avec un lien sur chaque image, ou autre selon votre choix !
Si vous rencontrez un problème, merci de poster sur mon forum, rubrique Plugins, forks, astuces GuppY.