-
Faux PPS
Voilà l'article que j'ai publié, comme modèle; vous trouverez ensuite le principe du montage qui est, comme souvent, très répétitif.
Melofaroh a publié, dernièrement, un PPS du net, qui présentait, sur chaque page,une photo d'un lieu et qui proposait 4 boutons pour le lieu de cette photo.
J'ai trouvé le principe intéressant et j'essaye de le reproduire en code html/CSS.
Je voulais mettre une iframe Google à la place des photos mais un clic pour changer de page et un clic pour naviguer dans l'iframe, il y en a un de trop.
Vous trouverez un curseur latéral, à droite, pour faire défiler les pages ou par la molette de la souris.
Sur chaque page, une photo d'un lieu, un lien au clic vers une iframe du lieu et un petit descriptif.
Dessous, 4 boutons de lieux proposés.
Au survol, 3 ont un fond rouge et le bon a un fond vert.Près de quelle île se trouve le Diamant?
Lien iframe
Ce rocher, tenu par les troupes anglaises alors que l'île était française, résistait aux assauts, du fait de ses côtes abruptes.
Quelques chaloupes, emplies de barils de rhum, envoyées dériver, rendirent la garnison incapable de résister.Survolez les boutons: fond rouge: perdu ! fond vert:gagné !
Guadeloupe
Ste Lucie
La Réunion
La Martinique
Dans quelle île se trouve la pointe des Châteaux ?
lien 2
Constituée d’une large bande littorale balayée par des vents souvent violents, la pointe des Châteaux se distingue par ses aiguillons, surgissant de l'océan, reliques d'une falaise érodée par les vagues et les embruns, et qui n'abrite plus qu'une faune et une flore rares, dont certaines espèces endémiques.Survolez les boutons: fond rouge: perdu ! fond vert:gagné !
Guadeloupe
Ste Lucie
La Réunion
La Martinique
Où se trouve la presqu'ile de la Caravelle ?
Lien 3
La presqu'île de la Caravelle est une presqu'île... située sur la côte atlantique, à Tartane.
D'une longueur de 12 km, son point culminant est le Morne Pavillon, d'une hauteur de 189 m.Survolez les boutons: fond rouge: perdu ! fond vert:gagné !
Guadeloupe
Ste Lucie
La Dominique
La Martinique
Où se trouve le piton de la Fournaise?
Lien 4
Le piton de la Fournaise culmine à
2 632 mètres d'altitude.
Le piton de la Fournaise compte parmi les volcans les plus actifs de la planèteSurvolez les boutons: fond rouge: perdu ! fond vert:gagné !
Guadeloupe
La Réunion
La Dominique
La Martinique
Code de principe et non celui du montage.
<div style="width: 60.7vw; height: 69vh; margin: 2vh auto; border: 0.3vh ridge grey; overflow: auto;">
<div id="pps">
<div style="width: 60vw; height: 69vh; box-sizing: border-box; padding: 0.5vh; border: 0.3vh ridge white; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 80vw 92vh; text-align: center; font-size: 3vh;">Votre page d'introduction</div>
<div style="width: 60vw; height: 69vh; box-sizing: border-box; padding: 0.5vh; border: 0.3vh ridge white; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 80vw 92vh;">
<p id="mont0">Près de quelle île se trouve le Diamant?</p>
<p id="mont1"><img style="width: 20vw;" src="http://ekladata.com/9srtPYyY8HXtjlTykvfdydVOMoc.jpg" alt="" /></p>
<p id="mont2"><a href="https://goo.gl/maps/HAwJ2Wc7DJ62" target="_blank">Lien iframe</a><br />texte1</p>
<p id="mont3">Survolez les boutons: fond rouge: perdu ! fond vert:gagné !</p>
<p id="mont4">Guadeloupe</p>
<p id="mont5">Ste Lucie</p>
<p id="mont6">La Réunion</p>
<p id="mont7">La Martinique</p>
</div>
<div style="width: 60vw; height: 69vh; box-sizing: border-box; padding: 0.5vh; border: 0.3vh ridge white; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 80vw 92vh;">
<p id="mont0b">Dans quelle île se trouve la pointe des Châteaux ?</p>
<p id="mont1b"><img style="width: 20vw;" src="http://ekladata.com/dhoUPHidi22ncbrMiPEdXRsk9QQ.jpg" alt="" /></p>
<p id="mont2b"><a href="https://goo.gl/maps/TLdc7LK5Gks" target="_blank">lien 2</a><br />texte 2</p>
<p id="mont3b">Survolez les boutons: fond rouge: perdu ! fond vert:gagné !</p>
<p id="mont4b">Guadeloupe</p>
<p id="mont5b">Ste Lucie</p>
<p id="mont6b">La Réunion</p>
<p id="mont7b">La Martinique</p>
</div>
<div style="width: 60vw; height: 69vh; border: 0.3vh ridge white; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 80vw 92vh;">
<p id="mont0c">Où se trouve la presqu'ile de la Caravelle ?</p>
<p id="mont1c"><img style="width: 20vw;" src="http://ekladata.com/ahTh1Aa9UUrvfJ8T-gcN8W0o_O0.jpg" alt="" /></p>
<p id="mont2c"><a href="https://goo.gl/maps/Ueme155oYK32" target="_blank">Lien 3</a><br />texte 3</p>
<p id="mont3c">Survolez les boutons: fond rouge: perdu ! fond vert:gagné !</p>
<p id="mont4c">Guadeloupe</p>
<p id="mont5c">Ste Lucie</p>
<p id="mont6c">La Dominique</p>
<p id="mont7c">La Martinique</p>
</div>
<div style="width: 60vw; height: 69vh; border: 0.3vh ridge white; background: url('http://ekladata.com/J8cAQSKh6mMVCW1XrFWgE9ewNbI.jpg'); background-size: 80vw 92vh;">
<p id="mont0d">Où se trouve le piton de la Fournaise?</p>
<p id="mont1d"><img style="width: 20vw;" src="http://ekladata.com/QiYK0WNQXM1_7jtIng_paRIbZgs.jpg" alt="" /></p>
<p id="mont2d"><a href="https://goo.gl/maps/HEfcQrQSjas" target="_blank">Lien 4</a><br />texte 4</p>
<p id="mont3d">Survolez les boutons: fond rouge: perdu ! fond vert:gagné !</p>
<p id="mont4d">Guadeloupe</p>
<p id="mont5d">La Réunion</p>
<p id="mont6d">La Dominique</p>
<p id="mont7d">La Martinique</p>
</div>
</div>
</div>
<style><!--
#pps{ width: 60vw; height: 340vh; transform: translate(0vw,0vh);}#mont0{text-align:center; font-size:5vh;}
#mont1{ float:left; width:20vw; height:25vh; transform:translate(5vw,5vh);}
#mont2{ float:left; width:20vw; height:27vh; border:0.3vh solid brown; margin:5vh 0 2vh 13vw; text-align:center; font-size:2vh;}
#mont3{clear:both; text-align:center;font-size:3vh;}
#mont4,#mont5,#mont6,#mont7{float:left; width:8vw; text-align:center; font-size:2vh; background:rgba(255,255,255,0.5); border:0.2vh solid black; transform:translate(5vw,5vh); margin:0 2vw 0 2vw;}
#mont4:hover, #mont5:hover, #mont6:hover{ background:rgba(255,0,50,0.5);}
#mont7:hover{background:rgba(0,100,100,0.5);}
#mont0b{text-align:center; font-size:4vh;}
#mont1b{ float:left; width:20vw; height:23vh; transform:translate(5vw,0vh);}
#mont2b{ float:left; width:20vw; height:32vh; border:0.3vh solid brown; margin:0vh 0 2vh 13vw; text-align:center; font-size:2vh;}
#mont3b{clear:both; text-align:center;font-size:3vh;}
#mont4b,#mont5b,#mont6b,#mont7b{float:left; width:8vw; text-align:center; font-size:2vh; background:rgba(255,255,255,0.5); border:0.2vh solid black; transform:translate(5vw,5vh); margin:0 2vw 0 2vw;}
#mont4b:hover, #mont5b:hover, #mont6b:hover{ background:rgba(255,0,50,0.5);}
#mont7b:hover{ background:rgba(0,100,100,0.5);}
#mont0c{text-align:center; font-size:4vh;}
#mont1c{ float:left; width:20vw; height:23vh; transform:translate(5vw,0vh);}
#mont2c{ float:left; width:20vw; height:30vh; border:0.3vh solid brown; margin:0vh 0 2vh 13vw; text-align:center; font-size:2vh;}
#mont3c{clear:both; text-align:center;font-size:3vh;}
#mont4c,#mont5c,#mont6c,#mont7c{float:left; width:8vw; text-align:center; font-size:1.5vh; background:rgba(255,255,255,0.5); border:0.2vh solid black; transform:translate(5vw,5vh); margin:0 2vw 0 2vw;}
#mont4c:hover, #mont5c:hover, #mont6c:hover{ background:rgba(255,0,50,0.5);}
#mont7c:hover{ background:rgba(0,100,100,0.5);}
#mont0d{text-align:center; font-size:4vh;}
#mont1d{ float:left; width:20vw; height:23vh; transform:translate(5vw,0vh);}
#mont2d{ float:left; width:20vw; height:23vh; border:0.3vh solid brown; margin:0vh 0 2vh 13vw; text-align:center; font-size:2vh;}
#mont3d{clear:both; text-align:center;font-size:3vh;}
#mont4d,#mont5d,#mont6d,#mont7d{float:left; width:8vw; text-align:center; font-size:1.5vh; background:rgba(255,255,255,0.5); border:0.2vh solid black; transform:translate(5vw,5vh); margin:0 2vw 0 2vw;}
#mont4d:hover, #mont5d:hover, #mont6d:hover{ background:rgba(255,0,50,0.5);}
#mont7d:hover{ background:rgba(0,100,100,0.5);}--></style>
Le principe est celui du défilé, par curseur latéral; le cadre ne fait apparaître qu'un paragraphe et les autres sont cachés.
Le code peut être simplifié mais, par clarté, je laisse chaque paragraphe indépendant.
A part le texte, l'image et le lien, la structure de chacun est similaire: on peut donc regrouper, par exemple, les lignes pour #mont0/#mont0b/#mont0c/mont0d en une seule et idem pour les autres.
Chaque paragraphe est dimensionné en 60vw/69vh, bordure et padding compris.
Si vous ajoutez un paragraphe, vous ajoutez 69vh à la hauteur du PPS, en CSS.
La partie CSS du code en simplifiée pourrait être:
<style><!--
#mont0,#mont0b,#mot0c,#mont0d{text-align:center; font-size:5vh;}
#mont1,#mont1b,#mot1c,#mont1d{ float:left; width:20vw; height:25vh; transform:translate(5vw,5vh);}
#mont2,#mont2b,#mot2c,#mont2d{ float:left; width:20vw; height:27vh; border:0.3vh solid brown; margin:5vh 0 2vh 13vw; text-align:center; font-size:2vh;}
#mont3,#mont3b,#mot3c,#mont3d{clear:both; text-align:center;font-size:3vh;}
#mont4,#mont5,#mont6,#mont7,#mont4b,#mont5b,#mont6b,#mont7b,#mont4c,#mont5c,#mont6c,#mont7c,#mont4d,#mont5d,#mont6d,#mont7d{float:left;width:8vw;text-align:center;font-size:2vh; background:rgba(255,255,255,0.5); border:0.2vh solid black; transform:translate(5vw,5vh); margin:0 2vw 0 2vw;}
#mont4:hover,#mont5:hover,#mont6:hover,#mont4b:hover,#mont5b:hover,#mont6b:hover,#mont4c:hover,#mont5c:hover,#mont6c:hover,#mont4d:hover,#mont5d:hover,#mont6d:hover{ background:rgba(255,0,50,0.5);}
#mont7:hover,#mont7b:hover,#mont7c:hover,#mont7d:hover{background:rgba(0,100,100,0.5);}--></style>
Dans cet exemple, la bonne réponse est toujours en mont7; à ajuster selon vos réglages.
montages par codes HTML/CSS
Créer mon blog