PDA

Click to See Complete Forum and Search --> : How to make a footer look like this?

hitman
05-26-2007, 06:13 PM
In the following picture http://i18.tinypic.com/4tkmfte.gif , the bottom has a dark background that goes behind the "text content" DIV.

I've tried to make my page look like this, but the dark bottom just displays in full under the "text content" DIV, not behind it.

Could you help me out please?
ray326
05-26-2007, 11:05 PM
You're going to have to take one of the out of the flow using something like absolute positioning.
n_alexiev
05-27-2007, 01:04 AM
You can use something like this but it depends only on your layout.
Why aint you post your source here :rolleyes:


body{
background-image:url('src.ext');
background-position:left bottom;
background-repeat:repeat-x;
}
NogDog
05-27-2007, 01:17 AM
Something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Example</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: white;
font: medium arial, sans-serif;
}
#main {
position: relative;
z-index: 2;
margin: 20px 50px;
padding: 20px;
background-color: #ff3;
color: black;
}
#foot {
position: relative;
z-index: 1;
margin: -100px 0 0 0;
padding: 105px 10px 10px;
background-color: #123;
color: white;
text-align: center;
font-size: small;
}
-->
</style>
</head>
<body>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- main -->
<div id="foot">
<p>This is the footer.</p>
</div>
</body>
</html>
WebJoel
05-27-2007, 12:31 PM
Something like this?
... Nicely done. :)
I notice though, something weird happens to the black footer when you re-size in IE (like, resize from 1024 to 800, etc). -The black footer is no longer is minus one-hundred pixels top but instead, is like -5px. -Wiggle the edge of the browser, and it re-positions -100px correctly...
It seems that IE doesn't appreciate "margin:-100px 0 0 0;". I thought IE has problems with 'negative margins' anyway.

I removed "margin:-100px 0 0 0;" and, since the DIV is position:relative anyway, used instead: top:-100px;.

This seems to work.
NogDog
05-27-2007, 03:16 PM
Nicely done. :)
I notice though, something weird happens to the black footer when you re-size in IE (like, resize from 1024 to 800, etc). -The black footer is no longer is minus one-hundred pixels top but instead, is like -5px. -Wiggle the edge of the browser, and it re-positions -100px correctly...
It seems that IE doesn't appreciate "margin:-100px 0 0 0;". I thought IE has problems with 'negative margins' anyway.

I removed "margin:-100px 0 0 0;" and, since the DIV is position:relative anyway, used instead: top:-100px;.

This seems to work.
Good catch, and seems like a good solution.
hitman
05-28-2007, 04:26 PM
wow! Thanks so much! This works absolutely great!

If each page has different height (depending on the length of the content, do I need to setup manually for each pages?
WebJoel
05-28-2007, 06:49 PM
the content, -if fluid height, should expand as content is more or less in each page.
If the footer is different heights, -then there is a design issue (a footer should be the same upon all pages, else, it isn't really a "footer"??).

No, -shouldn't have to do anything now but add content per~page :)

Myself, I'd focus upon getting the content 'placed' first, then it's punch-up time for the presentation (the CSS styling of the content). :D