Log in

View Full Version : footer stay DOWN DAMNIT!


Anexxion
07-24-2008, 11:07 PM
how can I get an image to stay at the very bottom of a page no matter how big the monitor is or the size of the window it is in?

edit: damn, sorry, resolved again. two useless topics eh

solution: position: absolute; and bottom:0;
Nile
07-24-2008, 11:09 PM
Try this:


position: relative;
bottom: 0px;
Anexxion
07-24-2008, 11:12 PM
yeah i just did that and went to go edit my topic to put it, then i saved the edit and saw your post, lol thanks anyways :)

do you remember me nile :P
Nile
07-24-2008, 11:15 PM
Yes I do.
Anexxion
07-24-2008, 11:35 PM
crap, im having another problem, I got the image at the bottom, now I can't center it:

you can see it here: www.voigrafic.com/gamesite



<html lang="en"><head>
<title>ResEngine | Revolutionary RTS Game Engine</title>
<style type="text/css">

body {background: #222 url(http://www.voigrafic.com/gamesite/images/res_bg.gif); margin:0; padding:0; height:250px;}

#gheader {background: #fff url(http://www.voigrafic.com/gamesite/images/gheader.gif) repeat-x top; height:33px;}
.leftwing {background: transparent url(http://www.voigrafic.com/gamesite/images/leftwing.png) left; height:98px; width:120px; background-repeat:no-repeat; position:absolute; top:0px; left:0px;}
.rightwing {background: transparent url(http://www.voigrafic.com/gamesite/images/rightwing.png) right; height:98px; width:120px; background-repeat:no-repeat; position:absolute; top:0px; right:0px;}

#toppanel {background: transparent url(http://www.voigrafic.com/gamesite/images/toppanel.png) no-repeat top center; width:763px; height:65px; margin:0 auto;}
#footer {background: transparent url(http://www.voigrafic.com/gamesite/images/footer.png) no-repeat bottom center; width:763px; height:65px; margin:0 auto; bottom:0px; position:absolute;}

</style>
</head>
<body>
<div id="gheader">
<div class="leftwing">&nbsp;</div>
<div class="rightwing">&nbsp;</div>
</div>

<div id="toppanel"></div>
<div id="footer"></div>
</body>
</html>
TheJoshMan
07-25-2008, 12:16 AM
looks centered to me...
Medyman
07-25-2008, 12:26 AM
looks centered to me...

Really? What resolution are you viewing at?


@Annexion...

That's because you're using absolute positioning. Have a look at this article (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) for the proper way to do what you're trying to do.
TheJoshMan
07-25-2008, 12:35 AM
@medyman: 1280x800
Anexxion
07-25-2008, 12:41 AM
basically this is what im trying to do and im failing

(each of them are also within a way bigger container with 100% width and 100% height by the way)

if someone could recode the code I post above then that would be fantastic as this is a problem ive always had

http://i36.tinypic.com/29dv7ea.png
Anexxion
07-25-2008, 10:53 PM
anyone?
Medyman
07-28-2008, 02:00 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
width:800px;
min-height:100%;
position:relative;
margin:0 auto;
background:#eee000;
*height:100%;
}
#header {
width:100%;
background:#eee;
height:70px;
}
#content {
padding-bottom:50px; /* Height of the footer */
}
#left {
float:left;
background:#ccc;
width:49%;
}
#right {
float:right;
width:49%;
background:#ccc;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#eee;
}

/* For Aesthetics Only. Ignore. */
h1 {
margin:0;
padding:10px;
text-transform:uppercase;
font:bold 15px Arial;
}
</style>
</head>
<body>

<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<div id="left">
<div id="top"><h1>Top</h1></div>
<div id="bottom"><h1>Bottom</h1></div>
</div>
<div id="right"><h1>Right</h1></div>
<div id="footer"><h1>Footer</h1></div>
</div>
</body>
</html>