En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Bandeau avec des cellules dans des Iframes
 
    Imprimer la page...
    Imprimer la section...
 
 
 
 
 

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... rolleyes

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 :

<div style="margin: auto; width:66.6%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" /><iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule-demo1.html" width="237"></iframe></div>
</div>

<div style="margin: auto; width:33.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" /><iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule-demo2.html" width="237"></iframe></div>
</div>

<div style="margin: auto; width:33.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" /><iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule-demo3.html" width="237"></iframe></div>
</div>

<div style="clear:both;"></div><!-- Important dans un article -->

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.

<!doctype html>
<!--
    Cellule pour intégration par des Iframes dans un bandeau
    2017 JeanDenis https://www.71site.fr    
 -->
<html lang="fr">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>cellule-demo1</title>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Styles - Placement des images de fond / Éventuellement ajout d'une police / style des liens ...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
    <style type="text/css">    
    @font-face { /* ajout d'une police d'une skin : adapter ou supprimer */
      font-family: "dry_brush";
      src: url("../skins/skin_transparence04/font/dry_brush.eot");
      src: url("../skins/skin_transparence04/font/dry_brush.eot#iefix") format("embedded-opentype"),
           url("../skins/skin_transparence04/font/dry_brush.woff") format("woff"),
           url("../skins/skin_transparence04/font/dry_brush.ttf") format("truetype"),
           url("../skins/skin_transparence04/font/dry_brush.svg#dry_brush") format("svg");
      font-weight: normal;
      font-style: normal;
    }    
     body { /* image de fond de la cellule */
        background: url(imagesBandeauIFr/fond1.jpg)no-repeat top fixed;
        background-size:100% auto;
    }
     body:hover { /* image de fond de la cellule survolée : superposition d'une image modifiant l'opacité */
        background: url(imagesBandeauIFr/fond0.png)no-repeat top fixed, url(imagesBandeauIFr/fond1.jpg)no-repeat top fixed;    
        background-size:100% auto;    
    }
    a { color: #FFFFFF; text-decoration: none; } /* couleur des liens */
    a:hover { color: #30AFCF; text-decoration: none; } /* couleur des liens survolés */
    img, object, embed, canvas, video, audio, picture {
            border-style: none;
            max-width: 100%;
            height: auto;
    }
    </style>
</head>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Corps de la page - Source des images / Texte / Liens hypertextes / etc...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
  <body>
 
<br>
  <span style="font-family: dry_brush; font-size: 10vw; color: #FFFFFF; margin-left:5%;"><a href="https://www.decocuir.com/" target="_blank">Déco Cuir</a></span>
 
<br>
  <span style="font-family: dry_brush; font-size: 7vw; color: #FF0000; margin-left:10%;">cuirs, outils et accessoires...</span>
 
<br>
  <div style="text-align: center;">
  <a href="https://www.decocuir.com/" target="_blank"><img alt="decocuir.jpg" src="imagesBandeauIFr/decocuir.jpg" style="border-width: 0px; border-style: solid; width: 40%;" /></a>
 
<br><br>
  <img alt="OK.gif" src="imagesBandeauIFr/OK.gif" style="border-width: 0px; border-style: solid; width: 10%;" />
 
<br>    
 
</div>
  <br><br><br><br>
  </body>
  </html>

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 :

§Bandeau1
<div style="margin: auto; width:100%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule1.html" width="237"></iframe>
</div>
</div>

§Bandeau2
<div style="margin: auto; width:100%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule2.html" width="237"></iframe>
</div>
</div>

<div style="margin: auto; width:100%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule3.html" width="237"></iframe>
</div>
</div>

§Bandeau3
<div style="margin: auto; width:100%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule4.html" width="237"></iframe>
</div>
</div>

<div style="margin: auto; width:100%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio237x150.gif" />
<iframe frameborder="0" height="150" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule5.html" width="237"></iframe>
</div>
</div>

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. 


Date de création : 08/11/2017 @ 16:08
Catégorie : Astuces - IFrames responsives
Page lue 124203 fois


Réactions à cet article


Réaction n°1 

par labellenotefr le 16/10/2018 @ 23:18

Merci pour cet article !

C'est exactement ce que je cherchais pour rajeunir un peu la navigation sur mon site qui devenait un peu trop fourre tout en grossissant.

J'ai utilisé sur ma page d'accueil  un tel bandeau à 6 tuiles, qui pointent chacune vers une page dédiée (au sens config boites), chacune avec son propre édito et son propre menu, ce qui me permet de séparer plus clairement les différentes activités de mon site.

Merci encore !

Christophe de www.labellenote.fr

PS : nous avons le même fournisseur cuir wink


Bonjour Christophe,

Merci de ton commentaire. Je suis content d'avoir pu t'être utile !

Très joli site pour des activités on ne peut plus variées...

Bonne continuation,

Cordialement,

Jean-Denis