In diesem letzten Screencast zum Aufbau der Fußzeile arbeiten wir an der unteren Fußzeile, in der sich die Bereiche CodePen und ShopTalk befinden.
Wir müssen den HTML-Code ein wenig ändern, um zu erkennen, dass die vier Abschnitte am unteren Rand (Logo, Text, Logo, Text) sinnvoll sind, um eine Reihe von Inline-Blockelementen zu bilden, die aufeinander zentriert sind ( vertical-align: middle;).
Wir stoßen auf das Problem, dass zwischen Inline-Block-Elementen zusätzlicher Platz ist, sodass wir die Schriftgröße verwenden: 0; Trick aus diesem Artikel.
Am Ende funktioniert das Layout, aber Sie sehen mich nicht in den realen Bildern. Wie beim Photostar erstelle ich eine neue Photoshop-Datei nur für diese Fußzeilenlogos. Dies erleichtert lediglich den Umgang mit und zukünftige Aktualisierungen dieser Logos. Ich mache sie auch 2x groß und verkleinere sie, damit sie auf Retina-Displays gut aussehen. Ich lege sie in die Platzhalter-Bild-Tags, die wir haben, und es funktioniert großartig.
Dateien
- 74-Fußzeile Logos.psd.zip