Chez Papinou - Skins GuppY 5

 

top.gif

   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 à  la zone d'administration de GuppY 5.   
   Votre premier réflexe après le téléchargement de GuppY 5 ?   Lire la documentation  ! ! !   
Vous êtes ici :   Accueil » Un bandeau avec images et texte
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Partenaire GuppY
logo_nuxit_guppy.png
Astuces GuppY 5
Translator
Nouvelles

+ Année 2017
 -  Année 2017
+ Année 2016
 -  Année 2016
 Décembre 2016
 Octobre 2016
 Septembre 2016
 Juillet 2016
 Juin 2016
 Mai 2016
 Avril 2016
 Mars 2016
 Février 2016
 Janvier 2016
+ Année 2015
 -  Année 2015
+ Année 2014
 -  Année 2014
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.

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

Pour ce bandeau avec des images et du texte affiché sur chaque image, il est beaucoup plus simple d'utiliser trois boites libres, sans afficher le titre de chaque boite (§titre FB47 - §titre FB48, §titreFB49). Vous les sélectionnez sur la même ligne à Boites en haut sur la colonne de gauche à 50% et celle du centre et de droite avec une largeur de 25%.

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) :
 

<div id="aleft">
<figure><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%;" title="" />
<figcaption>Affichage du texte pour le test</figcaption>
</figure>
</div>

Et le code de la seconde boite libre (FB48) :
 

<div id="acenter">
<figure id="image01"><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: 98%;" title="" />
<figcaption id="image01">Affichage du texte<br />
pour le test</figcaption>
</figure>

<figure id="image02"><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: 98%;" title="" />
<figcaption id="image03">Affichage du texte<br />
pour le test</figcaption>
</figure>
</div>

Et le code de la troisième boite libre (FB49) :
 

<div id="aright">
<figure id="image03"><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: 98%;" title="" />
<figcaption id="image03">Affichage du texte<br />
pour le test</figcaption>
</figure>

<figure id="image04"><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: 98%;" title="" />
<figcaption id="image04">Affichage du texte<br />
pour le test</figcaption>
</figure>
</div>

Pour le contenu des boites libres,

vous modifiez le lien vers votre image alt="fleurs12.jpg" src="photo/gal_609/fleurs12.jpg", la couleur de la bordure border-color: rgb(255, 255, 255) et le texte de figcation Affichage du texte<br /> pour le test. Pour le reste du code, il vaut mieux ne pas y toucher.


Pour gérer l'affichage, j'ai ajouté dans le fichier styleplus.css:
 

#TopBoxes .tblbox.FB47 {
   margin: 0;
   padding:0;
   background-color: transparent;
   border: 0;
}
#TopBoxes .tblbox.FB48 {
   margin: 0 0 0 -5px;
   padding:0;
   background-color: transparent;
   border: 0;
}
#TopBoxes .tblbox.FB49 {
   margin: 0 0 0 -5px;
   padding:0;
   background-color: transparent;
   border: 0;
}
#TopBoxes .tblbox.FB47 img:hover, #TopBoxes .tblbox.FB48 img:hover, #TopBoxes .tblbox.FB49 img:hover {
   background-color: #000;
   opacity: 0.8 !important;
  }
figure {
   position: relative;
   display: flex;
   flex-direction: column;
   margin: 0;
   padding:0;
}
figcaption {
   position:absolute;   
   bottom: 5%;
   padding: 0 5%;
   color: #FFF;
   font-weight: bold;
   font-size: 25px;
}

Vous devrez peut être ajuster le margin de margin: 0 0 0 -5px; pour le -5px.

La partie avec img:hover sert à l'affichage de l'effet hover au passage du pointeur de la souris sur chaque image.

Les balises figure et figcaption servent pour l'affichage des images et du texte, vous pouvez modifier color, font-weight et font-size, il est préférable de ne pas toucher aux autres paramaètres.


Vous devez arriver à ce résultat :

bandeau_images_texte.jpg


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 : 04/11/2017 @ 18:22
Catégorie : Astuces GuppY 5 - GuppY 5
Page lue 99 fois

Vous êtes ici :   Accueil » Un bandeau avec images et texte
 
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
Captcha reload
Recopier le code :


  4558288 visiteurs
  3 visiteurs en ligne

Connectés :
( personne )
Snif !!!
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