www.webdeveloper.com
Results 1 to 2 of 2

Thread: center footer area

  1. #1
    Join Date
    Dec 2002
    Location
    US
    Posts
    128

    center footer area

    Hello,

    I'm using the RingofTime template at http://freehtml5templates.com and have been modifying it so it can fit the entire width of the screen. The problem I have been strugging is I would like to have the footer area to be center instead of aligned to the left. I tried adding a div section surrounding everything inside the <footer> tags hoping it would push everything in the middle of the page but that didn't work. This is what I have tried below.

    If there is anything you can do to help me that would be great. Any ideas what I need to do?

    CSS code:
    Code:
    .outer { margin: 0 auto; text-align: center; }
    HTML code:
    Code:
    <footer>
    <div class="outer">
    
    ...everything inside...
    
    </div>
    </footer>

  2. #2
    Join Date
    Dec 2002
    Location
    US
    Posts
    128
    Maybe this will help. This is the footer that I would love centered on the page. If you can help that would be great.

    Code:
    <!DOCTYPE html> 
    <html lang="en"> 
    <head>
    <title>Footer Column</title> 
    <style type="text/css">
    
    	#wrapper {
     width: 100&#37;; 
    margin: 0 auto; 
    margin-top: 0px; 
    margin-bottom: 0px; background: #fff; 
    }
    
    	footer {
    display: block;
    }
    
      	footer {
     width: 100%; margin: 0 auto;
    clear: both; 
    }
    
     
    
    	#footer-area {
    background: #994300;
    color: #FFF;
    font-size: 90%;
    padding: 18px 0;
     
    overflow: hidden;
    }
    
    
    
    	.footer-segment {
     
    float: left; margin-right: 20px;
    margin-left: 20px;
    width: 190px;
    } 
    
    
    
    	footer aside h4 {
    color: #faf0e6;
    font-size: 16px;
    line-height: 1.5em;
    }
    
    
    
    	footer ul {
    list-style: none;
    margin: -15px 0;
    }
    
    
    	
    footer a:link, footer a:visited {
    color: #ccc;
    }
    
    
    
    	footer a:hover { 
    text-decoration: underline; 
    }
    
    
    	
    footer p {
    margin-top: -15px;
    color: #faf0e6;
    }
    
    
    
      </style>
    
    </head> 
    <body> 
    
    <div id="wrapper>
    
    <footer>
    		
    <section id="footer-area">
    
    								
    <aside class="footer-segment">
    							
    <h4>Friends</h4>
    								
    <ul>
    									
    <li><a href="#">one linkylink</a></li>
    									
    <li><a href="#">two linkylinks</a></li>
    									
    <li><a href="#">three linkylinks</a></li>
    								
    </ul>
    					
    </aside><!-- end of #first footer segment -->
    
    					
    <aside class="footer-segment">
    							
    <h4>Awesome Stuff</h4>
    								
    <ul>
    									
    <li><a href="#">one linkylink</a></li>
    									
    <li><a href="#">two linkylinks</a></li>
    									
    <li><a href="#">three linkylinks</a></li>
    								
    </ul>
    					
    </aside><!-- end of #second footer segment -->
    
    					
    <aside class="footer-segment">
    							
    <h4>Coolness</h4>
    								
    <ul>
    									
    <li><a href="#">one linkylink</a></li>
    									
    <li><a href="#">two linkylinks</a></li>
    									
    <li><a href="#">three linkylinks</a></li>
    								
    </ul>
    					
    </aside><!-- end of #third footer segment -->
    					
    					<aside class="footer-segment">
    							
    <h4>Blahdyblah</h4>
    								
    <p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
    		</aside><!-- end of #fourth footer segment -->
    
    					
    </section><!-- end of footer-area -->
    	
    </footer>
    
    
    </div>
    
    </body> 
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles