Vous êtes ici :   Accueil » Bandeau avec des cellules dans des Iframes
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

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

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, est proposée par Papinou
https://www.papinou.fr/articles.php?lng=fr&pg=9749&mnuid=7772&tconfig=0#z2
sur des images, plus rapide et plus facile à mettre en oeuvre, mais avec beaucoup moins de possibilités toutefois. 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 http://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: 3rem; 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: 1.5rem; 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 ).

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

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

Vous êtes ici :   Accueil » Bandeau avec des cellules dans des Iframes
Préférences

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


  Nombre de membres 35 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
LP4h4
Recopier le code :
11 Abonnés