Printable Version of Topic

Posted by: john.grisum Jan 14 2011, 12:08 AM

I have decided to place Adsense on my site after doing some extensive html and javascript writing. I am totally stumped at this point as I don't know how to effectively add the tiles to the site.

My website is www.freemyblackberry.com . I wish to add two 120X600 advertisement tiles on each side of every page, but do not know how to write the CSS/ Javascript to allow this. Note: It must be set as separate from the html and other content (as per google's rules)

I have attached the CSS stylesheet or you may look at it below. ANY help on where to get started or what I should do is GREATLY appreciated!

And if you are interested in free gsm blackberry unlock codes, then you can go to the website too!








@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #282828 url(images/main_bg.gif) top center no-repeat;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.main1 { margin:0 auto; padding:121012012;}
/********** header **********/
.header_resize {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:490px;}
.header_resize2 {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:200px;}
.header { width:960px; padding:0; margin:0 auto; }
.header h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:25px 0 0 0; margin:0; width:370px; float:left;}
.header p { width:320px; float:right; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:25px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:148px; float:left;}
.logo_text { text-align:right; width:700px; float:right; padding:20px 0 14px 0; margin:0; font: italic 11px Arial, Helvetica, sans-serif; color:#815e67;}
.logo_text a { text-decoration:none; color:#815e67;}
/*menu*/
.menu_resize {width:410px; background:url(images/menu_bg.gif) top no-repeat; float:right;}
.menu { padding:0; margin:0 auto; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:12px 9px; background:none;}
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
/* body */
.body_resize { background: url(images/body_bg.gif) top repeat-y; padding:0; width:963px; margin:0 auto;}
.body_resize_top { background: url(images/body_top_bg.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.body_resize_top_resize { margin:10px auto; padding:0 10px;}
.body_resize_bottom { height:13px; margin:0; padding:0; width:963px; background:url(images/body_bottom_bg.gif) bottom no-repeat;}
.body { padding:20px 0; margin:0 auto; background:#e6e6e6; border-top:1px solid #f5f5f5; border-bottom:1px solid #ececec;}
.body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#000; padding:10px 5px; margin:0;}
.body h3 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#000; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#5e5e5e; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
.body p strong { color:#974960;}
.body p.small { text-transform:uppercase; font: normal 12px Arial, Helvetica, sans-serif; color:#868686; line-height:1.8em; padding:0 0 0 80px; margin:0;}
.body a { color:#141414; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;}
.body img { float:left; margin:5px 15px 5px 5px; padding:0;}
.body img.floated { float:right; margin:5px 20px; padding:0;}
.right { width:325px; margin:10px 8px 10px 0; padding:0 10px; float:right;}
.left {width:560px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.left_blog {width:250px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.port { background: url(images/port_bg.gif) top repeat-y; padding:0; width:259px; margin:10px 10px 10px 20px; float:left;}
.port_top { background: url(images/port_bg_top.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.port_bottom { height:11px; margin:0; padding:0; width:259px; background: url(images/port_bg_bottom.gif) bottom no-repeat;}
/* FBG */
.FBG_resize { background: #dcdcdc; margin:0; padding:0; border-top:1px solid #d0d0d0;}
.FBG { margin:0 auto; padding:20px 0; width:960px;}
.FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG img { float:left; margin:5px 10px 15px 5px; padding:0;}
.FBG .blog { width:290px; float:left; margin:10px 0 10px 15px; padding:5px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#2a2a2a; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#2a2a2a; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:5px 2px; height:16px; background:#f9f9f9; float:right; }
#contactform textarea { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:2px; background:#f9f9f9; float:right; }
#contactform li.buttons input { padding:3px 0 3px 460px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:10px 0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#737373;}
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;}
.footer {padding:0; margin:0 auto; background:#1c1c1c; border-top:1px solid #2a2a2a; }

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider { width:960px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 318px; }
.slider-item { width: 100% !important; height: 318px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:23px;}
#slider_controls ul { margin:0 auto; padding:2px 0; width:54px;}
#slider_controls ul li { margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }


Attached File(s)
 style.css ( 7.1k ) Number of downloads: 323

Posted by: pandy Jan 14 2011, 02:32 AM

What have you tried so far?

Posted by: john.grisum Jan 14 2011, 04:16 PM

I tried adding a right and left margin to the CSS, but It had a nasty effect of extending the "center piece" on the page.

Posted by: john.grisum Jan 15 2011, 01:36 AM

I have attached an image of what Im trying to accomplish.


Attached thumbnail(s)

Posted by: pandy Jan 15 2011, 04:31 AM

More margins won't help. You rather need to create two more columns.

Posted by: john.grisum Jan 15 2011, 07:17 PM

Ive never created columns from scratch before (only edited existing ones). My search results from this site are not along the lines of what is needed. Where should I start?

Posted by: john.grisum Jan 15 2011, 09:23 PM

I pay someone here if it gets what I need!

Im getting 800 people a day through my website and I'm not able to get these advertisements done.

Posted by: Darin McGrew Jan 15 2011, 10:19 PM

QUOTE(john.grisum @ Jan 15 2011, 04:17 PM)

Posted by: john.grisum Jan 15 2011, 11:15 PM

I am now using this, but when I resize the browser the advertisements change position and end up in the center.

#navAlpha {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
left:300px;
background-color:#eee;
padding:10px;
z-index:2;
voice-family: "\"}\"";
voice-family:inherit;
width:120px;
}


Ive also tried this to the same effect

#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}

Posted by: john.grisum Jan 15 2011, 11:35 PM

This is what I include in the HTML

<div id="leftcontent">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-8729779097026444";
/* freemyblackberry ad1 */
google_ad_slot = "6678274885";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

sadfsdfsdsdfsf

</div>

Posted by: john.grisum Jan 15 2011, 11:46 PM

It has to do with margins and stacking, I think. Still have no clue where it is....................

Posted by: john.grisum Jan 16 2011, 02:19 AM

Is it possible to position these from center?

Then I can add a px value that will make the banners remain in the same position no matter how the browser is resized?




Or should I just go ahead a hire an Indian programmer to find the answer? .....Guess I have to.

Posted by: Frederiek Jan 16 2011, 04:01 AM

Do you have a sample page (url) with an attempt to add the columns? As I don't see it on the pages of your site.

Posted by: pandy Jan 16 2011, 04:47 AM

OK, if you want to do it that way you need to make the other content go free from the AP box (or boxes). You can do that by adding margin or padding to the right boxes.

I don't want to read through it all, maybe you rather want the ad inside the gray area, but if we assume you want it outside, you could make room for it by adding padding to body. An AP box goes on top of the padding.

Maybe something like this as a starting point.

Posted by: john.grisum Jan 16 2011, 01:45 PM

QUOTE(pandy @ Jan 16 2011, 04:47 AM)

Posted by: pandy Jan 16 2011, 02:51 PM

Then place it inside whatever element constituted main body and make main body position: relative. An AP box is positioned relative the closest ancester with a position other than static. It's only when no such element exists that it is (seemingly) positioned relative the browser window.

Look at this. Then remove 'positition: relative' from the rule for #outer and see what happens.

Posted by: pandy Jan 16 2011, 05:00 PM

Not that AP is the only way to do this. Forgot to say that.

Posted by: john.grisum Jan 16 2011, 05:17 PM

Okay. I have added this code:

#outer { width: 120px; height: 600px;
margin: auto;
background: yellow;
position:relative;
top: 300px; left: 600px;}

#inner { width: 120px; height: 600px;
margin: auto;
background: red;
position:relative;
top: 300px; left: -600px;}


and have tried changing the body, main in the CSS (and every other possibility) to position:relative, but I keep getting a variation of the what is pictured. (Note: I changed the location of the html code to their respective areas when doing this.)


Attached thumbnail(s)

Posted by: pandy Jan 16 2011, 05:24 PM

Sorry if I wasn't clear. I didn't mean you should use that. It was meant as a demonstration of how absolute positioning works, so you can see the difference between when there is a positioned ancestor (#outer) and when there isn't.

Point is, if you make an element 'position: relative' without an offset (top, left and so on), nothing happens to this element, but any AP element contained in it will be positioned relative its edges instead of relative the browser window. You need to adapt it to the actual HTML you use.

Posted by: john.grisum Jan 16 2011, 05:45 PM

I have been fiddling with position:absolute and position: relative for the last 2 days and have got nowhere.

I need to know which attributes I need to change in the "body" (in the CSS) so that the ads are anchored to them (and dont change relative to the resizing of the browser). I need to know which section should be the anchor (body, main, header, etc). This should be a simple copy and paste job from existing code that is applicable to my case.

I have looked everywhere for examples and code and have only found very simple/basic info or info that is totally unrelated to my particular situation (in regards to positioning, where to add the code, etc).

This is the complete code for the ad tiles:

<div id="outer">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8729779097026444";
/* freemyblackberry ad1 */
google_ad_slot = "6678274885";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

Posted by: john.grisum Jan 16 2011, 07:00 PM

Is there a a way to skip CSS entirely?

Posted by: john.grisum Jan 16 2011, 08:14 PM

QUOTE(pandy @ Jan 16 2011, 05:24 PM)

Sorry if I wasn't clear. I didn't mean you should use that. It was meant as a demonstration of how absolute positioning works, so you can see the difference between when there is a positioned ancestor (#outer) and when there isn't.

Point is, if you make an element 'position: relative' without an offset (top, left and so on), nothing happens to this element, but any AP element contained in it will be positioned relative its edges instead of relative the browser window. You need to adapt it to the actual HTML you use.

Posted by: john.grisum Jan 16 2011, 09:40 PM

Ill pay $25 to anyone that can produce the CSS code to make this work (edited to work with my website). You must be trustworthy (ie. have a lot of posts), as I will pay you first.

Posted by: Darin McGrew Jan 16 2011, 09:55 PM

QUOTE(john.grisum @ Jan 16 2011, 06:40 PM)

Posted by: john.grisum Jan 17 2011, 12:35 AM

Okay, done.

The solution was found- you can view it here

http://w3schools.invisionzone.com/index.php?showtopic=35860&st=0&gopid=197286&#entry197286

Posted by: pandy Jan 17 2011, 09:08 AM

Posted by: pandy Jan 17 2011, 09:12 AM

QUOTE(john.grisum @ Jan 17 2011, 06:35 AM)