# 074: CSS del piè di pagina, parte 4 - Trucchi CSS

Anonim

In questo screencast finale di costruzione del piè di pagina, lavoriamo sul piè di pagina in basso dove si trovano le aree CodePen e ShopTalk.

Dobbiamo cambiare un po 'l'HTML perché ci siamo resi conto che i quattro blocchi lungo il fondo (logo, testo, logo, testo) avrebbero senso come una serie di elementi di blocco in linea centrati l'uno sull'altro ( vertical-align: middle;).

Ci imbattiamo nel problema in cui c'è spazio extra tra gli elementi inline-block, quindi usiamo la dimensione del carattere: 0; trucco da questo articolo.

Alla fine il layout funziona, ma in realtà non mi vedi cadere nelle immagini reali. Come abbiamo fatto con Photostar, creo un nuovo file Photoshop solo per questi loghi a piè di pagina. Ciò semplifica la gestione e gli aggiornamenti futuri di questi loghi. Li faccio anche di dimensioni 2x e li ridimensiono in modo che abbiano un bell'aspetto sui display Retina. Li inserisco nei tag immagine segnaposto che abbiamo e funziona alla grande.

File

  • 74-Footer Logos.psd.zip