Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - my footer won't sit properly

    Hi
    I've been coding amateur websites and PHP applications for years, but I recently decided to try and learn how to design a website professionally - that is, using Photoshop to mock it up and create a logo, and holding the contents in place using CSS.

    I'm very pleased with the result (which can be found at haruhi.kg13.com), but there is one bug that I've been trying in vain to resolve, and that is the footer. It took a while to make the footer stay in place, and now it permanently stays on top of any content, which is obviously an issue where I intend to be creating rather long pages without the use of iFrames or any other page-within-a-page technique.

    Essentially, what I want is for my footer to stay at the bottom of the page (not the browser window) with a 15px margin above it so that I can display as much text as I like on any given page. It's best displayed on the "legal" page, if you increase the font size a bit.

    Here is my source code. I know some of the CSS elements look unnecessary; I've tried several tutorials for this problem, and this one told me to add a lot of CSS classes.

    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	font: 9pt/17pt arial;
    	margin:0;padding:0;
    	height:100%;
    	background-image: url(../img/sitebg.gif);
    	background-repeat: repeat-x;
    	background-color: #dbe4f7;
    	margin-bottom:10px;
    }
    
    #clear {
    	clear:both;
    }
    
    p {
    	font-size:14px;
    }
    a {
    	color:#FFFFFF;
    }
    
    #content {
    	position:fixed;
    	margin-left:200px;
    	margin-right:200px;
    	/* margin-bottom:30px; */
    	margin-top:20px;
    	line-height:25px;
        min-height: 100%;
        margin-bottom: -36px;
    }
    * html #content {
        height: 100%;
    }
    
    #content p {
    	text-align:right;
    	font: 12pt/14pt arial;	
    }
    
    #content a:link {
    	display:inline;
    	color:#0094FF;
    	text-decoration:none;
    }
    #content a:hover{
    	display:inline;
    	background:#004A7F;
    	text-decoration:none;
    }
    
    #header_contain {
    	width:935px;
    	height:111px;
    	background-position:bottom;
    	display:block;
    	margin:0 auto;
    }
    
    #header_contain p.logo {
    	display:inline;
    	width:339px;
    	height:111px;
    	text-indent:-5000px;
    	float:right;
    	background-image: url(../img/logo.png);
    }
    
    #header_contain p.logo a {
    	display:inline;
    	width:339px;
    	height:111px;
    	text-indent:-5000px;
    	float:right;
    	background-image: url(../img/logo.png);
    }
    
    ul#top_header {
    	font-size:18px;
    	list-style-type:none;
    	float:right;
    	margin:0;padding:0;
    	clear:right;
    	margin-top:-60px;
    	margin-right:180px;
    }
    
    ul#top_header li {
    	float:left;
    	margin-right:50px;
    }
    
    ul#top_header li a {
    	display:block;
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    ul#bottom_header {
    	list-style-type:none;
    	float:right;
    	margin:0;padding:0;
    	clear:right;
    	margin-top:17px;
    }
    
    ul#bottom_header li {
    	float: left;
    	margin-right: 15px;
    }
    
    ul#bottom_header li a {
    	display:block;
    	font-size:14px;
    	text-decoration:none;
    }
    
    #footer-spacer {
        height: 36px;
    }
    
    #footer {
    	display:block;
    	position:absolute;
    	bottom:0;
    	width: 100%;
    	background:#c3cdda;
    	height:36px;
    }
    
    ul#bottom_footer {
    	list-style-type:none;
    	float:right;
    	margin:0;padding:0;
    	clear:both;
    	margin-top:8px
    }
    
    ul#bottom_footer li {
    	float:left;
    	margin-right: 15px;
    }
    
    ul#bottom_footer li a {
    	display:block;
    	font-size:18px;
    	text-decoration:none;
    	bottom:15px;
    }
    
    #top {
        position: absolute;
    }
    HTML (ignore the .php file extension, I'm generating content using includes)
    Code:
        
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        
    	<title>KieranJones.org | Home</title>
        
    </head>
    
    <body>
    <div id="top"></div>
    <div id="header_contain">
        	<p class="logo"><a href="index.php">KieranJones.org</a></p>
        	<ul id="top_header">
        		<li><a href="index.php?action=blog">Blog</a></li>
            	<li><a href="index.php?action=portfolio">Portfolio</a></li>
            	<li><a href="index.php?action=contact">Contact</a></li>
            </ul>
        </div>
        
    <div id="content">
    	<?PHP include("action.php"); ?>
    	<div id="footer-spacer"></div> 
    </div>
        
    	<div id="footer">
            <ul id="bottom_footer">
            	<li><a href="index.php?action=advertising">Advertising</a></li>
            	<li><a href="index.php?action=legal">Legal</a></li>
            </ul>
        </div>
    
    </body>
    
    </html>
    Thanks
    Kieran

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello KieranJones,
    You have your content position:fixed; and that is not helping your layout.

    You should know that using tables for layout is very outdated - see the link in my sig about tables.

    I have a very good, simple and cross browser compliant full height layout demo here.

    While your looking at links in my sig, visit those 2 about validation. Your site has 38 errors in the markup and some of those could easily be fixed.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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