Chez Papinou - Skins GuppY

 
Vous êtes ici :   Accueil » Un bandeau avec plusieurs images
    Imprimer la page...
Texte à méditer :   GuppY 6 ???   Il y a moins bon mais c'est plus cher ! ! !   
Texte à méditer :   S'il n'y a pas de solution, c'est qu'il n'y a pas de problème. Devise Shadok   
Texte à méditer :   Utilisateur de GuppY, je suis membre de l' asso freeGuppY ... et vous ? ? ?   
Texte à méditer :   Pourquoi vouloir compliquer ?  Essayez GuppY 6  tout simplement  !!!   
Texte à méditer :   N'oubliez pas de protéger l'accès à  l'admin de GuppY 6.   
Texte à méditer :   Votre premier réflexe après le téléchargement de GuppY 6 ?   Lire la documentation  ! ! !   

Contact

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 6614 fois