positionnement responsive 1

La multiplication des appareils lisant les pages internet et leur différentes capacités d'affichage oblige à proposer des pages qui tiennent compte des capacités de l'écran qui les lit.

Une image de 1920x1080px, qui s'affichera en totalité sur un écran de cette définition, ne sera visible qu'en moitié sur un écran de 960x540px (exemple) et il faudra "jouer de l'ascenseur" vertical et horizontal.

Faire un montage qui s'adapte à la taille de l'écran qui le lit est possible par un simple code à ajouter en ligne CSS; exemple: si vous définissez la largeur de votre image à 50% et sa hauteur en "auto", cette image s'affichera à 50% de la capacité de l'écran qui l'affichera, quelle que soit sa dimension.

Si vous possédez plusieurs médias de différentes capacités, ouvrez cette page avec chacun d'eux et, si je ne me trompe pas, l'affichage occupera la largeur de chaque écran.

Voici un montage exemple: survolez les vignettes de Rosans 05150.

<div id="resp">
<p><img id="m0" src="http://ekladata.com/PIGccxwL7D6mvbfagEobWW_JKdc.jpg" alt="" /></p>
<p><img id="m1" src="http://ekladata.com/HOJjy_6qNG9NKk1DxiARFbE8ApQ.jpg" alt="" /></p>
<p><img id="m2" src="http://ekladata.com/NV667Kso_qQXFoZSFIGyrhWSu3c.jpg" alt="" /></p>
<p><img id="m3" src="http://ekladata.com/IMHncPnzk8JZpHm3Chr8RoY4dEg.jpg" alt="" /></p>
<p><img id="m4" src="http://ekladata.com/M4K8ciJT5zl1f-M2ozRrDDsJTaM.jpg" alt="" /></p>
</div>
<style><!--
@viewport {width: device-width;}
#resp{width:90%; height: 1050px;}
#m0{position:absolute; z-index:1; width:95%; height:auto; transform:translate(0px,0px); border:6px ridge grey;}
#m1{position:absolute; z-index:5; width:12%; height:auto; border:4px solid white; box-shadow:4px 4px 8px black; margin:45% 0% 0% 20%; transition:all 1s linear;}
#m2{position:absolute; z-index:5; width:12%; height:auto; border:4px solid white; box-shadow:4px 4px 8px black; margin:45% 0% 0% 35%; transition:all 1s linear;}
#m3{position:absolute; z-index:5; width:12%; height:auto; border:4px solid white; box-shadow:4px 4px 8px black; margin:45% 0% 0% 50%; transition:all 1s linear;}
#m4{position:absolute; z-index:5; width:12%; height:auto; border:4px solid white; box-shadow:4px 4px 8px black;  margin:45% 0% 0% 65%; transition:all 1s linear;}
#m1:hover, #m2:hover, #m3:hover, #m4:hover{z-index:10; width:95%; height:auto; transform:translate(0px,0px); border:6px ridge grey; box-shadow:none; margin:0% 0% 0% 0%;}
--></style>

Le premier paragraphe comporte les éléments html: le cadre général (id="resp") et les paragraphes comprenant les images (id="m0/m1/m2/m3/m4")

Le second paragraphe comporte les attributs qui concernent chaque élément html.

Le cadre "resp" ne fera que 90% de la largeur de l'écran de lecture et devra avoir la hauteur fixée en pixel; la hauteur s'adaptera en fonction de l'écran de lecture.

L'image de fond (m0) fera 95% du cadre en largeur et la hauteur sera réglée en "auto";

Les vignettes (m1 à m4) feront 12% de largeur et la hauteur sera "auto"

Le positionnement de ces vignettes ne peut être fait en pixel car cela déformerait le montage à l'agrandissement ou au rétrécissement; il faut donc trouver un moyen de les positionner en % et ce moyen est l'attribut margin, qui détermine les écarts haut/droit/bas et gauche autour de l''élément (4 valeurs, ici en %); les valeurs sont à tester selon votre montage.

Cet attribut permet de positionner chaque élément indépendant (position:absolute) où on le souhaite et le faire s'agrandir ou s'animer selon le code choisi.

Le premier chiffre correspond au positionnement vertical, par rapport au bord haut du montage: le second, par rapport au bord droit; le troisième, par rapport au bord bas et le quatrième, par rapport au bord gauche.

Il faut donc positionner notre vignette en donnant une valeur à 2 écarts et non au 4: 2 restants à 0%.

Si vous souhaitez que votre montage soit plus petit que 90% de la largeur de l'écran, vous modifiez simplement cette valeur