Um das Bild auf der linken Seite erscheinen zu lassen, den Text auf der rechten Seite, und alles schön im Blocksatz und vertikal ausgerichtet zu haben, musste ich alles innerhalb einer HTML-Tabelle strukturieren. Das Tabellenlayout ist etwas verwirrend, da eine Tabelle in einer Tabelle verschachtelt ist, um die gewünschte Ausrichtung zu erreichen. Das Skelett der HTML-Tabelle sieht folgendermaßen aus (Achtung!):
Headshot Image
Das Bildelement ist innerhalb eines Tabellenzellenelements <td> verschachtelt und es ist vertikal in der Tabelle zentriert, wobei valign="middle" für das Attribut und den Wert des Tabellenzellenelements verwendet wird. Ich habe auch das vertical-align: middle-Attribut und den Wert auf dem Bild-Element selbst für gute Maßnahme hinzugefügt.
Die Quelle für das Bild ist in meinem eigenen persönlichen Google Drive enthalten, wo das Bild Freigabeeinstellungen hat, die jedem erlauben, das Bild zu sehen. Übrigens musste ich den von Google bereitgestellten Freigabelink so ändern, dass er uc?id= am Anfang der GET-Anforderung in der URL enthält. Dies ermöglicht einen direkten Download von Google Drive und stellt sicher, dass das Bild korrekt in der E-Mail-Signatur angezeigt wird.
Um den abgerundeten Bildeffekt zu erzielen, habe ich border-radius: 100% als CSS für das Bildelement hinzugefügt.
Soziale Icons und Links
Die in der Signatur verwendeten Social Media Icons bestehen alle aus einem Bildelement, das mit einem Ankerelement umhüllt ist, das den Link zur entsprechenden Social Media Seite enthält. Breite und Höhe sind beides Attribute, die auf den Bildelementen angegeben sind (25 Pixel ist eine gute Breite/Höhe, um IMO zu verwenden). Das Quellattribut enthält einen Link zu einer Symboldatei auf meinem eigenen Google Drive, genau wie das Headshot-Bild. Denken Sie daran, uc?id= in Ihre Quell-URL einzuschließen, wenn Sie auf ein Bild auf Google Drive verlinken.
Die sozialen Symbole sind alle als Listenelemente innerhalb einer ungeordneten Liste strukturiert, um die Zugänglichkeit zu erleichtern (danke Scott Vinkle für diesen Vorschlag). Das auf ul angewendete CSS entfernt Aufzählungspunkte und den zusätzlichen Raum, der die gesamte ungeordnete Liste umgibt. Das display: inline-block auf dem Listenelement ermöglicht es, dass jedes Symbol nebeneinander angezeigt wird.