...

View Full Version : How do I make CSS appear behind adsense?



crank01
04-30-2011, 05:13 PM
I recently made a black css table and I would like it to appear behind my google adsense but so far it is only appearing infront. I'll paste the code I have so far of my table...I want it to appear behind the adsense and not infront. PLEASEEEEEE help me :)
<style type="text/css">
table,th,td
{

position:absolute;
left:322px;
top:250px;
height:30px;
width:938px;
border:1px solid black;
background-color:#000000;
background-position:left top;font-family:Verdana,Geneva,sans-serif;font-size:12px}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;
font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}div.clear,span.clear{clear:both;display:block}em{font-style:italic}a{text-decoration:none}.container{width:972px;padding-bottom:30px;margin:0 auto}.main{width:972px;text-align:left;

crank01
05-01-2011, 01:02 AM
heres an image i just uploaded to how my page looks, its a niche so i had to erase some stuff out like the name

http://img638.imageshack.us/i/wordpressv.jpg/

sunfighter
05-01-2011, 07:38 PM
Have you tried using the z-index?

crank01
05-03-2011, 11:04 AM
yes but z-index would make the table appear infront of the adsense code, right?

sunfighter
05-03-2011, 11:44 PM
yes but z-index would make the table appear infront of the adsense code, right?

You can also set to appear behind.

amitsh
05-04-2011, 01:07 PM
r u using table or div in ur layout...

or possible paste both HTML & CSS code

mrjezz
05-04-2011, 01:57 PM
Just as z-index can be used to position something 'on top' of something else, it can also be used for the opposite - the trick would be to make the z-index of the table lower than that of the adsense.

crank01
05-04-2011, 08:31 PM
omg thank you so much for replying ppl, ive been asking sooo many ppl about this question :) ok but when I look at the adsense code it doesnt have a z-index, am i right? and apparently u cant edit the code since its against there TOS, so how would I make the table appear infront with a z-index? I'll paste there code below, plz help everyone, I'll be so thankful :thumbsup:..
<style type="text/css">
table,th,td
{

position:absolute;
left:322px;
top:250px;
height:30px;
width:938px;
border:1px solid black;
background-color:#000000;
background-position:left top;font-family:Verdana,Geneva,sans-serif;font-size:12px}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;
font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""" "}div.clear,span.clear{clear:both;display:block}em{font-style:italic}a{text-decoration:none}.container{width:972px;padding-bottom:30px;margin:0 auto}.main{width:972px;text-align:left;

amitsh
05-04-2011, 08:49 PM
y don't u use det image as background image which u want to appear behind ad n use padding or margin to get space in all four corners...

crank01
05-04-2011, 10:29 PM
well I already have a background image for my wordpress theme, but do u mean like use a background header background, for header.php? Im not great at coding so I dont really fully understand what u mean.

sunfighter
05-05-2011, 04:57 AM
crank01 I wonder why you just didn't try to add the z-index and play with it. It would have saved you a lot of time.

I think objects inherent the index of their parent. Anyway chances are the ad has a z-index of 1 and that's what i surmise to start things off.

Give your table an ID=joker.

Add this to the css just under what you published above.
#joker{
z-index: -1;
}

If that don't do it Make the index more negative -2, then -3 until it's behind the ad.

Dr3am3rz
05-05-2011, 07:37 AM
Crank01, I agreed with sunfighter, why not just try using z-index with negative values?

amitsh
05-05-2011, 08:42 PM
show us ur both code HTML & also CSS that way u can be helped so easily...

and what i was saying in my last message was U can use background image in ur ad container... whether is TABLE CELL or DIV

and z-index is another way out for example

z-index: 100;

will always behind

z-index: 200;

so in short higher number is always in front

But make sure u r using postion where ever u use z-index as it won't work if position is not declared to that element where u r gonna use it...

crank01
05-06-2011, 02:11 PM
crank01 I wonder why you just didn't try to add the z-index and play with it. It would have saved you a lot of time.

I think objects inherent the index of their parent. Anyway chances are the ad has a z-index of 1 and that's what i surmise to start things off.

Give your table an ID=joker.

Add this to the css just under what you published above.
#joker{
z-index: -1;
}

If that don't do it Make the index more negative -2, then -3 until it's behind the ad.
k thanks I'll try this first, then I'll let you know if this worked or not :thumbsup: thx

crank01
05-06-2011, 02:30 PM
The: #joker{z-index: -1;} WORKED, and so MUCH THANKS to everyone in this thread haha, im so excited now that I'm thanking all u guys for helping me in this tough problem :thumbsup: :thumbsup:
:D

sunfighter
05-09-2011, 07:16 PM
Replace these lines of code.



<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Trypophobia</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://trypophobia.net/wp-content/themes/twentyten/style.css" />
<link rel="pingback" href="http://trypophobia.net/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Trypophobia &raquo; Feed" href="http://trypophobia.net/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="Trypophobia &raquo; Comments Feed" href="http://trypophobia.net/?feed=comments-rss2" />
<script type='text/javascript' src='http://trypophobia.net/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://trypophobia.net/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://trypophobia.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://trypophobia.net/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Trypophobia' href='http://trypophobia.net' />
<meta name="generator" content="WordPress 3.1" />
<style type="text/css" media="all">
/* <![CDATA[ */
@import url("http://trypophobia.net/wp-content/plugins/wp-table-reloaded/css/plugin.css?ver=1.9.1");
@import url("http://trypophobia.net/wp-content/plugins/wp-table-reloaded/css/datatables.css?ver=1.9.1");
/* ]]> */
</style><style type="text/css">
body { background-color: #bfd6f9; }
</style>
</head>
<body class="home blog">
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<h1 id="site-title">
<span>
<a href="http://trypophobia.net/" title="Trypophobia" rel="home">Trypophobia</a>
</span>
</h1>
<div id="site-description"></div>
<div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu"><ul><li class="current_page_item"><a href="http://trypophobia.net/" title="Home">Home</a></li><li class="page_item page-item-10"><a href="http://trypophobia.net/?page_id=10" title="Privacy Statement">Privacy Statement</a></li><li class="page_item page-item-12"><a href="http://trypophobia.net/?page_id=12" title="Contact Us">Contact Us</a></li></ul></div>
</div><!-- #access -->
<img src="http://trypophobia.net/wp-content/uploads/2011/04/trypophobia.png" width="940" height="90" alt="" />
</div><!-- #branding -->
<link rel="stylesheet" href="http://www.trypophobia.net/aniket.css" type="text/css" media="screen" charset="utf-8" />
<div class="categories">


</div>

<!--</style> appears to be extra!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->


<style type="text/css">
table,th,td
{
position:absolute;
//left:322px;
top: 228px; /*228px;*/
height: 42px; /*42px;*/
width:940px;
border:1px solid black;
background-color:#000000;
background-position:left top;font-family:Verdana,Geneva,sans-serif;font-size:12px}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;
font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}div.clear,span.clear{clear:both;display:block}em{font-style:italic}a{text-decoration:none}.container{width:972px;padding-bottom:30px;margin:0 auto}.main{width:972px;text-align:left;
}
</style>
<table>
</table>

<script type="text/javascript">
google_ad_client = "ca-pub-4911335995101016";
/* ad links blue black */
google_ad_slot = "7238076179";
google_ad_width = 728;
google_ad_height = 15;

</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



</div><!-- #masthead -->
</div><!-- #header -->

<div id="main">
<div id="container">
<div id="content" role="main">
<div id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum