Pentru ca imaginea să apară în partea stângă, textul în partea dreaptă și pentru ca totul să fie frumos justificat și aliniat vertical, a trebuit să structurez totul în interiorul unui tabel HTML. Aranjamentul tabelului este un pic confuz pentru a lucra cu el, deoarece există de fapt un tabel imbricate într-un tabel pentru a obține alinierea dorită. Iată cum arată scheletul tabelului HTML (țineți-vă bine):
Imaginea capului
.
Elementul imagine este aninat în interiorul unui element table cell <td> și este centrat pe verticală în tabel folosind valign="middle" pentru atributul și valoarea elementului table cell. Am adăugat, de asemenea, atributul vertical-align: middle și valoarea vertical-align: middle pe elementul imagine în sine, pentru o măsură bună.
Sursa imaginii este conținută în Google Drive-ul meu personal, unde imaginea are setări de partajare care permit oricui să o vizualizeze. Ca o notă, a trebuit să schimb linkul de partajare furnizat de Google pentru a include uc?id= la începutul solicitării GET în URL. Acest lucru permite o descărcare directă din Google Drive și se asigură că imaginea apare corect în semnătura de e-mail.
Pentru a obține efectul de imagine rotunjită, am adăugat border-radius: 100% ca CSS pe elementul de imagine.
Icoane și legături sociale
Icoanele social media folosite în semnătură sunt toate alcătuite dintr-un element imagine înfășurat cu un element ancoră care conține legătura către pagina social media corespunzătoare. Lățimea și înălțimea sunt ambele atribute specificate pe elementele de imagine (25 de pixeli este o lățime/înălțime bună de utilizat, conform IMO). Atributul sursă conține un link către un fișier de pictograme de pe propriul meu Google Drive, la fel ca și imaginea din fotografie. Nu uitați să includeți uc?id= în URL-ul sursă atunci când creați un link către o imagine de pe Google Drive.
Icoanele sociale sunt toate structurate ca elemente de listă în interiorul unei liste neordonate pentru a ajuta la accesibilitate (mulțumesc Scott Vinkle pentru această sugestie). CSS-ul aplicat pe ul elimină punctele de tip bullet și spațiul suplimentar din jurul întregii liste neordonate. display: inline-block de pe elementul listă permite ca fiecare pictogramă să fie afișată una lângă alta.