...

View Full Version : CSS - my footer won't sit properly



KieranJones
01-02-2010, 05:53 PM
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 (http://haruhi.kg13.com/) (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 (http://www.electrictoolbox.com/html-css-footer/) told me to add a lot of CSS classes.

CSS:

@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)


<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

Excavator
01-02-2010, 06:12 PM
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 (http://nopeople.com/CSS/full-height-layout/index.html).

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum