Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts

    Question Positioning div at the bottom of the screen and make it stay there, Help Me!

    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:
    Code:
    <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

    any help apreciated max.
    Last edited by maxvee8; 02-28-2008 at 03:32 AM. Reason: added code

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

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

  • Users who have thanked jcdevelopment for this post:

    maxvee8 (02-28-2008)

  • #3
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    I LUV YOU .. haha never thought of fixed lol kinda self explanatry .. ACE thanks

    i can now go to bed ,ahhhhh


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •