Forum Moderators: not2easy
I'm using CSS (much like everyone else) to divide the page into a header, footer, left side navigation pane and a main content area.
My problem is that I cannot get adsense banners to center inside my left navigation pane, if they are smaller than the dimensions of the pane itself. Say an add 125 X 125.
I have tried the center command and the div align center command, as well as placing it inside a table, but no matter what I do it will not center. Interestingly enough, the adsense ads placed in the main content area line up and center just fine, so I was hoping some of you guru's would take a look at the code and maybe offer some suggestions because at this point, it's just beyond me.
Code as follows:
div.left { border-style: none solid solid;
border-left: 1px solid rgb(51, 0, 0);
border-right: 1px solid rgb(51, 0, 0);
border-bottom: 1px solid rgb(51, 0, 0);
margin: 0pt;
padding: 1em;
float: left;
width: 160px;
font-family: Arial,Helvetica,sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(204, 198, 143);
}
div.content { border-style: none;
border-left: 0pt none gray;
border-right: 1px none rgb(0, 0, 0);
padding: 1em;
font-family: Arial,Helvetica,sans-serif;
margin-left: 200px;
background-color: rgb(255, 255, 255);
}
Any suggestions?
<div class="center">
AD HERE
</div>
After adding that to the CSS, in Firefox is did move it over, but did not quite center it.
However in IE7, there is no change at all. I'm beginning to think it may be an IE issue, but I'm not sure how to resolve it.
Thanks again, and as always any help is apprecited.
<div>
<p class="center">Place ad </p>
</div>
I'll paste the entire css file below:
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
div.container { border: 1px none gray;
margin: 0px;
width: 100%;
line-height: 150%;
font-family: Arial,Helvetica,sans-serif;
background-color: rgb(255, 255, 255);
}
div.header { border-style: solid solid none;
padding: 0.5em;
clear: left;
font-family: Arial,Helvetica,sans-serif;
color: rgb(0, 0, 0);
background-color: rgb(191, 182, 96);
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
}
div.footer { border-style: none solid solid;
padding: 0.5em;
clear: left;
font-family: Arial,Helvetica,sans-serif;
color: rgb(0, 0, 0);
background-color: rgb(191, 182, 96);
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}
div.left { border-style: none solid solid;
border-left: 1px solid rgb(51, 0, 0);
border-right: 1px solid rgb(51, 0, 0);
border-bottom: 1px solid rgb(51, 0, 0);
margin: 0pt;
padding: 1em;
float: left;
width: 160px;
font-family: Arial,Helvetica,sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(204, 198, 143);
}
div.content { border-style: none;
border-left: 0pt none gray;
border-right: 1px none rgb(0, 0, 0);
padding: 1em;
font-family: Arial,Helvetica,sans-serif;
margin-left: 200px;
background-color: rgb(255, 255, 255);
}
a.nav, a.nav:link, a.nav:visited { border: 1px solid rgb(0, 0, 0);
background: rgb(230, 227, 207) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
display: block;
width: 160px;
height: 30px;
margin-top: 2px;
text-align: center;
text-decoration: none;
line-height: 30px;
overflow: hidden;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
}
a.nav:hover { background: rgb(128, 124, 89) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
color: rgb(255, 255, 255);
}
a.nav:active { background: rgb(0, 0, 0) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
color: rgb(255, 255, 255);
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
}
.center {
text-align:center;
}
Okay here is the html, anything with a (snip) is where I removed links etc. Also I'm only listeing the html until the nav area is done, the rest is just the main content area which is fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html
style="direction: ltr;" lang="en-us"><head> <meta
content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>(snip)
Links Page</title>
<meta content="(snip)" name="author"> <meta
content="(snip)Links page, if you wish to link us please do and we will return the favor"
name="description"> <link rel="stylesheet"
href="csslayout.css" type="text/css"></head><body><div
style="font-family: Helvetica,Arial,sans-serif;"
class="container">
<div style="font-weight: bold;" class="header">(snip)/div><div style="text-align: center;" class="left"><br><a
class="nav" href="index.html">Home</a>
<a class="nav" href="newsletter.html">Free
Newsletter</a>
<a class="nav" href="reviews.html">Movie Reviews</a>
<a class="nav" href="topten.html">Top 10 Movies</a>
<a class="nav" href="aboutus.html">About Us</a>
<a class="nav" href="feedback.html">Feedback</a>
<a class="nav" href="links.html">Links</a>
<a class="nav" href="sitemap.html">Site Map</a>
<div><p class="center"><script
type="text/javascript"><!--
google_ad_client = "(snip)
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "CCC68F";
google_color_bg = "CCC68F";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script><script type="text/javascript"
src="(snip)
</script></p></div>
<!-- Search Google --><center><form
method="get" action="(snip)
target="_top"><table bgcolor="#fffff0"><tbody><tr><td
align="left" height="32" nowrap="nowrap"
valign="top"><a href="(snip)
src="(snip)"Google"
align="middle" border="0"></a><br><label
for="sbi" style="display: none;">Enter
your search terms</label>
<input name="q" size="10" maxlength="255"
value="" id="sbi" type="text"><label
for="sbb" style="display: none;">Submit search form</label>
<input name="sa" value="Search" id="sbb"
type="submit"><input name="client"
value="(snip)="hidden"><input
name="forid" value="1" type="hidden"><input
name="ie" value="ISO-8859-1" type="hidden"><input
name="oe" value="ISO-8859-1" type="hidden"><input
name="cof"
value="GALT:#333333;GL:1;DIV:#37352E;VLC:000000;AH:center;BGC:C6B396;LBGC:8E866F;ALC:000000;LC:000000;T:44423A;GFNT:663333;GIMP:663333;FORID:1"
type="hidden"><input name="hl" value="en"
type="hidden"></td></tr></tbody></table></form></center><!-- Search Google --></div>
<div class="content"><h3 style="text-align: center;">(snip)
Links Page</h3>
I was using Nvu to create all my pages. Nvu forces the doc type into quirks (transitional) mode in IE, and won't let you change it.
I upgraded to Komposer (bug fix for Nvu) which sets the type to strict. I did have to manually fix each page in a text editor, but now it seems to work and center as it's supposed to.
