...

View Full Version : Positioning div at the bottom of the screen and make it stay there, Help Me!



maxvee8
02-28-2008, 04:21 AM
hi im just working on something fun with googlemaps , never used it before but it quite interesting, any way i have my navigation at the bottom of the screen when the page changes resolution it moves up the page creating a big gap at the bottom i wan to lock it to the bottom of the page and make it stay there any ideas

problem layer = #footer

CSS:

<style>

*{margin:0; padding:0;}
html, body{background-color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px}

a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:active {color: #FFFFFF;}
a:hover {color: #FFFFFF; background-color: #873235; text-decoration:blink;}

#map {position: absolute; left: 0; width: 100&#37;; height: 90%; margin:90px 0 0 0;}
#header{position:relative; background-color:#000000; left: 0; height:90px; width:100%; background-image:url(images/logo.gif); background-repeat: no-repeat;}
#footer{position:absolute; bottom:0; height:100px; width:100%; background-image:url(images/footer_bg.png); background-repeat: repeat-x;}

#crime_cont{width:120px; font-size:11px; color:#1edc0a; margin:9px 0 0 0; float:left}
#area_cont{width:160px; font-size:11px; color:#1edc0a; margin:9px 0 0 1px; float:left}
#trends_cont{width:140px; font-size:11px; color:#1edc0a; margin:9px 0 0 1px; float:left}
#admin_cont{width:120px; font-size:11px; color:#1edc0a; margin:9px 0 0 1px; float:right}


.title{height:31px; line-height:31px; font-size:12px; color:#e71354; padding:0 0 0 10px; margin:0 0 1px 0; background-image:url(images/title_transbg.png); background-repeat: repeat-x; }
.section{height:59px; padding:10px; background-image:url(images/section_transbg.png); background-repeat: repeat-x; }

</style>

page:removed

i cant figure out why it wont stay solid at the bottom try resizing ure screen and scrooling to the bottom it leaves a big gap :confused:

any help apreciated max.

jcdevelopment
02-28-2008, 04:26 AM
try this



#footer{position:fixed; bottom:0; height:100px; width:100&#37;; background-image:url(images/footer_bg.png); background-repeat: repeat-x;}

maxvee8
02-28-2008, 04:30 AM
I LUV YOU .. haha never thought of fixed lol kinda self explanatry .. ACE thanks

i can now go to bed ,ahhhhh



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum