Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 18, 2016 at 12:22 pm #600243
    The Shadow

    Hi,

    i am trying to add the TeamViewer Button to my Homepage. Sadly the predefined code provided by Teamviewer doesnt work. I changed it a little, so that the text in the span tag should be shown in the top left corner. Without the Change to position top 0 and left 0 the text wouldnt show anyway, because it’d be out of the range of the div box.

    I added that code to a widget text box in the 4th footer column.

    <!-- TeamViewer Logo (generated at http://www.teamviewer.com) -->
<div style="position:relative; width:225px;">
  <a href="http://www.teamviewer.com/link/?url=505374&id=327102171" style="text-decoration:none;">
    <img src="http://www.teamviewer.com/link/?url=945136&id=327102171" alt="TeamViewer" title="TeamViewer" border="0" width="225" height="auto" />
    <span style="position:absolute; top:0px; left:0px; display:block; cursor:pointer; line-height:1.2em;">
      Fernwartung starten
    </span>
  </a>
</div>

    On my mobile it is displayed correctly. The text shows up in the top left corner of the teamviewer image. But on the Desktop Version the text “Fernwartung starten” is displayed in the bottom left corner. Can you tell me why?

    Thank you.

    • This topic was modified 8 years, 1 month ago by The Shadow.
    March 19, 2016 at 1:05 pm #600673
    Günter

    Hi L0g333!

    Thank you for using our theme.

    You can change 

    
top: -42px;

    to move the span.

    On FF it works also for a small screen.

    Regards,
    Günter

    March 19, 2016 at 1:28 pm #600680
    The Shadow

    Thank you for your answer.

    I already tried doing it that way, but the problem is, if i do so, on my mobile (Galaxy S5) it would move the text out of the range of the div box, because on the desktop design (or the desktop browser) the anchor of the position absolute is in the bottom left corner of the div box. On my mobile it is on the top left corner, which would be the normal behavior, isn’t it?

    • This reply was modified 8 years, 1 month ago by The Shadow.
    March 22, 2016 at 1:13 pm #601845
    Günter

    Hey!

    Thank you for coming back.

    I would say, that the mobile anchor is not consistent, because in the HTML you have the image first filling out the complete width and then the <span> tag to follow below – probably because mobiles handle a-tags different.

    Try the following (works in FF and Chrome):

    Replace 

    
<div style="position:relative; width:225px;">

    with

    
<div style="position:relative; width:225px; display: inline-flex;">

    Regards,
    Günter

    April 28, 2016 at 11:39 pm #624049
    The Shadow

    thank you for your responses.

    In the End I added the text to the image. That was the only way, i got it to work correctly in every case.

    April 29, 2016 at 8:34 am #624148
    Basilis

    Hi,

    Happy it is solved now, please do let us know if we can do anything else for you.

    Best regards,
    Basilis

    April 29, 2016 at 11:21 am #624255
    The Shadow

    Yes indeed you could do something else :D

    I have another Problem, which isnt fixed yet: https://kriesi.at/support/topic/partnerlogo-element-strange-arrangement-how-control-arrangement-and-margin/

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘position absolute doesnt correctly position on desktop design’ is closed to new replies.