For at få billedet til at blive vist i venstre side, teksten i højre side og få det hele pænt retfærdiggjort og lodret justeret, var jeg nødt til at strukturere det hele i en HTML-tabelle. Tabellayoutet er lidt forvirrende at arbejde med, da der faktisk er en tabel, der er indlejret i en tabel for at opnå den ønskede justering. Her er hvordan skelettet af HTML-tabellen ser ud (hold dig fast):
Hovedbillede
Billedelementet er indlejret inde i et tabelcelleelement <td>, og det er vertikalt centreret i tabellen ved hjælp af valign="middle" for attributten og værdien af tabelcelleelementet. Jeg har også tilføjet attributten vertical-align: middle og værdien vertical-align: middle på selve billedelementet for en god ordens skyld.
Kilden til billedet er indeholdt i mit eget personlige Google Drive, hvor billedet har delingsindstillinger, der gør det muligt for alle at se billedet. Som en bemærkning var jeg nødt til at ændre det delingslink, der blev leveret af Google, til at inkludere uc?id= i begyndelsen af GET-anmodningen i URL’en. Dette giver mulighed for en direkte download fra Google Drive og sikrer, at billedet vises korrekt i e-mail-signaturen.
For at opnå den afrundede billedeffekt har jeg tilføjet border-radius: 100% som CSS på billedelementet.
Sociale ikoner og links
De sociale medieikoner, der anvendes i signaturen, består alle af et billedelement, der er omviklet med et ankerelement, der indeholder linket til den relevante side for det sociale medie. Bredden og højden er begge specificerede attributter på billedelementerne (25 pixels er en god bredde/højde at bruge IMO). Source-attributten indeholder et link til en ikonfil på mit eget Google Drive, ligesom headshot-billedet. Husk at inkludere uc?id= i din kilde-URL, når du linker til et billede på Google Drive.
De sociale ikoner er alle struktureret som listeelementer inden for en uordnet liste for at hjælpe med tilgængelighed (tak til Scott Vinkle for dette forslag). CSS’en, der er anvendt på ul, fjerner punktopstillinger og ekstra plads omkring hele den uordnede liste. display: inline-block på listeelementet gør det muligt at vise hvert enkelt ikon side om side.