Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Inserting affiliates on the right hand side

Featured Replies

Hi all

 

just trying to add an affiliates advertisment bar on the right hand side of my page but every time i do it sits underneath my maincontent div. Any ideas?

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#header {
height: auto;
width: auto;
padding: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#navbar {
width: 880px;
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #090;
text-align: center;
}#maincontent {
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #FFF;
text-align: center;
color: #666;
padding: 1px;
width: 880px;
}
#footer {
height: 20px;
width: 880px;
text-align: center;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
font-weight: bold;
}
body {
background-color: #666;
}
</style>
</head>

<body>

<div id="header"><img src="../../Documents/Unnamed Site 2/greg's garden logo - Copy.png" width="880" height="199" /></div>

<div id="navbar">Home | Services | Gallery | About Us | Contact Us</div>
<div id="maincontent">
 <p> </p>
 <p><img src="../../Documents/Unnamed Site 2/Rory3.jpg" width="400" height="267" /></p>
 <p> </p>
 <p>Here at Greg's Gardening we cater for all sizes of landscape from small backyards to larger than life allotments.  </p>
 <p>For a quote please click on the contact us page. </p>

</div>
<div id="footer">Adam Ramsey Design©</div>






</body>
</html>

 

Here is the code for the Affiliate -

 <a href='http://scripts.affiliatefuture.com/AFClick.asp?affiliateID=273552&merchantID=5683&programmeID=15274&mediaID=124928&tracking=&url='><img border=0 src='http://banners.affiliatefuture.com/5683/124928.jpg'></a>

 

Thankyou

  • Author

Holy **** I dont remember putting in all those border width's and styles :S?

So let me guess, you are using Dreamweaver.

 

First thing for your own security, use tinyurl to change your affiliate url so that people viewing your code can not steal your ID.

 

Next you should/could make a <div> that wraps around the affiliate banner and position that with css inside your main content.

 

At the moment you dont have any css atributes to place your affiliate banner.

 

Hope that helps a bit.

 

P.H.

<div id="maincontent">

 

<div class="affiliate-banner-01"></div>

 

<p> </p>

<p><img src="../../Documents/Unnamed Site 2/Rory3.jpg" width="400" height="267" /></p>

<p> </p>

<p>Here at Greg's Gardening we cater for all sizes of landscape from small backyards to larger than life allotments. </p>

<p>For a quote please click on the contact us page. </p>

 

 

</div>

 

 

-----CSS-------

 

.affiliate-banner-01 {

width: 200px;

height: 300px;

float: right;

margin-top: 0px;

margin-right: 10px;

}

Edited by seedism

  • Author

Thanks for getting back to me on this Seedism.

 

I have done as you suggested and placed the affiliate above my main content and right bang in the middle. have checked to see if it is set to float to the right.

Edited by adamramsey91

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.