Voidakseni saada kuvan näkymään vasemmalla puolella, saada tekstin oikealle puolelle ja saada kaikki kauniisti perusteltua ja pystysuoraan kohdistettua, minun täytyi jäsentää kaikki HTML-taulukon sisällä. Taulukkoasettelu on hieman hämmentävä työstää, koska siinä on itse asiassa taulukko, joka on sisäkkäin taulukon sisällä halutun tasauksen aikaansaamiseksi. HTML-taulukon luuranko näyttää seuraavalta (varautukaa):
Headshot Image
Kuvaelementti on sijoitettu taulukkosoluelementin <td> sisälle ja se on keskitetty taulukossa pystysuoraan käyttäen valign="middle" taulukkosoluelementin attribuuttia ja arvoa valign="middle". Olen myös lisännyt vertical-align: middle-attribuutin ja arvon itse kuvaelementtiin varmuuden vuoksi.
Kuvan lähde on omassa henkilökohtaisessa Google Drivessäni, jossa kuvassa on jakamisasetukset, joiden avulla kuka tahansa voi tarkastella kuvaa. Huomautuksena mainittakoon, että jouduin muuttamaan Googlen tarjoamaa jakolinkkiä siten, että GET-pyynnön alussa URL-osoitteessa on uc?id=. Tämä mahdollistaa suoran latauksen Google Drivesta ja varmistaa, että kuva näkyy oikein sähköpostin allekirjoituksessa.
Pyöristetyn kuvatehosteen aikaansaamiseksi olen lisännyt border-radius: 100% CSS:ksi kuvaelementtiin.
Sosiaalisen median kuvakkeet ja linkit
Alkirjoituksessa käytetyt sosiaalisen median kuvakkeet koostuvat kaikki kuvaelementistä, joka on kiedottu ankkurielementtiin, joka sisältää linkin sopivalle sosiaalisen median sivulle. Sekä leveys että korkeus on määritelty kuvaelementtien attribuutteina (25 pikseliä on IMO hyvä leveys/korkeus). Source-attribuutti sisältää linkin omassa Google Drivessäni olevaan kuvaketiedostoon, aivan kuten henkilökuvakin. Muista sisällyttää uc?id= lähde-URL-osoitteeseen, kun linkität Google Drivessa olevaan kuvaan.
Sosiaaliset kuvakkeet ovat kaikki rakenteeltaan listakohteita järjestämättömän listan sisällä esteettömyyden helpottamiseksi (kiitos Scott Vinklelle tästä ehdotuksesta). ul:ään sovellettu CSS poistaa bullet pointit ja ylimääräisen tilan koko järjestämättömän luettelon ympäriltä. Luetteloelementissä oleva display: inline-block mahdollistaa kunkin kuvakkeen näyttämisen vierekkäin.