Om het plaatje links te krijgen, de tekst rechts, en alles mooi uitgelijnd en verticaal uitgelijnd, moest ik alles in een HTML tabel structureren. De tabel layout is een beetje verwarrend om mee te werken omdat er eigenlijk een tabel in een tabel genest is om de gewenste uitlijning te krijgen. Dit is hoe het skelet van de HTML tabel er uit ziet (zet je schrap):
Headshot Image
Het afbeeldingselement is genest in een tabelcelelement <td> en het is verticaal in de tabel gecentreerd met behulp van valign="middle" voor het attribuut en de waarde van het tabelcelelement. Ik heb ook het vertical-align: middle attribuut en waarde aan het image element zelf toegevoegd voor de goede orde.
De bron voor de afbeelding staat op mijn eigen persoonlijke Google Drive waar de afbeelding instellingen voor delen heeft, zodat iedereen de afbeelding kan bekijken. Als opmerking, ik moest de link voor het delen van de afbeelding, die door Google werd verstrekt, wijzigen om uc?id= aan het begin van het GET verzoek in de URL op te nemen. Dit maakt een directe download van Google Drive mogelijk en zorgt ervoor dat de afbeelding correct in de e-mail handtekening verschijnt.
Om het afgeronde afbeelding effect te bereiken, heb ik border-radius: 100% toegevoegd als CSS op het afbeelding element.
Sociale pictogrammen en links
uc?id= in je bron URL te zetten als je linkt naar een afbeelding op Google Drive.
De sociale iconen zijn allemaal gestructureerd als lijst items binnen een ongeordende lijst om de toegankelijkheid te helpen (met dank aan Scott Vinkle voor deze suggestie). De CSS toegepast op de ul verwijdert opsommingstekens en extra ruimte rondom de gehele ongeordende lijst. De display: inline-block op het lijst element maakt het mogelijk om elk icoontje naast elkaar te laten zien.