Div Tag Help

Discussion in 'Coding Help' started by Trendline Media, Jun 10, 2011.

Tags:
  1. Trendline Media

    Trendline Media New Member

    Iam trying to display to links side by side as apposed to being on top of eachother and have played around with different tags to the best of my knowledge and cannot make it work.. i'l hand to over to you guys,

    thanks

    <!-- TeamViewer Logo (generated at TeamViewer - Free Remote Access and Remote Desktop Sharing over the Internet) -->
    <div style="position: relative; width: 120px; height: 60px;"><a href="http://www.teamviewer.com/link/?url=842558&amp;id=557458738" style="text-decoration:none;"> <img src="http://www.teamviewer.com/link/?url=742306&amp;id=557458738" border="0" alt="Download TeamViewer Full version" title="Download TeamViewer Full version" width="120" height="60" /> <span style="position: absolute; top: 17px; left: 45px; display: block; cursor: pointer; color: white; font-family: Arial; font-size: 11px; line-height: 1.2em; font-weight: bold; text-align: center; width: 70px;"> Download TeamViewer Presentation </span> </a></div>
    <!-- TeamViewer Logo (generated at TeamViewer - Free Remote Access and Remote Desktop Sharing over the Internet) -->
    <div style="position: relative; width: 120px; height: 60px;">
    <p><a href="http://www.teamviewer.com/link/?url=505374&amp;id=1444876377" style="text-decoration:none;"> <img src="http://www.teamviewer.com/link/?url=426717&amp;id=1444876377" border="0" alt="Download TeamViewer QuickSupport" title="Download TeamViewer QuickSupport" width="120" height="60" /> <span style="position: absolute; top: 25px; left: 50px; display: block; cursor: pointer; color: #424242; font-family: Arial; font-size: 10px; line-height: 1.2em; font-weight: bold; text-align: center; width: 73px; height: 39px;"> Download TeamViewer QuickSupport<br /></span></a></p>
    <p><span style="position: absolute; top: 25px; left: 50px; display: block; cursor: pointer; color: #424242; font-family: Arial; font-size: 10px; line-height: 1.2em; font-weight: bold; text-align: center; width: 73px; height: 39px;">Download TeamViewer QuickSupport </span></p>
    <p><span style="position: absolute; top: 25px; left: 50px; display: block; cursor: pointer; color: #424242; font-family: Arial; font-size: 10px; line-height: 1.2em; font-weight: bold; text-align: center; width: 96px; height: 42px;"><br /></span></p>
    </div>
     
  2. tiyerl

    tiyerl New Member

    Here you go, this works in all IE 9 - 7 and firefox, also i think you repeated this line "Download TeamViewer QuickSupport" twice, maybe you meant to do that? I deleted the repeated lines below.

    Code:
    <!-- TeamViewer Logo (generated at TeamViewer - Free Remote Access and Remote Desktop Sharing over the Internet) -->
    <div style="position: relative; width: 120px; height: 60px; float: left; display:inline;"><a href="http://www.teamviewer.com/link/?url=842558&amp;id=557458738" style="text-decoration:none;"> <img src="http://www.teamviewer.com/link/?url=742306&amp;id=557458738" border="0" alt="Download TeamViewer Full version" title="Download TeamViewer Full version" width="120" height="60" /> <span style="position: absolute; top: 17px; left: 45px; display: block; cursor: pointer; color: white; font-family: Arial; font-size: 11px; line-height: 1.2em; font-weight: bold; text-align: center; width: 70px;"> Download TeamViewer Presentation </span> </a></div>
    <!-- TeamViewer Logo (generated at TeamViewer - Free Remote Access and Remote Desktop Sharing over the Internet) -->
    <div style="position: relative; width: 120px; height: 60px; float: left; display:inline; margin-left: 10px;">
    <p style="margin: 0; padding: 0; vertical-align: top;"><a href="http://www.teamviewer.com/link/?url=505374&amp;id=1444876377" style="text-decoration:none;"><img src="http://www.teamviewer.com/link/?url=426717&amp;id=1444876377" border="0" alt="Download TeamViewer QuickSupport" title="Download TeamViewer QuickSupport" width="120" height="60" /> <span style="position: absolute; top: 17px; left: 47px; display: block; cursor: pointer; color: #424242; font-family: Arial; font-size: 10px; line-height: 1.2em; font-weight: bold; text-align: center; width: 73px; height: 39px;"> Download TeamViewer QuickSupport<br /></span></a></p>
    If your wondering what tags were added, we added the following to the two divs:

    float : left; (needed for IE)
    display: inline;

    And we added margin: 0; and padding: 0; to the <p>. We also modified the Top and Left to fit the text better on the second image.

    Good luck
     

Share This Page