SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Positioning

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Positioning

    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.

    http://www.stoutstandards.com/

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    I don't see a banner ad at all on that page. The only thing below the photo is the footer.

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry....here is code. Had put it up online, but was not happy with it....

    Code:
    <!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 &raquo;</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 &raquo;</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 &copy; 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>
    Last edited by spikeZ; Dec 24, 2011 at 05:31. Reason: added code tags

  4. #4
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CODE tags to post code!

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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;

    Code HTML:
    #header {
        width: 990px;
        text-align: center;
        margin: 0 auto;
        padding: 70px 0 0;
        color: black;
    }

  6. #6
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Victor....did the trick. Learned something new today. Merry Christmas.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •