In deze laatste screencast van het opbouwen van de voettekst, werken we aan de onderste voettekst waar de CodePen en ShopTalk gebieden zijn.
We moeten de HTML een beetje veranderen omdat we tot het besef komen dat de vier delen langs de onderkant (logo, tekst, logo, tekst) zinvol zouden zijn als een reeks inline blokelementen die op elkaar gecentreerd zijn ( vertical-align: middle;).
We komen het probleem tegen waarbij er extra ruimte is tussen inline-blokelementen, dus gebruiken we de font-size: 0; truc uit dit artikel.
We krijgen de lay-out uiteindelijk aan het werk, maar je ziet me niet echt in de echte afbeeldingen vallen. Net als bij de Photostar maak ik een nieuw Photoshop-bestand alleen voor deze footer-logo's. Dit maakt het alleen gemakkelijker om ermee om te gaan en toekomstige updates van deze logo's gemakkelijker. Ik maak ze ook 2x zo groot en verklein ze zodat ze er goed uitzien op Retina-displays. Ik zet ze neer in de tijdelijke afbeeldingstags die we hebben en het werkt geweldig.
Bestanden
- 74-voettekst Logos.psd.zip