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

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

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

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 de style ou de style additionnel.

Toutes les images dont je me sers ici sont de même ratio 711*450px ( j'ai donc créé une image transparente de 237*150px nommée ici ratio237x150.gif et placée dans le dossier images à la racine d'adHoc ). 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 certainement 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 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...)

Afin que ce bandeau s'affiche correctement en Web et sur Mobile, il faut placer au début du code source de votre page ou boîte, encadré les balises [style type="text/css"]...[/style] , ou bien dans votre fichier style.css de la skin ou (mieux) dans un fichier de style additionnel, comme c'est le cas ici, ce type de code en adaptant éventuellement le nombre de règles et la règle @media screen pour la taille des écrans réduits :

/* cellules pour iframe-responsive */
.cellule100, .cellule80, .cellule75,
.cellule66, .cellule50, .cellule40,
.cellule33, .cellule25, .cellule20 {
	margin: auto;
	float:left;
}
.cellule100 {width:100%;}
.cellule80 {width:80%;}
.cellule75 {width:75%;}
.cellule66 {width:66.6%;}
.cellule50 {width:50%;}
.cellule40 {width:40%;}
.cellule33 {width:33.3%;}
.cellule25 {width:25%;}
.cellule20 {width:20%;}

@media screen and (max-width: 480px) {
.cellule80, .cellule75, .cellule66, .cellule50,
.cellule40, .cellule33, .cellule25, .cellule20 {
	width:100%;
}
}
/* fin cellules pour iframe-responsive */

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

<div class="cellule66">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-demo1.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule33">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-demo2.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule33">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule-demo3.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

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

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% en fonction des classes utilisées) 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, à titre d'exemple le contenu du fichier cellule-demo1.html appelé en tête.

La partie @font-face { ... } peut être adaptée, ou supprimée si vous ne souhaitez pas utiliser de polices supplémentaires. Les fonds sont placés dans un dossier imagesBandeauIFrames au même niveau que les fichiers .html ( Rappel : sur ce site, dans le dossier images à la racine d'adHoc... mais adaptable... ) et c'est la superposition au survol (:hover) d'une image translucide ( fond0.png ) qui donne cet effet d'assombrissement.

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

Dans la partie démos ce site. Il y a 5 cellules dans une boîte installée seule dans une section horizontale en _index par exemple. Voici le code d'intégration dans sa boîte :

<div class="cellule50">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule1.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule25">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule2.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule25">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule3.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule25">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule4.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

<div class="cellule25">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="images/ratio237x150.gif" /><iframe marginheight="0" marginwidth="0" scrolling="no" src="images/cellule5.html" width="237" height="150" frameborder="0"></iframe>
</div><!-- fin iframe-responsive-wrapper -->
</div><!-- fin cellule -->

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.