Thread: Footer Help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Footer Help


    Hi
    I added a footer to the bottom of my web page but i can't get it to center, If i use the center tag all the links stack up on each other. Was wondering if someone could help me this please.

    Here is the code i am using..

    footer:
    Code:
    <div id="newfooter"> <section id="footcol1"> <h4>Links</h4> <ul> <li><a href="http://www.americasarmy.com">America's Army</a></li> <li><a href="http://www.aao25.com">AAO25</a></li> <li><a href="http://www.battletracker.com">Battle Tracker</a></li> <li><a href="http://www.teamspeak.com/">TeamSpeak</a></li> </ul> </section> <section id="footcol2"> <h4>Anti-Cheat</h4> <ul> <li><a href="http://www.anticheatinc.net/forums/portal.php">AntiCheat Inc</a></li> <li><a href="http://www.pbbans.com/">PBBans</a></li> <li><a href="http://www.punkbuster.com/">PunkBuster</a></li> <li><a href="http://www.evenbalance.com/">Even Balance</a></li> </ul> </section> <section id="footcol3"> <h4>Our Friends</h4> <ul> <li><a href="http://www.dnafgroup.com/home/index.php">DNAF Group</a></li> <li><a href="http://www.draat.net/">DRAAT</a></li> <li><a href=""></a></li> <li><a href="#"></a></li> </ul> </section> <section id="footcol4"> <h4>Forum Links</h4> <ul> <li><a href="http://www.">Sign Up</a></li> <li><a href="http://">Help</a></li> <li><a href="http://">Forums</a></li> <li><a href="http://www.">Contact Us</a></li> </ul> </section> <br class="clear"> </div> <!-- new footer -->
    CSS File:

    Code:
    #newfooter { width: 948px; height: 110px; margin: 0 auto; border-top: 1px solid #000000; background: #000000 url('/images/background2.png') repeat-x top left; padding: 10px; } #newfooter h4 { color: #FFFFFF; padding: 0 0 8px 0; margin: 0 auto; font-size: 14px; text-shadow: 1px 1px 1px #000000;font-weight: bold; } #footcol1 li a:hover, #footcol2 li a:hover, #footcol3 li a:hover { text-decoration: none; } #footcol1 { padding: 0 28px; float: left; border-right: 1px solid #fff; margin-0 auto: 7px; } #footcol2 { padding: 0 28px; float: left; border-right: 1px solid #fff; } #footcol3 { padding: 0 28px; float: left; border-right: 1px solid #fff; } #footcol4 { padding: 0 28px; float: left; } #footcol1 li, #footcol2 li, #footcol3 li, #footcol4 li { list-style-type: square; margin:; padding: 2px; font-size: 13px; text-shadow: 1px 1px 1px #fff; } #footcol1 li:hover, #footcol2 li:hover, #footcol3 li:hover { background-color: #fff; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; } #footcol1 ul, #footcol2 ul, #footcol3 ul { margin: 0 0 0 10px; padding: 0; }
    Thanks for the help.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    251
    Rep Power
    86
    Hi there Toa,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #newfooter { 
        width:948px; 
        height:140px;
        padding:20px 0;
        margin:auto; 
        border-top:1px solid #000;
        border-radius:10px; 
        background:#000 url('/images/background2.png') repeat-x top left; 
        color:#fff;
        box-shadow:10px 10px  10px #999;
     } 
    #newfooter section {
         float:left;
         width:236px;
         height:100%;
         border-right:1px solid #fff;
     }
    #newfooter section:last-of-type {
        border:0;
     }
    #newfooter h4 {  
        padding:0 0 8px 0; 
        margin:0; 
        font-size:14px; 
        font-weight:bold; 
        text-align:center;
     }
    #newfooter ul { 
        margin:0 26px 0 0;
        list-style-type:square; 
     }
    #newfooter li { 
        padding:2px; 
        font-size:13px;
     } 
    #newfooter a {
        display:block;
        padding:4px 0 4px 10px;
        color:#fff;
     }
    #newfooter a:hover {   
        background-color:#fff; 
        border-radius:4px; 
        color:#000;
        text-decoration:none;
        box-shadow:inset 0 0 5px #333;
     }
    </style>
    
    </head>
    <body>
    
    <div id="newfooter"> 
    
    <section> 
    <h4>Links</h4> 
     <ul>
      <li><a href="http://www.americasarmy.com">America's Army</a></li> 
      <li><a href="http://www.aao25.com">AAO25</a></li> 
      <li><a href="http://www.battletracker.com">Battle Tracker</a></li> 
      <li><a href="http://www.teamspeak.com/">TeamSpeak</a></li> 
     </ul> 
    </section> 
    
    <section> 
    <h4>Anti-Cheat</h4> 
     <ul> 
      <li><a href="http://www.anticheatinc.net/forums/portal.php">AntiCheat Inc</a></li>
      <li><a href="http://www.pbbans.com/">PBBans</a></li> 
      <li><a href="http://www.punkbuster.com/">PunkBuster</a></li> 
      <li><a href="http://www.evenbalance.com/">Even Balance</a></li> 
     </ul> 
    </section> 
    
    <section> 
    <h4>Our Friends</h4> 
     <ul>
      <li><a href="http://www.dnafgroup.com/home/index.php">DNAF Group</a></li>
      <li><a href="http://www.draat.net/">DRAAT</a></li>
     </ul>
    </section>
    
    <section>
    <h4>Forum Links</h4>
     <ul>
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Contact Us</a></li>
     </ul> 
    </section> 
    
    </div> <!-- new footer -->
    
    </body>
    </html>
    coothead
    Last edited by coothead; August 10th, 2013 at 05:56 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0
    Hi coothead, thank you for your help and the welcome. That was what i have been looking for Thank you very much.
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    251
    Rep Power
    86

    No problem, you're very welcome.

    coothead

IMN logo majestic logo threadwatch logo seochat tools logo