W tym ostatnim screencastie budowania stopki pracujemy na dolnej stopce, gdzie znajdują się obszary CodePen i ShopTalk.
Musimy trochę zmienić kod HTML, gdy doszliśmy do wniosku, że cztery fragmenty na dole (logo, tekst, logo, tekst) miałyby sens, gdyby były serią wbudowanych elementów blokowych, które są wyśrodkowane względem siebie ( vertical-align: middle;).
Natrafiamy na problem, w którym jest dodatkowa przestrzeń między elementami inline-block, więc używamy font-size: 0; sztuczka z tego artykułu.
W końcu układ działa, ale tak naprawdę nie widzisz, jak upuszczam rzeczywiste obrazy. Podobnie jak w przypadku Photostar, tworzę nowy plik Photoshopa tylko dla tych logo w stopce. To po prostu ułatwia obsługę i przyszłe aktualizacje tych logo. Robię je również w rozmiarze 2x i zmniejszam, aby dobrze wyglądały na wyświetlaczach Retina. Upuszczam je w zastępczych tagach graficznych, które mamy i działa świetnie.
Akta
- 74-Footer Logos.psd.zip