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 -variantes-
 
    Imprimer la page...
    Imprimer la section...
 
 
 
 
 

Bandeau avec des cellules -variantes-

Des variantes du bandeau avec des cellules dans des Iframes responsives

dans un article, ou mieux... dans un éditorial...

C'est suite à une demande de Han (que je remercie encore de me proposer régulièrement de nouveaux défis... wink), que j'ai cherché cette présentation supplémentaire. Il me donnait en exemple ce site :

https://www.letonnerroisenbourgogne.fr/Vivre-et-habiter/Le-conservatoire

J'ai donc cherché à m'en approcher le plus possible. Il est impératif de prendre connaissance du tutoriel sur les IFrames responsives ( ici ) et du tutoriel précédent ( ici ) avant de vous lancer dans cette aventure. Les fichiers et images nécessaires à ce tutoriel sont disponibles au téléchargement ( ici ).

Les trois premières cellules réagissent au survol du bandeau (bandeau gris). Les deux suivantes réagissent au survol de la cellule, mais le lien est sur le bandeau (bandeau bleu). Les deux dernières réagissent au survol de la cellule et le lien est sur la totalité de la cellule (bandeau rouge). Ces variations sont des suggestions de Han. J'ai donc souhaité mettre les trois variantes... Chacun pourra s'en inspirer à sa guise.

Ci-dessous le code d'intégration des Iframes dans cet article :

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule01.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule02.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule03.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule04.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule05.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule06.html" width="350"></iframe></div>
</div>

<div style="margin: 0.5%; width:32.3%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio350x350.gif" /><iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="photo/cellule07.html" width="350"></iframe></div>
</div>

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

Notez les margins qui permettent les marges entre les cellules et width à 32,3% (la somme de tous ces % sur une ligne donne 99,9%). Notez une image img/ratio350x350.gif transparente (les images étant carrées).

-----=====¤¤¤¤¤=====-----

Et, sur une remarque judicieuse de Han wink, si les images sont bien responsives, le texte, lui ne l'est pas... Et donc, en cherchant ici :

https://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport

J'ai adapté les codes des fichiers .html en conséquence avec une unité de police "responsive". Les fichiers sont corrigés, ainsi que le contenu du zip de téléchargement...

Ci-dessous le code du fichier cellule01.html  (bandeau gris) :

<!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>cellule01</title>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Styles - Placement des images de fond / Éventuellement ajout d'une police / style des liens ...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
    <style type="text/css">    
     body {
/* image de fond de la cellule */
        background: url(imagesBandeauIFr/violon.jpg)no-repeat top fixed;
        background-size:100% auto;
    }    
    a { color: #FFFFFF; text-decoration: none; }
/* couleur des liens */
    a:hover { color: #C0C0C0; text-decoration: none; } /* couleur des liens survolés */
    img, object, embed, canvas, video, audio, picture {
            border-style: none;
            max-width: 100%;
            height: auto;
    }
    #message {
/* attributs du message */
      position:absolute;
      top:67%;
/* position // haut */
      width:100%;
      background:rgba(0,0,0,.5);
/* couleur de fond et opacité */
      transition:all 0.7s ease;   /* temps de transition */    
    }
    #message:hover { 
/* attributs du message survolé */      
      top:45%;
/* position au survol // haut  */
      transition:all 0.7s ease;   /* temps de transition */   
    }
    #message h1 {
/* attributs du titre du message */
      font-family: arial; /* police */
      font-size: 9vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    #message p {
/* attributs du paragraphe du message */
      font-family: arial; /* police */
      font-size: 6vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    </style>
</head>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Corps de la page - Source des images / Texte / Liens hypertextes / etc...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
<body>

  <div id="message" style="text-align: center;">  
  <a href="https://fr.wikipedia.org/wiki/Instrument_%C3%A0_cordes_frott%C3%A9es" target="_blank"><h1>Les cordes
<br>frottées</h1>  
  <p>Pour en savoir plus
<br>cliquez sur ce bandeau.</p></a>
 
<br><br>
   </div>
</body>
</html>

Notez bien l'id="message" pour reprendre les attributs définis dans le style.

-----=====¤¤¤¤¤=====-----

Ci-dessous le code du fichier cellule04.html  (bandeau bleu) :

<!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>cellule04</title>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Styles - Placement des images de fond / Éventuellement ajout d'une police / style des liens ...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
    <style type="text/css">    
     body {
/* image de fond de la cellule */
        background: url(imagesBandeauIFr/trompette.jpg)no-repeat top fixed;
        background-size:100% auto;
    }    
    a { color: #FFFFFF; text-decoration: none; }
/* couleur des liens */
    a:hover { color: #C0C0C0; text-decoration: none; } /* couleur des liens survolés */
    img, object, embed, canvas, video, audio, picture {
            border-style: none;
            max-width: 100%;
            height: auto;
    }
    #fond-message { /* attributs du fond du message : ne pas modifier sauf transition */
      position:absolute;
      width:100%;
      height:100%;
      background:rgba(255,255,255,0); /* ou transparent ou ... */
      transition:all 0.7s ease;  
/* temps de transition */
    }
    #fond-message:hover { /* attributs du fond du message survolé */
      height:67%;   /* hauteur du fond <100% : fait donc remonter le message */
      transition:all 0.7s ease;  
/* temps de transition */
    } 
    #message {
/* attributs du message */
      position:absolute;
      top:67%;
/* position // haut */
      width:100%;
      background:rgba(0,0,255,.5);
/* couleur de fond et opacité */
    }
    #message h1 { /* attributs du titre du message */
      font-family: arial; /* police */
      font-size: 9vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    #message p {
/* attributs du paragraphe du message */
      font-family: arial; /* police */
      font-size: 6vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    </style>
</head>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Corps de la page - Source des images / Texte / Liens hypertextes / etc...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
<body>

  <div id="fond-message">
  <div
id="message" style="text-align: center;">  
  <a href="https://fr.wikipedia.org/wiki/Cuivres_(musique)" target="_blank"><h1>Les vents
<br>(Cuivres)</h1>  
  <p>Pour en savoir plus
<br>cliquez sur ce bandeau.</p></a>
 
<br><br>
  </div><!-- fin message -->
  </div><!-- fin fond-message -->
</body>
</html>

Notez bien les id="fond-message" et id="message" pour reprendre les attributs définis dans le style.

Notez également que que le height du fond survolé est à 67%. C'est un hasard ! eek ... car je voulais uniformiser l'effet sur les 7 bandeaux et pour obtenir un bandeau à 45% de la hauteur totale du premier exemple, il m'a fallu mettre 67% ( en effet 67% de 67% font environ 45% ! rolleyes ). Mais faites varier ces pourcentages à votre guise bien sûr !

-----=====¤¤¤¤¤=====-----

Ci-dessous le code du fichier cellule06.html  (bandeau rouge) :

<!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>cellule06</title>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Styles - Placement des images de fond / Éventuellement ajout d'une police / style des liens ...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
    <style type="text/css">    
     body {
/* image de fond de la cellule */
        background: url(imagesBandeauIFr/tambour.jpg)no-repeat top fixed;
        background-size:100% auto;
    }    
    a { color: #FFFFFF; text-decoration: none; }
/* couleur des liens */
    a:hover { color: #C0C0C0; text-decoration: none; } /* couleur des liens survolés */
    img, object, embed, canvas, video, audio, picture {
            border-style: none;
            max-width: 100%;
            height: auto;
    }
    #fond-message { /* attributs du fond du message : ne pas modifier sauf transition */
      position:absolute;
      width:100%;
      height:100%;
      background:rgba(255,255,255,0); /* ou transparent ou ... */
      transition:all 0.7s ease;  
/* temps de transition */
    }
    #fond-message:hover { /* attributs du fond du message survolé */
      height:67%;   /* hauteur du fond <100% : fait donc remonter le message */
      transition:all 0.7s ease;  
/* temps de transition */
    } 
    #message {
/* attributs du message */
      position:absolute;
      top:67%;
/* position // haut */
      width:100%;
      background:rgba(255,0,0,.5);
/* couleur de fond et opacité */
    }
    #message h1 { /* attributs du titre du message */
      font-family: arial; /* police */
      font-size: 9vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    #message p {
/* attributs du paragraphe du message */
      font-family: arial; /* police */
      font-size: 6vw; /* taille police responsive */
      color: #FFFFFF; /* couleur */
    }
    </style>
</head>
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Corps de la page - Source des images / Texte / Liens hypertextes / etc...
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->    
<body>

  <a href="https://fr.wikipedia.org/wiki/Membranophone" target="_blank"><!-- début lien englobant toute la page -->
  <div
id="fond-message">
  <div
id="message" style="text-align: center;">  
  <h1>Les vents
<br>(Cuivres)</h1>  
  <p>Pour en savoir plus
<br>cliquez sur cette image.</p>
 
<br><br>
  </div><!-- fin message -->
  </div><!-- fin fond-message -->
 
</a><!-- fin lien englobant toute la page -->
</body>
</html>

Notez bien les id="fond-message" et id="message" pour reprendre les attributs définis dans le style.

Peu de différences avec l'exemple précédent. Là, ce sont les balises <a> et </a> qui sont placées différemment (juste entre les balises <body></body>) afin d'englober toute la cellule.

-----=====¤¤¤¤¤=====-----

Pour réaliser un bandeau similaire en plus ou à la place de votre éditorial, il suffit d'adapter les fichiers .html des cellules. Et de les placer avec un code semblable à celui cité en haut de ce tutoriel, dans une boite libre déclarée dans Config Accueil.

Plusieurs boites seront nécessaires pour un édito mobile (mais le code des fichiers .html n'a pas à être changé). ATTENTION, dans ce cas les Iframes de chaque boite devront avoir un width de 100%.

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

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 §

§Edito+ par exemple...

et dans votre fichier styleplus placez (en remplaçant FB999 par votre n° de boite libre) au moins cela :

.tbl.FB999 { /* boite edito+ */
    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 : 20/11/2017 @ 09:28
Catégorie : Astuces - IFrames responsives
Page lue 59514 fois


Réactions à cet article


Réaction n°1 

par Gamelle le 28/12/2019 @ 02:12

Très très bon


Merci de cette réaction...

Cordialement,

Jean-Denis