CSS footer problems

hops15

hops15

hops15

Associate
Joined
15 Sep 2007
Posts
25
Location
Newcastle
I've been trying to put together a simple website for my cousin who's an illustrator so will be adding a lightbox gallery later but for now I'm just trying to sort the layout.

I'm very rusty on my html/css and haven't put anything together since I was in college 4 years ago:o so have been using various tutorials to get where I am now. As a result the html looks a mess but I've almost got what I want.

So the problem is that I want the footer to stay at the bottom of the browser when content doesnt fill the screen (which I've managed to do I think) but stay below the content once it's bigger than the browser window if that makes sense. The second bit is what I can't seem to figure out.

Some images to show what I mean:

'Normal layout'
Footer at the bottom of the browser when it's bigger than the content
What happens when the content is bigger than the browser window
A glitch that happens when the browser is resized and you scroll about - goes blank where the footer has been

I'm sure it's something really simple but I feel like I've tried everything!

Here's where the site's at temporarily http://hops.15.googlepages.com/

And what she has at the minute http://homepage.mac.com/paintbrush/Sites/illu'07/Illutrator_pages/Schofield_K.htm

edit: Just to add I've tried using margins and padding to no avail but I'm not sure if I just wasn't doing it correctly for the outcome I desired. I also tried following this guide, but couldn't get it to work :(

Any help is much appreciated :) Here's that messy code:

<p><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">

html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:rgb(250,230,170);
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background:url(http://hops.15.googlepages.com/bkgndabout.jpg);
background-repeat: no-repeat;
background-position:center -200px;
}


#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:215px;
width:620px;
margin-left:-310px;
left:50%;
border-left:0;
border-right:0;
background:none;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:760px;
}

#head {
position:absolute;
margin-left:-400px;
left:50%;
top:0;
width:800;
min-width:800px;
height:175px;
background:url(header1.gif);
background-repeat:no-repeat;
font-size:1em;
z-index:5;
border:1px solid #0fff;

}

* html #head {
top:2px; width:800px; height:175px;
}

a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7, a.nav8 {width:100px; height:175px; display:block; float:left; background:url(header2.gif); background-repeat:no-repeat; text-align:center; font-size:1em; font-weight:bold; color:#0fff; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:50px; overflow:hidden;}
#head a .pad {display:block; width:100px; height:110px;background:transparent; border-bottom:1px solid #0fff;}

a.nav1 {background-position:0px 175px;}
a.nav2 {background-position:-100px 175px;}
a.nav3 {background-position:-200px 175px;}
a.nav4 {background-position:-300px 175px;}
a.nav5 {background-position:-400px 175px;}
a.nav6 {background-position:-500px 175px;}
a.nav7 {background-position:-600px 175px;}
a.nav8 {background-position:-700px 175px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {background:#f80; color:#fff; cursor:pointer; display:block; width:100px; height:50px; cursor:hand;}
a.nav2:hover {background-position:-100px 0;}
a.nav2:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav3:hover {background-position:-200px 0;}
a.nav3:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav4:hover {background-position:-300px 0;}
a.nav4:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav5:hover {background-position:-400px 0;}
a.nav5:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav6:hover {background-position:-500px 0;}
a.nav6:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav7:hover {background-position:-600px 0;}
a.nav7:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav8:hover {background-position:-700px 0;}
a.nav8:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}


#foot {
text-align:center;
position:absolute;
margin-left:-400px;
left:50%;
bottom:0;
width:800px;
min-width:800px;
height:75px;
background:url(foot.gif);
font-size:1em;
z-index:5;
border:1px solid #0fff;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}


* html #foot {
bottom:2px; width:800px; height:75px;
}


#content p {
padding:5px; text-align:justify;
}
.boldhead {
font-size:1.5em;
font-weight:bold;
}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

</style>
</p>

<div id="head"><a class="nav1" title="" href="" onclick="return false"><span class="pad"></span><span class=""></span><a class="nav2" title="" href="" onclick="return false"><span class="pad"></span><span class=""><font color="#333333" size="2"></font></span></a><a class="nav3" title="Home" href="Home"><span class="pad"></span><span class="button"><font color="#333333" size="2"></font></span></a><a class="nav4" title="Portfolio" href="Portfolio"><span class="pad"></span><span class="button"><font color="#333333" size="2"></font></span></a><a class="nav5" title="About" href="About"><span class="pad"></span><span class="button"><font color="#333333" size="2"></font></span></a><a class="nav6" title="Contact" href="Contact"><span class="pad"></span><span class="button"><font color="#333333" size="2"></font></span></a><a class="nav7" href="" onclick="return false"><span class="pad"></span><span class=""><font color="#333333" size="2"></font></span></a><a class="nav8" title="" href="" onclick="return false"><span class="pad"></span><span class=""><font color="#333333" size="2"></font></span></a></div>

<div id="foot"><font size="2"></font></div>

<div id="content">
<p class="boldhead"><font color="#333333" size="2"><br><br>A little about me.</font></p>

<p><font color="#333333" size="2">Ever since I was old enough to hold a pencil, I have been told, I loved to draw. My passions at the moment lie in experimenting with painting on fabric and combining collaged medium such as ripped fabric with more traditional media like pastel. Fascinated with the hand-made and nurtured, I love to both create characters and bring them to life. Venturing into the world of children’s book illustration is a path I’m eager to explore. </font></p>
</div>
Click to expand...
 
Last edited:
just had a look at the code on the site, wow. Why don't you split it up and link to it in external sheets, would make in neater!!

ermm basically you've got everything position absolutely, you need to position them relatively.

Roughly speaking you should be aiming towards something like this:

Code: 
	* {
	margin: 0px;
	padding: 0px;
	background:rgb(250,230,170);
	font-size:76%; 
	font-family:georgia, palatino linotype, times new roman, serif;
	height:100%; 
	
	}
	

	
	#container {
	background:url(http://hops.15.googlepages.com/bkgndhome.jpg) no-repeat center -200px;
	margin: 0 auto;
	width:800px;
	height:100%;

	
	}
	
	#head {
	
	margin: 0 auto;
	width:800px; 
	height:175px; 
background: none;
	font-size:1em; 
	border:1px solid #0fff;
 
	}
	
	#menu {
	
	background: none;
		background:url(header1.gif) no-repeat;
	
	}
	
	
	
	
	#main {
	
	margin: 0 auto;
	background:url(.gif) no-repeat center;

	height: auto;
	width: 800px;
	
	}
	
	
	p.boldhead {
	
	font-size:2.5em; 
	font-weight:bold;
	background: none;
	
	}
	
	p.content {
		font-size:2em; 
	padding:5px; text-align:justify;
	background: none;
	
	}
	
	.bold {font-weight:bold;background: none;}
	.left {float:left; margin:10px; border:1px solid #000;background: none;}
	.right {float:right; margin:10px; border:1px solid #000;background: none;}
	.lefttext {float:left; width:300px; text-align:justify;background: none;}
	.righttext {float:right; width:300px; text-align:justify;background: none;}

	
	
	#footerrelative {
	
	margin: 0 auto;
	background:url(foot.gif) no-repeat center;
	height: 75px;
	width: 800px;

	
	}
	
	#footerstatic {

	margin:auto;
    position:fixed;
    margin:auto;
    left:0;
    bottom:0;
    height:75px;
    background:red;
    width:100%;

	background:url(foot.gif) no-repeat center;
	
	}
	
	
	
	a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7, a.nav8 {
	
	width:100px;
	height:175px;
	display:block;
	float:left;
	background:url(header2.gif);
	background-repeat:no-repeat;
	text-align:center;
	font-size:1em;
	font-weight:bold;
	color:#0fff;
	text-decoration:none;
	font-family:verdana,
	arial, sans-serif;
	line-height:50px;
	overflow:hidden;
	
}

#menu a .pad {

display:block;
 width:100px;
 height:110px;
 background:transparent;
 border-bottom:1px solid #0fff;}
 
a.nav1 {background-position:0px 175px;}
a.nav2 {background-position:-100px 175px;}
a.nav3 {background-position:-200px 175px;}
a.nav4 {background-position:-300px 175px;}
a.nav5 {background-position:-400px 175px;}
a.nav6 {background-position:-500px 175px;}
a.nav7 {background-position:-600px 175px;}
a.nav8 {background-position:-700px 175px;}
 
a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {background:#f80; color:#fff; cursor:pointer; display:block; width:100px; height:50px; cursor:hand;}
a.nav2:hover {background-position:-100px 0;}
a.nav2:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav3:hover {background-position:-200px 0;}
a.nav3:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav4:hover {background-position:-300px 0;}
a.nav4:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav5:hover {background-position:-400px 0;}
a.nav5:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav6:hover {background-position:-500px 0;}
a.nav6:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav7:hover {background-position:-600px 0;}
a.nav7:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}
a.nav8:hover {background-position:-700px 0;}
a.nav8:hover .button {display:block; width:100px; height:50px; background:#0fff; color:#fff; cursor:pointer; cursor:hand;}


HTML:

Code: 
<body>
	<div id="container">
	
		<div id="head">

			<div id="menu">
			
			<a class="nav1" title="" href="" onclick="return false">
			<span class="pad"></span><span class=""></span>
			<a class="nav2" title="" href="" onclick="return false">
			<span class="pad"></span>
			<span class=""><font color="#333333" size="2"></font></span></a>
			<a class="nav3" title="Home" href="Home">
			<span class="pad"></span>
			<span class="button"><font color="#333333" size="2"></font></span></a>
			<a class="nav4" title="Portfolio" href="Portfolio">
			<span class="pad"></span>
			<span class="button"><font color="#333333" size="2"></font></span></a>
			<a class="nav5" title="About" href="About">
			<span class="pad"></span>
			<span class="button"><font color="#333333" size="2"></font></span></a>
			<a class="nav6" title="Contact" href="Contact">
			<span class="pad"></span>
			<span class="button"><font color="#333333" size="2"></font></span></a>
			<a class="nav7" href="" onclick="return false">
			<span class="pad"></span>
			<span class=""><font color="#333333" size="2"></font></span></a>
			<a class="nav8" title="" href="" onclick="return false">
			<span class="pad"></span>
			<span class=""><font color="#333333" size="2"></font></span></a>
			
			</div>
		
				</div>
		
		<div id="main">

		<p class="boldhead">Hello!</p> 
		<p class="content">Welcome to my online portfolio and thanks for dropping by!</p> 
		<p class="content">suere ipsum varius. Curabitur id est sed massa dapibus feugiat.</p> 
		<p class="boldhead">                        Kerri x</p>

		</div> 
		

		
		</div>
		
		
		<div id="footerrelative">
		
		</div>
	




</body>

There is a static and relative footer included in there depending on which you wish to use.
 
You must log in or register to reply here.
Back
Top Bottom