En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

Chez Papinou - Skins GuppY 5

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

Astuces GuppY 5

Translator

En savoir plus

Radio Papinou

radio01.png
 

Twitter

Dons Chez Papinou


Si vous le souhaitez vous pouvez participez aux frais en faisant un don.

Je vous laisse le soin de choisir le montant, l'essentiel étant le geste.

Liens RSS

Un bandeau avec plusieurs images

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
https://www.papinou.fr/data/fr-articles.xml

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 : - GuppY 5
Page lue 1891 fois

Vous êtes ici :   Accueil » Un bandeau avec plusieurs images
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  4783859 visiteurs
  1 visiteur en ligne

Connectés :
( personne )
Snif !!!

Calendrier

Licence

Cette création est mise à disposition des visiteurs selon les termes de la
Toute citation doit comporter un lien direct vers la page d'origine.
Chez Papinou est en ligne depuis le 26.03.2006
 
Lire les mentions légales
 

Ce site a fait l'objet d'un dépôt auprès de la Commission Nationale Informatique et Libertés le 06 avril 2006 et a été enregistré sous le numéro d'agrément 1160345.