Principe montage "Courteline"

Principe montage "Courteline"

Ce montage est à adapter à votre page blog; l'image de fond du montage sera donc à la taille que vous aurez choisie.

On crée un cadre, avec cette image en fond et on lui précise de cacher ce qui en dépasse:overflow:hidden; de façon à ne laisser apparaître qu'une partie des "citations", qui seront à survoler pour les faire apparaître en entier.

Survolez les onglets.

première citation: 1 ligne.

seconde citation: hauteur automatique
2 lignes.

troisième citation:
3 lignes
hauteur automatique

quatrième citation
4 lignes
hauteur automatique
pas de hauteur fixée pour les pragraphes

<div style="width: 800px; height: 450px; margin: 0px auto; border: 2px solid black; overflow: hidden; background: url('http://ekladata.com/84BeMEWtvjLa6s9eSrZ3vxYvju4.jpg');">
<p id="t1">Le titre</p>
<p id="t2">première citation: 1 ligne.</p>
<p id="t3">seconde citation: hauteur automatique<br />2 lignes.</p>
<p id="t4">troisième citation:<br />3 lignes<br />hauteur automatique</p>
<p id="t5">quatrième citation<br />4 lignes<br />hauteur automatique<br />pas de hauteur fixée pour les pragraphes</p>
</div>
<style></style>

Les dimensions choisies sont 800x450px, centré, bordure, dépassement caché et image de fond à la dimension; sinon, ajouter: background-size:cover; pour que l'image s'adapte aux dimensions du cadre.

Le paragraphe texte explicatif est facultatif mais il faut indiquer aux visiteurs de survoler les onglets, d'une façon ou d'une autre.

Les paragraphes t2 et t3 mesurent 600px; hauteur de ligne de 30 px pour que le texte en 14px soit centré verticalement dans le paragraphe; le centrage horizontal est par défaut à gauche mais peut être modifié; le positionnement des paragraphes les fait déborder vers la gauche, de façon invisible; la couleur de la police est transparent, pour ne pas être visible dans les onglets et devient noire au survol.

Au survol, ces paragraphes se déplacent vers la droite pour que leur bord gauche vienne contre le bord gauche du montage; largeur et hauteur sont à adapter à votre texte; on peut aussi ne pas indiquer de hauteur pour ces paragraphes et ajuster leur positionnement en fonction du nombre de lignes.

Les paragraphes t4 et t5 sont identiques, à part le positionnement qui les fait sortir à droite et revenir dans le cadre au survol.

Les différentes valeurs sont purement indicatives et vous pouvez les modifier selon votre largeur d'article.

J'ai repris cette page pour revenir sur le positionnement des paragraphes: pour moins s'embêter, on les place par ligne de 2, côte à côte; dans la ligne suivante, on en place 2 autres, à la distance voulue.

Un rappel: lorsqu'on écrit deux lignes de texte, elles se placent, par défaut, l'une sous l'autre; si on veut qu'elles soient côte à côte, il faut ajouter, sur chacune, l'attribut : float:left; pour nos écritures de gauche à droite; float-right existe aussi !

Cependant, si on ajoute un troisième paragraphe et que l'on veuille qu'il soit côte à côte également, on lui ajoute flaot:left; MAIS, si on veut que ce 3 ème paragraphe se place dessous les 2 précédents, il faut lui dire de ne pas tenir compte de leur réglage et lui dire; clear:left; ce qui fait qu'il reprendra son réglage par défaut et se placera dessous.

Ensuite, si on veut ajouter un 4 ème paragraphe, à côté du 3 ème, il faut aussi dire à ces deux là de se placer côte à côte, par float:left; sur les 2 ! etc, etc... !