Div Tag Help

Status
Not open for further replies.

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>
 

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
 
Status
Not open for further replies.
Top