Bandeau avec des cellules dans des Iframes

Un bandeau dans une ou plusieurs boites de front
composé d'images, de textes et bien d'autres possibilités...
insérées dans des Iframes responsives
à placer dans les boites du haut ou du bas, dans une boite édito, dans un article...

C'est le même procédé qui est visible un peu plus haut sur ce site (ou tout en bas sur la version mobile) . Il ne s'affiche que dans cette configuration lorsque cet article s'affiche.

NB importante... dans l'exemple ci-dessus les liens vont vers des sites que j'utilise pour mes commandes de cuir et d'outils... Ce n'est qu'un exemple de fonctionnement... en aucun cas de la publicité pour ces sites... et en tous cas, je n'ai rien reçu pour cela...

C'est suite à une question de nicephorous sur le forum de FreeGuppY
https://www.freeguppy.org/fgy5th.php?lng=fr&pg=269389&cat=201&fid=1#z2
que je me suis mis à chercher une solution de contournement permettant de réaliser son souhait.

Une autre solution, a été proposée ici sur des images, peut-être plus rapide et plus facile à mettre en oeuvre, mais avec tellement moins de possibilités... C'est pourquoi, je livre tout de même cette méthode.

IMPORTANT : Il faut avant tout avoir pris connaissance du tutoriel sur les Iframes responsives de ce site, et avoir placé le code css (style) correspondant dans votre fichier styleplus (accessible dans Config Style).

Toutes les images dont je me sers ici sont de même ratio 711x450 ( j'ai donc créé une image transparente de 237*150px nommée ici ratio237x150.gif et placée dans le dossier img à la racine de GuppY ). A vous d'adapter les formats et les chemins à vos souhaits.

Le principe est que dans chaque Iframe se place une cellule totalement indépendante. Cette cellule est un fichier .html

On peut modifier ces fichiers avec un logiciel tel notepad++ (avec quelques connaissances des codes...) ou avec des logiciels libres et gratuits d'édition html tels que Kompozer ou BlueGriffon... Il y en a d'autres... le plus simple est le mieux...

Dans l'exemple de ce tutoriel, il y a 3 IFrames dans lesquels sont placés les fichiers cellule-demo1.html cellule-demo2.html cellule-demo3.html. ( Sur ce site, ces fichiers ainsi que le dossier des images sont placés dans le dossier photo à la racine de GuppY ... mais vous pouvez adapter en fonction de vos souhaits... )

Le code de l'exemple ci-dessus ( dont tous les fichiers sont disponibles au téléchargement ici ) à entrer dans l'article, la boite libre... est celui-ci :

Les Iframes s'enchainent sur la page grâce à float:left; qu'il ne faut pas modifier. Les pourcentages d'occupation (66,6% 33,3% et 33,3%) permettent d'avoir le rendu final : Une image occupant les 2 tiers et 2 images superposées occupant le dernier tiers.

Ensuite c'est le contenu des cellules qu'il faut modifier... Voilà ci-dessous le contenu du fichier cellule-demo1.html appelé en tête.

Les parties surlignées en blanc sont à adapter. La partie @font-face { ... } peut être supprimée si vous ne souhaitez pas utiliser de polices supplémentaires. Les fonds sont placés dans un dossier imagesBandeauIFr au même niveau que les fichiers .html ( Rappel : sur ce site, dans le dossier photo à la racine de GuppY ... mais adaptable... ) et c'est la superposition au survol (:hover) d'une image translucide ( fond0.png ) qui donne cet effet d'assombrissement. Dans le corps de la cellule les <br> sont des sauts de ligne ( ils sont nécessaires jusqu'en bas afin d'assurer le changement au survol sur toute la surface de celle-ci ).

Notez aussi que suite à une judicieuse remarque de Han, l'unité utilisée pour la (ou les) police(s) est "responsive" : le texte s'adapte donc automatiquement. Information trouvée ici.

----------==========+++++==========----------

Le contenu de ces cellules peut être plus complexe et vous pouvez utiliser d'autres solutions de ce site ( Camera, Flexslider, images au survol... ) ou d'autres pourvu qu'elles soient appelées dans des fichiers .html ( ou .php ) par le biais des Iframes responsives.

L'exemple en haut de ce site est en trois parties dans trois boites libres séparées, placées dans les boites du haut dans Config Boites, respectivement à 50%, 25% et 25% d'occupation. Dans la version mobile, elles ont été placées tout en bas, dans la même colonne avec à chaque fois 100% d'occupation... ( Ce procédé peut donc être utilisé sur Ordinateur, Tablette ou Smartphone.)

Leur code respectif est le suivant :

Vous constaterez que leur largeur est fixée à chaque fois à 100%, c'est bien normal, elles occupent à chaque fois tout l'espace qui leur est attribué dans Config Boites.

----------==========+++++==========----------

Comme d'habitude, pour installer proprement ce dispositif sur votre site, il faut ne pas faire apparaitre le titre de la ( ou des ) boite(s) libre(s), pour cela faites-le(s) précéder du symbole §

§Bandeau1 par exemple...

et dans votre fichier styleplus placez (en remplaçant FB980 FB981 FB982 par vos n° de boites libres) au moins cela :

.tblbox.FB980, .tblbox.FB981, .tblbox.FB982 { /* Boites Bandeau1 Bandeau2 Bandeau3 */
  background: transparent;
  border: none;
  margin:0px;
  padding:0px;
}

Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.