Dans ce dernier screencast de la création du pied de page, nous travaillons sur le pied de page inférieur où se trouvent les zones CodePen et ShopTalk.
Nous devons changer un peu le HTML lorsque nous nous rendons compte que les quatre morceaux en bas (logo, texte, logo, texte) auraient du sens pour être une série d'éléments de bloc en ligne centrés les uns sur les autres ( vertical-align: middle;).
Nous rencontrons le problème où il y a un espace supplémentaire entre les éléments de bloc en ligne, nous utilisons donc la taille de police: 0; astuce de cet article.
Nous faisons fonctionner la mise en page à la fin, mais vous ne me voyez pas réellement tomber dans les images réelles. Comme nous l'avons fait avec la Photostar, je crée un nouveau fichier Photoshop juste pour ces logos de pied de page. Cela facilite simplement la gestion et les futures mises à jour de ces logos. Je les fais également 2x et les redimensionne pour qu'ils aient l'air bien sur les écrans Retina. Je les dépose dans les balises d'image d'espace réservé que nous avons et cela fonctionne très bien.
Des dossiers
- Logos.psd.zip de 74 pieds de page