Your character card

<img src='http://imagizer.imageshack.us/a/img540/8572/n3udAn.png'/>
<div class='soki'><a class='sok' href='###'>Link 1</a>
<a class='sok' href='###'>Link 2</a>
<a class='sok' href='###'>Link 3</a>
<a class='sok' href='###'>Link 4</a></div>
<div class='soktekst'>Donec pharetra purus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus fringilla mauris eleifend ante ullamcorper laoreet.
Integer at lacinia mi. Duis commodo elit sit amet odio vulputate luctus vel ut magna. Quisque id orci arcu. </div>

/* Od góry - obrazek, menu ( div - soki ) i tekst ( div soktekst )*/


I znowu kod CSS
a.sok:link, a.sok:visited {display:inline-block; background:#333; color: #c69fad; width:94px; margin-bottom:1px; font-family:arial; font-size:10px;font-family:calibri;text-transform:uppercase;; text-align:center;; letter-spacing:1px; margin-right:-2px;cursor:pointer; padding:1px;padding-top:2px;padding-bottom:2px;  -webkit-transition-duration: 0.6s;-moz-transition-duration:1s;opacity:0.9;}

#HTML1 img {border:1px solid #222;padding:16px;max-width:85.5%;} /* Nie wiem czy u Ciebie to też będzie HTML1. Jak coś to zmień :) */

.soki {z-index:99999;top:30px;padding:20px;position:absolute;} /* top:0px będzie oznaczać, że menu będzie na samej górze gadżetu, więc najlepiej je trochę "opuścić". Spróbuj nie ustawiać szerokości, natomiast skup się na paddingu i szerokości linków (wyżej) */

.soktekst {font-size: 10px;text-align: justify;font-family:calibri;padding:5px;background: rgba(199,150,142, 0.8);
border: 1px dotted #A05C62; } /* Ustaw go tak jak Twój gadżet Text1, ale bez zbędnego ustawiania pozycji */