5. CREATION DU BLOC CONTENU
Ce bloc est celui qui contiendra les images de votre portfolio. Nous allons le paramétrer ainsi :

On retrouve notre petit signe «#» qui indique la création d’une id. Je donne à ce bloc une largeur de 5400 pixels. Cela est dû au fait que j’ai 9 images à mettre dans ma div, que chaque image mesure 600 pixels de large, ce qui nous donne une largeur de 5400 pixel. On retrouve une hauteur égale à celle du panneau info. Notez que vos images elles aussi doivent avoir une hauteur maximum de 400 pixels.
La margin-top nous permet de déplacer verticalement le bloc pour l’aligner avec le panneau info. Margin-left quant à elle nous permet de décaler le bloc vers la droite afin que le contenu ne soit pas recouvert avant que l’utilisateur scrolle. Un padding à 0 élimine toute marge intérieure.
Nous fixons cette fois-ci la position de la div en absolute afin qu’elle puisse se déplacer lors d’un scroll et avoir un z-index. Si la position n’est pas précisée dans une id, alors le bloc ne pourra pas avoir de z-index.
On termine avec un z-index inférieur à celui du bloc info de façon à ce que la div soit en-dessous de la div info.
6. PROPRIETES RELATIVES AUX IMAGES
De façon à supprimer toutes les marges des images et pour les aligner à gauche, nous allons paramétrer la balise HTML «img» comme ceci :

7. LE HTML
Placez-vous à présent sur votre page HTML et passez la vue en mode code si elle ne l’est pas déjà. Entre les balises <body> et </body>, sautez quelques lignes créez la div des informations en plaçant dans celle-ci votre image comme ceci :

Pour finir, vous devez mettre en place la div «contenu» et ajoutez chacune de vos images à l’intérieur de celle-ci. Pour ma part, comme précisé un peu plus haut, j’en ai 9. Voici ce que cela donne :

Vous êtes sûrement pressé de voir le résultat ! Pressez donc la touche F12 ou ouvrez votre fichier HTML dans votre navigateur (clic droit sur le fichier > ouvrir avec > Firefox), quant à moi j’espère que ce didacticiel vous aura utile.