SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie: centering a footer at bottom of page

    Hello!

    Hope someone can help.

    I'm trying to center a box at the bottom of the page for a footer, but can't seem to do it. I managed to get it to work in firefox if i didn't set the width of the box, but not in IE. I did the following:

    Code:
    body {
    	background-image: url(/img/whitebggif.gif);
    	background-repeat: repeat-y;
    	background-position: center;
    	background-color: #F4F5EF;
    	font-family: verdana, sans-serif;
    	font-szie: 10px;
    	text-align: center; }
    which then centers everything else on the page, but because i need to set the position to absolute for the footer item it does not center the box.

    You can see the progress (if i can call it that!!) at www.theresortwarehouse.com

    A BIIIG thank you to anyone who might be able to help out.

    Thanks - Gaz

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .footer {
    	position: absolute;
    	width: 100%;
    	bottom: 20px;
    	font-size: 10px;
    	font-family: myriad, verdana, sans-serif;
    	color: #4D4D4D;
    	text-align: center; 
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this seems to cause more problems - now there is a horizontal scroll bar in both browsers and it is way off alignment in IE

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Consider using a float model

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>the camping warehouse : the online community for all forms of camping</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100%;}
    	
    	*{padding:0;margin:0;}
    	
    	body {
    	background:#F4F5EF url(img/whitebggif.gif) repeat-y center;
    	font-family:myriad, verdana, sans-serif;
    	font-size: 10px;
    	text-align: center; 
    	}
    
    	/* General container for the page */
    	.page{
    	position: relative;
    	margin:-100px auto 0 auto;
    	text-align:left;
    	width:740px;
    	padding:0 5px 0 5px;
    	background: url(img/brandinghome.gif) no-repeat 5px 215px;height:180px;
    	}
    	
    	* html .page{height:100%;}
    	head+body .page{min-height:100%;}
    	/* End of general container for the page */
    
    	/* Navigation for top right */
    	.topnav{color:#4D4D4D;float:right;margin-top:55px;}
    
    	.li a:link,.li a{color: #4D4D4D; text-decoration: none; }
    	.li a:visited{}
    	.li a:active{color: #009933;}
    	.li a:hover{color: #009933;}
    	/* Navigation for top right */
    
    	/* SEARCH Bar */
    	.lb-bl {background:  url(img/lb/lb_bl.gif) 0 100% no-repeat #E5ECEC}
    	.lb-br {background:  url(img/lb/lb_br.gif) 100% 100% no-repeat}
    	.lb-tl {background:  url(img/lb/lb_tl.gif) 0 0 no-repeat}
    	.lb-tr {background:  url(img/lb/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
    	.clear1 {font-size: 1px; height: 1px}
    
    	.topform,.form{width:300px;text-align:right;float:right;}
    	
    	input,form {font-size: 11px;}
    	/* End of SEARCH Bar */
    
    	/* TOP NAV Bar */
    	.db-bl {background:  url(img/db/db_bl.gif) 0 100% no-repeat #CADBDE}
    	.db-br {background:  url(img/db/db_br.gif) 100% 100% no-repeat}
    	.db-tl {background:  url(img/db/db_tl.gif) 0 0 no-repeat}
    	.db-tr {background:  url(img/db/db_tr.gif) 100% 0 no-repeat; padding: 4px}
    
    	.topmainnav {
    	clear:both;
    	font-size:11px;
    	font-weight:bold;
    	text-align:right;
    	word-spacing:10px;
    	}
    	* html .topmainnav{height:1%;}
    	/* End of TOP NAV Bar */
    
    	/* Branding homepage 
    	.brandinghome{background:#ff6600 url(img/brandinghome.gif) no-repeat;height:180px;}*/
    	
    	.brandingtext{width:430px;color: #ffffff;padding:115px 0 0 240px;}
    	/* End of branding homepage */
    
    	/* Footer */
    	.footer {
    	position:relative;
    	margin:0 auto;
    	width:750px;
    	color: #4D4D4D;
    	text-align:center; }
    	.footer p{padding:20px 0 0 0;}
    	/* End of footer */
    	
    	.x{height:100px;}
    	.y{float:left;}
    	
    	img{border:none;}
    	</style>
    </head>
    <body>
    
    <div class="page">
    <div class="x"></div>
    <!-- Top section of site -->
    <a href="index-2.html" class="y">
    <img src="img/mainlogo.gif" alt="the camping warehouse : the online community for all forms of camping" width="280" height="88" />
    </a>
    <!-- Top right nav -->
    
    <div class="topnav li"><a href="##">HOMEPAGE</a> | <a href="##">ABOUT US</a> | <a href="##">ADVERTISE</a> | <a href="##">CONTACT</a></div>
    
    <!-- End of top right nav -->
    <!-- Top right SEARCH -->
    <div class="topform">
    
    <div class="lb-bl">
    <div class="lb-br">
    <div class="lb-tl">
    <div class="lb-tr">
    <form  id="form" method="post" action="#">
    <input name="search" type="text" />
    <input name="search" type="button" value="SEARCH" />
    </form>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    <!-- End of top right SEARCH -->
    
    <!-- Top NAV -->
    <div class="topmainnav li">
    
    <div class="db-bl">
    <div class="db-br">
    <div class="db-tl">
    <div class="db-tr">
    <a href="##">CAMPSITES</a> 
    <a href="##">COMMUNITY</a> 
    <a href="##">INFORMATION</a> 
    <a href="##">PRODUCTS</a> 
    <a href="##">SERVICES</a>
    </div>
    </div>
    </div>
    </div>
    
    </div>
    <!-- End of top NAV -->
    <!-- End of top section of site --><!-- Branding on homepage 
    
    <div class="brandinghome">-->
    
    <div class="brandingtext">Welcome to theCampingWarehouse.com<br />
    the online community for anything to do with: tents : caravans : motorcaravans/motorhomes 
    : holiday homes : rvs : folding campers : park holiday homes : static caravans
    </div>
    <!-- </div>
    	
    End of branding on homepage -->
    
    </div><!-- end of page container div -->
    
    <div class="footer li x">
    <p>
    <a href="##">HOMEPAGE</a> | 
    <a href="##">ABOUT US</a> | 
    <a href="##">ADVERTISE</a> | 
    <a href="##">CONTACT</a>
    </p>
    <p>All information is &copy; Warehouse Media Ltd.<br />
    <a href="##">Terms &amp; Conditions</a> | 
    <a href="##">Site Map</a> | 
    <a href="##">Gaz's Blog</a>
    </p>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I was sure this looked right when I first did it. That's what you get for doing this stuff while staying up late watching World Cup football. Sorry.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heya all4nerds

    thanks for the in-depth reply.

    seems like you have changed pretty much everything - isn't there a way i could do it without having to change everything?

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    .footer {
    position: absolute;
    width:750px;
    left:50%;
    margin:0 0 0 -375px;
    bottom: 20px;
    font-size: 10px;
    font-family: myriad, verdana, sans-serif;
    color: #4D4D4D;
    text-align: center;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what can i say - i think i love you!

    thank you very much!!

    you are a star!


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
  •