Hey, On my proxy site I'm trying to add some more adsense advertisements and If I try to add anymore outside of a certain area they just get cut off. If you look at my site, http://shadowaccess.com, I want to add some ads on the left or right side of the page. I'm very bad with CSS so pardon my terminology, but when I view the design in dreamweaver there are borders or padding maybe its called, and I can't put any text or images outside of that area. So anyways, here is the code. Any help would be much appreciated! <!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=iso-8859-1" /> <title>ShadowAccess</title> <meta name="keywords" content="unblock, open, facebook, myspace, freely, browse, free, orkut, hi5, site, school, work, library, blocked, anonymous, filter, youtube"> <meta name="description" content="Unblock Myspace, Facebook, Youtube, and More!"> <style type="text/css"> <!-- .style2 {font-family: Geneva, Arial, Helvetica, sans-serif} .style3 { font-size: 24px; font-family: Geneva, Arial, Helvetica, sans-serif; } --> </style> </head> <style type="text/css"> body{ background-color:#0d0d0d; margin:0 auto; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; } #header{ background-image:url(images/bg.jpg); height:108px; text-align:center; } #content{ width:600px; margin:0 auto; text-align:center; } p{ margin:o; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:left; padding-left:30px; padding-right:30px; padding-top:10px; padding-bottom:10px; text-indent:30px; } #wrap{ background-image:url(images/browser.jpg); width:490px; height:81px; padding-top:40px; } #proxy_url{ background-image:url(images/url.jpg); width:288px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; font-weight:bold; padding:21px; float:left; border:0; margin-left:13px; } #proxybutton{ float:left; } #proxy_options{ text-align:left; margin-left:70px; } </style> <body> <div id="header"><img src="images/banner.jpg" alt="banner" /></div> <div id="content"> <p align="center"><br /> <span class="style2"><span class="style3">Unblock Myspace, Youtube, Facebook, and More!</span></span><br /> <p align="center">To start browsing simply type the url you wish to browse in the box below and then click browse. You may select a different option depending on the website you are going to be viewing. <script type="text/javascript"><!-- google_ad_client = "***********"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text"; //2007-08-24: ShadowAccess google_ad_channel = "*********"; google_color_border = "0d0d0d"; google_color_bg = "0d0d0d"; google_color_link = "3f669e"; google_color_text = "FFFFFF"; google_color_url = "FFFFFF"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <form method="post" action="./"> <form method="post" action="./"> <!-- Make sure you leave the two input fields the same! --> <div id="wrap"> <input type="hidden" name="__proxy_action" value="redirect_browse" /> <input type="text" name="__proxy_url" value="http://www.google.com/" id="proxy_url" /> <input type="image" src="images/browse.jpg" value="Browse" id="proxy_button" /> </div> </form> <br /> <br /> <div id="proxy_options"> <!-- Don't rename the name="_no_xxx" of these input fields! --> <label for="__no_javascript"> <input type="checkbox" name="__no_javascript" id="__no_javascript" /> Disable JavaScript </label> <label for="__no_images"> <input type="checkbox" name="__no_images" id="__no_images" /> Disable Images </label> <label for="__no_title"> <input type="checkbox" name="__no_title" id="__no_title" /> Strip Title </label> <label for="__no_meta"> <input type="checkbox" name="__no_meta" id="__no_meta" /> Strip Meta </label> <br /> <br /> <script type="text/javascript"><!-- google_ad_client = "**********"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text"; //2007-08-24: ShadowAccess google_ad_channel = "*******"; google_color_border = "0d0d0d"; google_color_bg = "0d0d0d"; google_color_link = "3f669e"; google_color_text = "FFFFFF"; google_color_url = "FFFFFF"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <?PHP ?> <br /> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "*******"; urchinTracker(); </script> </body> </html> PHP:
Well you need to make room for it obviously. So here's something i whipped up in a minute to give you an idea of what it should look like. Add this Find <div id="content"> Code (markup): and add this below it: <div id="rightbox">CONTENT HERE</div> Code (markup): In your CSS, add this: #rightbox { float:right; width:130px; height:300px; background-color:#0000CC; } Code (markup): And make the following change: #content{ [B]width:730px;[/B] margin:0 auto; text-align:center; } Code (markup): The reason I changed the width from 600 to 730 is to accomidate the space for the ad, you can change this easily, just make sure you add the width of the ad to the width of the content area. 600 + x = width whereas: x = width of your ad. In addition to this, you can change the rightbox code to float:left; to allow the ad to appear on the left. And if you want to add additional padding/margins to space it out, make sure to add those margins into the width of the content area, so: 600 + x + y = width where as: x = width / y = addtional padding/margins play around with it and see what you get in terms of results. Trial and Error!
OK, so when I try to put ads on the left, they partially cover up the search bar. So if I wanted to make them go farther to the left would I adjust the margin? When I try to increase the content area, it positions everything to the left and for some reason I can't center the images like the search bar. Is there anyway I can just use html outside of the css code just for the ads? So that I can move the ads around but not worry about everything else moving.