Hogy a kép a bal oldalon jelenjen meg, a szöveg a jobb oldalon legyen, és minden szépen igazított és függőlegesen igazított legyen, mindent egy HTML táblázaton belül kellett strukturálnom. A táblázatos elrendezéssel kissé zavaros dolgozni, mivel a kívánt igazítás eléréséhez valójában egy táblázat van egy táblázatba ágyazva. Íme, így néz ki a HTML-táblázat váza (kapaszkodjon meg):
Főcímkép
A képelem egy <td> táblázatcella elembe van beágyazva, és függőlegesen középre van helyezve a táblázatban, a táblázatcella elem attribútumának és értékének valign="middle" használatával. Magához a képelemhez is hozzáadtam a vertical-align: middle attribútumot és értéket.
A kép forrása a saját személyes Google Drive-omban található, ahol a kép megosztási beállításai lehetővé teszik, hogy bárki megtekinthesse a képet. Megjegyzendő, hogy a Google által megadott megosztási linket úgy kellett módosítanom, hogy a GET-kérés elején az URL-ben uc?id= szerepeljen. Ez lehetővé teszi a közvetlen letöltést a Google Drive-ról, és biztosítja, hogy a kép helyesen jelenjen meg az e-mail aláírásában.
A lekerekített képhatás elérése érdekében border-radius: 100% CSS-t adtam hozzá a képelemhez.
Társadalmi ikonok és linkek
Az aláírásban használt közösségi média ikonok mind egy képelemből állnak, amelyet egy anchor elemmel csomagolunk, amely a megfelelő közösségi médiaoldalra mutató linket tartalmazza. A szélesség és a magasság a képelemek megadott attribútumai (25 pixel a megfelelő szélesség/magasság IMO). A forrás attribútum a saját Google Drive-omon található ikonfájlra mutató linket tartalmaz, akárcsak a fejkép. Ne feledje, hogy a Google Drive-on található képre való hivatkozáskor a forrás URL-címében uc?id= szerepeljen.
A közösségi ikonok mindegyike egy rendezetlen listán belüli listaelemként van felépítve, hogy segítse a hozzáférhetőséget (köszönet Scott Vinkle-nek ezért a javaslatért). A ul-re alkalmazott CSS eltávolítja a felsoroláspontokat és az egész rendezetlen listát körülvevő extra helyet. A listaelemen lévő display: inline-block lehetővé teszi, hogy az egyes ikonok egymás mellett jelenjenek meg.