Aby se obrázek zobrazil na levé straně, text na pravé straně a vše bylo pěkně zarovnané a vertikálně zarovnané, musel jsem vše strukturovat uvnitř tabulky HTML. Práce s rozvržením tabulky je trochu matoucí, protože pro dosažení požadovaného zarovnání je vlastně tabulka vnořená do tabulky. Takto vypadá kostra tabulky HTML (připravte se):
Obrázek hlavičky
Prvek obrázku je vnořen uvnitř prvku buňky tabulky <td> a je vertikálně vycentrován v tabulce pomocí valign="middle" pro atribut a hodnotu prvku buňky tabulky. Pro jistotu jsem také přidal atribut a hodnotu vertical-align: middle na samotný prvek obrázku.
Zdroj obrázku je obsažen v mém osobním Disku Google, kde má obrázek nastavení sdílení, které umožňuje komukoli obrázek zobrazit. Jako poznámku uvádím, že jsem musel změnit odkaz pro sdílení poskytovaný společností Google tak, aby na začátku požadavku GET v adrese URL obsahoval uc?id=. To umožňuje přímé stažení z Disku Google a zajišťuje správné zobrazení obrázku v e-mailovém podpisu.
Pro dosažení efektu zaobleného obrázku jsem přidal border-radius: 100% jako CSS na prvek obrázku.
Ikony a odkazy sociálních sítí
Ikony sociálních sítí použité v podpisu jsou všechny tvořeny obrázkovým prvkem obaleným prvkem anchor obsahujícím odkaz na příslušnou stránku sociální sítě. Šířka i výška jsou zadané atributy na obrázkových elementech (25 pixelů je IMO dobrá šířka/výška). Atribut source obsahuje odkaz na soubor s ikonou na mém vlastním Disku Google, stejně jako obrázek headshotu. Při odkazování na obrázek na Disku Google nezapomeňte do zdrojové adresy URL uvést uc?id=.
Všechny ikony sociálních sítí jsou strukturovány jako položky seznamu uvnitř neuspořádaného seznamu, aby se usnadnila přístupnost (za tento návrh děkuji Scottu Vinklemu). CSS aplikované na ul odstraní body s odrážkami a další prostor kolem celého neuspořádaného seznamu. Použití display: inline-block na prvku seznamu umožňuje, aby se jednotlivé ikony zobrazovaly vedle sebe.