The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> CSS Coding to Allow AdSense Tiles
john.grisum
post Jan 14 2011, 12:08 AM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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)
Attached File  style.css ( 7.1k ) Number of downloads: 323
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2011, 02:32 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



What have you tried so far?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 14 2011, 04:16 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 01:36 AM
Post #4


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 15 2011, 04:31 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



More margins won't help. You rather need to create two more columns.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 07:17 PM
Post #6


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 09:23 PM
Post #7


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 15 2011, 10:19 PM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(john.grisum @ Jan 15 2011, 04: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?
Here are some examples:
http://bluerobot.com/web/layouts/
http://webhost.bridgew.edu/etribou/layouts/skidoo/
http://www.maxdesign.com.au/articles/css-layouts/
http://blog.html.it/layoutgala/
http://www.glish.com/css/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 11:15 PM
Post #9


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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;
}


This post has been edited by john.grisum: Jan 15 2011, 11:34 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 11:35 PM
Post #10


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 15 2011, 11:46 PM
Post #11


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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

This post has been edited by john.grisum: Jan 16 2011, 12:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 16 2011, 02:19 AM
Post #12


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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.

This post has been edited by john.grisum: Jan 16 2011, 03:02 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 16 2011, 04:01 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2011, 04:47 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.

CODE
#leftcontent { position: absolute;
               left:10px;
               top:490px }

body         { padding-left: 139px;
               background: #1c1c1c }


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 16 2011, 01:45 PM
Post #15


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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


...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.

CODE
#leftcontent { position: absolute;
               left:10px;
               top:490px }

body         { padding-left: 139px;
               background: #1c1c1c }



Thats close to what I want, but how would you have the columns "fixed" to the main body instead of the right and left of the webpage? The ads have to be outside of the body (not extending the gray area).

This post has been edited by john.grisum: Jan 16 2011, 01:47 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2011, 02:51 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">

#outer    { width: 600px; height: 600px;
            margin: auto;
            background: yellow;
            position: relative }
#inner    { width: 60px; height: 60px;
            background: red;
            position: absolute;
            top: 300px; left: 300px;
            margin-top: -30px; margin-left: -30px }

</style>
</head>


<body>

<div id="outer">
<div id="inner"></div>
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2011, 05:00 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Not that AP is the only way to do this. Forgot to say that. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 16 2011, 05:17 PM
Post #18


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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.)

This post has been edited by john.grisum: Jan 16 2011, 05:18 PM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2011, 05:24 PM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. sad.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john.grisum
post Jan 16 2011, 05:45 PM
Post #20


Newbie
*

Group: Members
Posts: 19
Joined: 13-January 11
Member No.: 13,587



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>

This post has been edited by john.grisum: Jan 16 2011, 06:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:57 AM