Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Iframes responsives - Bandeau avec des cellules dans des Iframes-3-
→ 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 des pages précédentes)
C'est le même procédé qui est visible dans la partie démos de ce site (les deux cellules de droite du bandeau). Affiché en Mobile, les cellules qui le composent occupent la largeur de l'écran et sont alignées verticalement.
Ce sont les adaptations totalement "responsive design" des 3 séries "Images avec Hover Effects Ideas" : série1, série2 et série3.
Elles sont intégrées chacune dans un fichier .html appelé séparément dans un Iframe responsive. Les images et la police d'icônes sont disponibles ici : HoverEffectImg.zip et l'ensemble des fichiers .html est disponible là : cellulesHoverEffectIdeas.zip.
Il est impératif de prendre connaissance du tutoriel sur les IFrames responsives ( ici ) et du premier tutoriel sur les bandeaux ( ici ) avant de vous lancer dans cette aventure.
Toutes les images dont je me sers ici sont de même ratio 480*360px ( j'ai donc créé une image transparente de 400*300px nommée ici ratio400x300.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 30 IFrames dans lesquels sont placés tous les fichiers .html. Sur ce site, ces fichiers sont placés dans le dossier images à la racine d'adHoc ainsi que le dossier tutoriels/HoverEffectImg qui contient toutes les images et la police d'icône... mais vous pouvez adapter en fonction de vos souhaits...Comme pour le tutoriel des pages précédentes, il faut prévoir un style additionnel. On prévoit ici aussi des marges entre les cellules. Si vous souhaitez utiliser aussi la (ou les) version(s) précédente(s), il suffit de "mixer" les styles. C'est le cas sur ce site.
/* cellules pour iframe-responsive */
.cellule48 {
margin:1%;
width:48%;
float:left;
}
@media screen and (max-width: 480px) {
.cellule48 {
width:100%;
margin:auto;
}
}
/* fin cellules pour iframe-responsive */
Ensuite, le code de l'exemple ci-dessus à entrer où vous le souhaitez dans le code source de la page, de la boîte :
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Apollo.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Bubba.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Chico.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Dexter.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Duke.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Goliath.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Honey.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Jazz.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Julia.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Layla.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Lexi.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Lily.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Marley.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Milo.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Ming.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Moses.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Oscar.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Romeo.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Roxy.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Ruby.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Sadie.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Sarah.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Selena.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Steve.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Hera.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Kira.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Phoebe.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Terry.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Winston.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
<div class="cellule48">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio400x300.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-Zoe.html" width="400" height="300" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->
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, à titre d'exemple le contenu du fichier cellule-Winston.html
Les unités utilisées sont exclusivement des unités proportionnelles vw ou % ce qui rend la cellule totalement responsive.
Vous pouvez utilement vous référer aux articles suivants pour les réglages : série1, série2 et série3. Les images et la police d'icônes sont dans ce zip : HoverEffectImg.zip.
Utilisez sans modération les fichiers .html du zip : cellulesHoverEffectIdeas.zip. Veuillez, s'il vous plaît laisser les références d'origine du procédé et de mon site dans l'en-tête, merci.
Me contacter sur le forum pour toute aide ou information supplémentaire.