Jump to content

CSS Coding to Allow AdSense Tiles, Issues


john.grisum

Recommended Posts

Hello, Im having a particular problem with my website (www.freemyblackberry.com). I need to add adsense to my site but have had issues with editing the CSS form. I wish to add 2 120X600 tiles directly beside the main body (on opposite sides of the main body), though when I do so and resize the browser, the ads go under the main body or go to the outside edges. Code below:#rightcontent {position:absolute;margin: 30px auto;width:120px;top:200px;right:300px;background-color:#eee;padding:10px;width:120px; }I have also tried using this code, but it fixes it to the direct left/right of the page and not the main body. #leftcontent { position: absolute; left:10px; top:490px }I need to them to stay stationary and beside the main body. Any help would be greatly appreciated?

Link to comment
Share on other sites

why use positioning? Why not just put them in the same container that is containing everything else, and just use margins and paddings? Basically make a three column layout in that upper part of the page,

Link to comment
Share on other sites

i would make your .main a 960 width. The you should be able to put the left and right containers on either side of it in the HTML, and float them left and right, respectively, and pad them as needed to get them to line up where you want them. That's more or less what I was thinking. As for your background image, all I see on the left and right is black.

Link to comment
Share on other sites

i would make your .main a 960 width. The you should be able to put the left and right containers on either side of it in the HTML, and float them left and right, respectively, and pad them as needed to get them to line up where you want them. That's more or less what I was thinking. As for your background image, all I see on the left and right is black.
Do you have a link somewhere that would demonstrate floating, padding, and containers/columns that is related to what I need? I have looked everywhere and have only found very simple/basic info or info that is totally unrelated to what I need (in regards to positioning).In short Im getting nowhere fast and cant do without real application to what I need in regards to code (attributes) and placement within the existing CSS code. I am inexperienced with "columns".
Link to comment
Share on other sites

Is there a way I can skip CSS entirely?I am not finding any examples that apply to already existing sites. ANYTHING I do to the existing layout causes other areas of the site to distort or act improperly.
Link to comment
Share on other sites

why don't you show us what you're doing then? You're going to need some sort of CSS of some kind if you want position or do anything to the markup you want to add. The idea behind the links is you try and apply them to your situation, not find a pre-made answer. I gave you some ideas, add two containers to the left and right (wrapped within the container) and float them. Or create a three column like layout for that header part of the page and position the need add containers within the left and right columns. It will require a little trial and error.

Link to comment
Share on other sites

Why not give me an example of CSS code that would perform the way I need it to? I am not asking you to write the code for me, I just need an example with all of the elements that I need.Like an example of a "container" with a "wrap" that "floats" next to another body? I learn code by trial and error, not starting from scratch. I have tried the following:-----------------#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;}----------------#leftcontent {position: absolute;left:10px;top:50px;width:200px;background:#fff;border:1px solid #000;}-----------#leftcontent { position: absolute; left:10px; top:490px }body { padding-left: 139px; background: #1c1c1c }----------------------------#leftcontent { width: 120px; height: 600px;margin: auto;background: yellow;position:relative;top: 300px; left: 600px;}------------etc.........

Link to comment
Share on other sites

You need to a 3 div elements just after <div class="body"><div class="body"><div id="adsense_wrap"><div id="leftcontent"></div><div id="rightcontent"></div>to <div class="body_resize_bottom"> which should end with 6 closing div tags (extra one for closing tag for id="adsense_wrap") before the <div class="clr"><div class="body_resize_bottom"> </div></div></div></div></div><!-- End of id adsense_wrap --></div><!-- End class body -->new css

#adsense_wrap {margin: 0 auto; position: relative; width: 1200px;}#leftcontent {position: absolute; left: 0; top: 0; width: 120px; height: 600px; background-color: lime;}#rightcontent {position: absolute; right: 0; top: 0; width: 120px; height: 600px; background-color: red;}

amend class body css to make class body container overlap bottom container which make the adsense side panel overlap too, also this may need adjusting for IE as usual.Edit: added min-width: 1200px to .main this will prevent side panels overlapping main content, obviously anyone using screen res of 1024 will have scrolbars appear along bottom.

.body background:#E6E6E6 none repeat scroll 0;border-bottom:1px solid #ECECEC;border-top:1px solid #F5F5F5;margin:0 auto;padding:20px 0;position:relative; /*added by dsonesuk*/z-index:99; /*added by dsonesuk*/}.main {margin:0 auto;padding:0;min-width:1200px;/*added by dsonesuk*/}

Note Tested in FF only, expect adjustments for IE

Link to comment
Share on other sites

Well you can basically take what i have, but instead of adding adsense, left, right panels to .body, add to .header_resize instead, any adjustments to the .body should be applied to .header_resize. The main css styling change is still required, but it looks as though the width of adsense_wrap and min-width of .main need adjusting (widening), as the side panels look 20px or so away from main content edge.ORuse my original solution, adjust the top: property value, to force the side panels closer to the top (top:-350px; approx). The width and min-width, as mentioned before may need adjusting still, but this should work still.

Link to comment
Share on other sites

Well you can basically take what i have, but instead of adding adsense, left, right panels to .body, add to .header_resize instead, any adjustments to the .body should be applied to .header_resize. The main css styling change is still required, but it looks as though the width of adsense_wrap and min-width of .main need adjusting (widening), as the side panels look 20px or so away from main content edge.ORuse my original solution, adjust the top: property value, to force the side panels closer to the top (top:-350px; approx). The width and min-width, as mentioned before may need adjusting still, but this should work still.
So I tried the second approach and it works perfectly except that the left column overlaps (ie. goes over) the main body when the browser's width is reduced.Again, another image at the end of this post:http://forums.htmlhelp.com/index.php?showt...amp;#entry54347
Link to comment
Share on other sites

I am also not 100% sure what you mean by this (which <div class="clr"> do you mean?):

<div class="body">to <div class="body_resize_bottom"> which should end with 6 closing div tags (extra on for closing tag for id="adsense_wrap") before the <div class="clr"><div class="body_resize_bottom"> </div>
<img src="images/img_2.gif" alt="picture" width="60" height="59" /><p>I have included my interpretation below:<span><strong> Instructions Section </span></strong></a> . </p> </div> </div> <div class="clr"></div> <div class="body_resize_bottom"></div></div></div></div></div><!-- End of id adsense_wrap --></div><!-- End class body --> </div> </div> <div class="clr"></div> <div class="FBG_resize"> <div class="FBG"> <div class="blog">
Link to comment
Share on other sites

I am also not 100% sure what you mean by this (which <div class="clr"> do you mean?):<img src="images/img_2.gif" alt="picture" width="60" height="59" /><p>I have included my interpretation below:<span><strong> Instructions Section </span></strong></a> . </p> </div> </div> <div class="clr"></div> <div class="body_resize_bottom"></div><!--1--></div><!--2--></div><!--3--></div><!--4--></div><!--5--></div><!--6--> </div> </div> <div class="clr"></div> <div class="FBG_resize"> <div class="FBG"> <div class="blog">
no you have gained two extra closing divs
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...