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.

Notations 

Autres tutoriels Flash, Web

Ecoles & formations - derniers articles
3IS : Une pédagogie sur projets
Par la rédaction le 20/08/2012
3IS, l’école des métiers du Cinéma et de l’Audiovisuel, a ouvert une filière Arts Numériques en 2011, avec l’idée de former des élèves afin qu’ils soient « multi-compétences », capables de répondre à tous les enjeux du monde professionnel.

[Lire le dossier...]

Aries : Une école en pleine mutation
Par la rédaction le 20/08/2012
Présent dans six villes en France, le groupe d’écoles Ariès présente plusieurs avantages : multiples filières (2D, 3D), qualité d’enseignement et une réelle volonté de proposer des formations qualifiantes pour les années à venir.

[Lire le dossier...]

Bellecour - ESIA 3D : Une fourmilière de talents pour l’industrie créative
Par Emilien Ercolani le 04/01/2012
Connue et reconnue, l’école Bellecour, située, comme son nom l’indique, à Lyon, ne se repose pas sur ses lauriers, et continue de proposer des formations au goût du jour à ses élèves, notamment dans la section ESIA 3D. Revue et actualité de l’école du Rhône. 

[Lire le dossier...]

COM'ART : Tentez une nouvelle expérience !
Par Emilien Ercolani le 19/10/2011
Voici une nouvelle école située à Paris. Baptisée Com'Art, elle propose une mise à niveau après le Bac (MANAA) puis des BTS et des formations, de la communication visuelle au design produit en passant par la décoration d'intérieur et l'animation 3D.

[Lire le dossier...]

 Livres et DVD CréaNum

Get Aggregated RSS