How do I get the banner ad at the bottom of my page closer to the photo? Want to elminate the empty space between the two? Stumped.
I don’t see a banner ad at all on that page. The only thing below the photo is the footer.
Sorry…here is code. Had put it up online, but was not happy with it…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab,
searchcoil, Western and Eastern, Recovery, Research">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stout Standards</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css" type="text/css"/>
<style type="text/css">
body {
background: #DEB887;
font-size:100%;
margin:0;
padding:0;
}
#container {
background: none repeat scroll 0 0 #97694F;
min-width: 990px;
width: 95%;
overflow: hidden; /* added */
padding-bottom: 30px; /* added */
}
#header {
width: 990px;
text-align: center;
margin:0 auto;/*center it up in the container div*/
padding:70px 0;
color:#000;
}
#header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
clear:both;
content:"";
display:block;
height: 0;
font-size:0;
}
#header img {
float:right;
border:2px solid #000;
}
#sidebar {
width: 12em;
font-size:40px;
}
#MainContent {
background: #FFA07A;
margin-left:5em;
margin-right:5em;
padding:10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
float:left;
width:176px;/*180px total with 2px borders*/
margin:0;
padding:0;
list-style:none;
background: #D2B48C;/*for testing only, remove when done*/
border:2px solid #000;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;/*kill IE whitespace bug*/
width:176px;
height: 35.5px;
text-align:center;/*center the text*/
}
#nav li a {
display:block;/*use block instead of float for IE6 */
width:100%;/*IE needs a width*/
/*height:3em; remove height to allow text to wrap*/
padding:.65em 0;/*set padding on top and bottom to create more height*/
text-decoration:underline;
color: #000;
font-weight:bold;
font-size:1em;
}
/* --- Text and Bg colors on hover ---*/
#nav li:hover,
#nav li.sfhover {
background:#333;
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}
#nav li:hover li a,
#nav li.sfhover li a {color:#000}
#nav li li:hover a,
#nav li li.sfhover a {background:#333; color:#FFF}
/* ------ Sub UL Drop Down ------ */
#nav ul {
position:absolute;
width:176px;
left:176px;
top:-2px;/*recover top border (use "0" without borders)*/
margin-left:-999em;/* hide the sub ul */
background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
/*=== Begin Footer ===*/
#footer {
width:100%;
clear:both;
}
#footer p {
margin:0;
padding: 10px 0;
background:#DDD;
text-align:center;
font-size: 1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-19821548-1']); _gaq.push(['_trackPageview']); (function()
{ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="Aboutme.html">About Me</a></li>
<li><a href="goodole.html">Articles »</a>
<ul>
<li><a href="goodole.html">The Goodole days</a></li>
<li><a href="TreasureTips.html">Treasure Tips</a></li>
<li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
<li><a href="Bill.html">Cousin Bill</a></li>
<li><a href="BasicRules.html">Coin Hunting Rules</a></li>
<li><a href="Winter.html">Winter Treasure Hunting</a></li>
<li><a href="Productive.html">Finding Productive Sites</a></li>
<li><a href="Dan.html">Detector Dan</a></li>
<li><a href="Writing.html">Sharing Your Experiences</a></li>
<li><a href="Future.html">What the Future Holds</a></li>
<li><a href="Bolts.html">Nuts & Bolts of a Metal Detector</a></li>
<li><a href="cliff.html">Cliff Steffens Bio</a></li>
<li><a href="Mark.html">Mark Schuessler Bio</a></li>
<li><a href="Eleanor.html">Eleanor Hube Bio</a></li>
<li><a href="Packrat.html">Larry Bateham Bio</a></li>
<li><a href="UMOS.html">Unidentified Metal Objects</a></li>
</ul>
<li><a href="Photos.html">Photos »</a>
<ul>
<li><a href="Photos.html">Photos Set 1</a></li>
<li><a href="Photos2.html">Photos Set 2</a></li>
<li><a href="Photos3.html">Photos Set 3</a></li>
<li><a href="Photos4.html">Photos Set 4</a></li>
<li><a href="Photos5.html">Photos Set 5</a></li>
<li><a href="Photos6.html">Photos Set 6</a></li>
<li><a href="Photos7.html">Photos Set 7</a></li>
<li><a href="Photos8.html">Photos Set 8</a></li>
<li><a href="Photos9.html">Photos Set 9</a></li>
<li><a href="Photos10.html">Photos Set 10</a></li>
<li><a href="Photos11.html">Photos Set 11</a></li>
<li><a href="Photos12.html">Photos Set 12</a></li>
<li><a href="Photos13.html">Photos Set 13</a></li>
<li><a href="Photos14.html">Photos Set 14</a></li>
<li><a href="Photos15.html">Photos Set 15</a></li>
<li><a href="Photos16.html">Photos Set 16</a></li>
<li><a href="Photos17.html">Photos Set 17</a></li>
<li><a href="Photos18.html">Photos Set 18</a></li>
</ul>
</li>
<li><a href="Research.html">Research</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="Coinhunting.html">Coinhunting</a></li>
<li><a href="clubs.html">Clubs</a></li>
<li><a href="Scattershooting.html">Scattershooting</a></li>
<li><a href="Malamute.html">Malamute Saloon</a></li>
<li><a href="Latest.html"><font color="#8B0000">LATEST NEWS</font></a></li>
<li><a href="Recipes.html">Poor Gourmand</a></li>
<li><a href="Link.html">Links</a></li>
<li><a href="Books.html">Reading</a></li>
<li><a href="Videos.html">Videos</a></li>
<li><a href="Reviews.html">Product Reviews</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
</ul>
<img src="http://www.stoutstandards.com/images/Stoutstandards3.jpg" width="800" height="600">
<br>
<br>
<br>
<!--end #header-->
</div>
<center>
<a href="http://whiteselectronics.com/vx3.html"><img src="http://www.treasurenet.com/i/vx3metaldetector.gif" alt="Introducing The Spectra VX3!" width="700" height="97" /></a>
</center>
<div id="footer">
<p>Copyright © 2010 Dick Stout. All Rights Reserved</p>
</div> <!--end #footer-->
<br>
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-19821548-1']); _gaq.push(['_trackPageview']); (function()
{ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
</div> <!--end #container-->
</body>
</html>
Use CODE tags to post code!
The space above the banner image is caused by the 70px top and bottom padding of #header. Changing to padding:70px 0 0; will remove the space completely. The third number controls the bottom padding, so if you want 20px space above the image it would be padding: 70px 0 20px;
#header {
width: 990px;
text-align: center;
margin: 0 auto;
padding: 70px 0 0;
color: black;
}
Thanks Victor…did the trick. Learned something new today. Merry Christmas.