I denne sidste screencast om udbygning af sidefoden arbejder vi på bundfoden, hvor CodePen og ShopTalk-områderne er.
Vi er nødt til at ændre HTML lidt, når vi kommer til erkendelsen af, at de fire klumper langs bunden (logo, tekst, logo, tekst) ville være fornuftige at være en række inline-blokelementer, der er centreret om hinanden ( vertical-align: middle;
).
Vi løber ind i problemet, hvor der er ekstra plads mellem inline-blokelementer, så vi bruger fontstørrelsen: 0; trick fra denne artikel.
Vi får layoutet til at virke i sidste ende, men du ser mig faktisk ikke falde i de rigtige billeder. Som vi gjorde med fotostjernen lavede jeg en ny Photoshop-fil kun til disse sidefodslogoer. Dette gør det nemmere at håndtere og fremtidige opdateringer til disse logoer lettere. Jeg laver dem også 2x i størrelse og skalerer dem ned, så de ser godt ud på Retina-skærme. Jeg taber dem i de pladsholderbilledkoder, vi har, og det fungerer godt.
Filer
- 74-fods Logos.psd.zip