adHoc.71site.fr

→ Un bandeau dans une boîte (ou plusieurs boîtes de front) composé de cellules contenant des images, des textes et bien d'autres possibilités... insérées dans des Iframes responsives... (une variante de la page précédente)

C'est le même procédé qui est visible dans la partie démos de ce site (les deux cellules de gauche du bandeau). Affiché en Mobile, les cellules qui le composent occupent la largeur de l'écran et sont alignées verticalement.

C'est suite à une demande d'un utilisateur que j'ai cherché cette présentation supplémentaire. Il me donnait cet exemple : http://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 dans le zip en téléchargement : imagesBandeauIFrames.zip.

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). Chacun pourra s'inspirer à sa guise des trois variantes...

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

Dans l'exemple de ce tutoriel, il y a 7 IFrames dans lesquels sont placés les fichiers cellule01.html à cellule07.html. ( Sur ce site, ces fichiers ainsi que le dossier imagesBandeauIFrames qui contient toutes les images sont placés dans le dossier images à la racine d'adHoc ... mais vous pouvez adapter en fonction de vos souhaits... )

/* cellules pour iframe-responsive */
.cellule32 {
	margin:0.5%;
	width:32.3%;
	float:left;
}

@media screen and (max-width: 480px) {
.cellule32 {
	width:100%;
	margin:auto;
}
}
/* fin cellules pour iframe-responsive */

Ensuite, le code de l'exemple ci-dessus ( dont tous les fichiers sont disponibles au téléchargement : imagesBandeauIFrames.zip ) à entrer où vous le souhaitez dans le code source de la page, de la boîte :

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule01.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule02.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule03.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule04.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule05.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule06.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule32">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio350x350.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule07.html" width="350" height="350" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div style="clear:both;">
</div>

Les Iframes s'enchaînent sur la page grâce à float:left; qu'il ne faut pas modifier.

Ensuite c'est le contenu des cellules qu'il faut modifier... Voilà ci-dessous, par exemple le contenu du fichier cellule01.html bandeau gris.

Le contenu du fichier cellule04.html bandeau bleu.

Le contenu du fichier cellule06.html bandeau rouge.

Les unités utilisées sont exclusivement des unités proportionnelles vw ou % ce qui rend la cellule totalement responsive.

Notez également que que le height du fond survolé est à 67%. C'est un pur hasard ! 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% ! ). Mais faites varier ces pourcentages à votre guise bien sûr !

Utilisez sans modération les fichiers .html du zip en téléchargement : imagesBandeauIFrames.zip. Veuillez, s'il vous plaît laisser la référence à mon site dans l'en-tête, merci.

Me contacter sur le forum pour toute aide ou information supplémentaire.