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 :

bandeau_images.jpg


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.



 


Date de création : 03/11/2017 @ 18:10
Catégorie : Astuces GuppY - GuppY 5
Page lue 6638 fois