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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts

    One last problem, footer

    So I tried to get my footer to stay on the bottom of the page, while it does when there is little content, if it's large content, it does that below.
    It should stay at the bottom when I scroll the entire page. Anything I can do? Thanks

    Code:
    <div id="footer-wrap">
      <div class="footer-left">
        <p class="align-left"> &copy; 2014 RoDgame.org. All rights reserved.</p>
      </div>
    
    </div>
    Code:
    * { 
    	padding: 0; margin: 0;
    }
    body {
    	margin: 0; 	padding: 0;
    	font: normal .70em/1.6em Verdana, Tahoma, sans-serif;
    	color: #BDBDBD;
    	background: #000;
    	text-align: center;	
    }
    /* links */
    a {
    	color: #FFF;
    	background-color: inherit;
    	text-decoration: none;
    }
    a:hover {
    	color: #FFF;
    	background-color: inherit;	
    	text-decoration: underline;
    }
    
    /* headers */
    h1, h2, h3 {
    	font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;
    	color: #FFF;	
    }
    h1 { font-size: 1.6em; } 
    h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;}
    h3 { font-size: 1.3em; font-weight: bold; }
    
    p, h1, h2, h3 {
    	margin: 0;
    	padding: 10px 15px;
    }
    
    ul, ol {
    	margin: 10px 30px;
    	padding: 0 15px;
    	color: #FFF;
    }
    
    /* images */
    img {
    	border: 3px solid #555;
    }
    img.no-border {
    	border: none;
    }
    img.float-right {
      margin: 5px 0px 5px 15px;  
    }
    img.float-left {
      margin: 5px 15px 5px 0px;
    }
    a img {  
      border: 3px solid #555;
    }
    a:hover img {  
      border: 3px solid #CCC !important; /* IE fix*/
      border: 3px solid #555;
    }
    
    code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
      /* white-space: pre; */
      background: #0A1646;  
    }
    acronym {
      cursor: help;
      border-bottom: 1px solid #777;
    }
    blockquote {
    	margin: 15px;
     	padding: 0 0 0 20px;  	
      	background: #0A1646;	
    	font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
    }
    
    /* form elements */
    form {
    	margin: 10px 15px; 
    	padding: 0;
    	background: #0A1646;	
    }
    label {
    	display:block;
    	font-weight:bold;
    	margin:5px 0;
    }
    input {
    	padding: 2px;
    	border:1px solid #eee;
    	font: normal 1em Verdana, sans-serif;
    	color:#777;
    }
    textarea {
    	width: 250px;
    	padding:2px;
    	font: normal 1em Verdana, sans-serif;
    	border:1px solid #eee;
    	height:100px;
    	display:block;
    	color:#777;
    }
    input.button { 
    	margin: 0; 
    	font: bold 1em Arial, Sans-serif; 
    	border: 1px solid #CCC;
    	background: #FFF; 
    	padding: 2px 3px; 
    	color: #333;	
    }
    
    /* search form */
    .searchform form{
    	background-color: transparent;
    	border: none;
    	margin: 0; padding: 0;
    }
    .searchform input.textbox { 
    	margin: 0; 
    	width: 145px;
    	border: 1px solid #777; 
    	background: #FFF;
    	color: #333; 
    	height: 14px;
    	vertical-align: top;
    }
    .searchform input.button { 
    	margin: 0; 
    	padding: 2px 3px; 
    	font: bold 12px Arial, Sans-serif; 
    	background: #FFF;
    	border: 1px solid #f2f2f2;
    	color: #333;	
    	width: 65px;
    	vertical-align: top;
    }
    
    /***********************
    	  LAYOUT
    ************************/
    #wrap {
    	background: #212B5C url(bg.jpg) repeat-x 0 0; 
    	margin: 20px auto 0 auto;	
    	text-align: left;		
      	border-color: #444;
    	border-style: solid;
    	border-width: 1px 1px 5px 1px;	
    	height:100%;
    }	
    #wrap, #footer-wrap {
    	width: 84%;
    }
    
    /* header */
    #header {
    	position: relative;
    	height: 110px;	
    	background: #7F8082 url(header-bg.jpg) repeat-x 0% 100%;
    	border-bottom: 5px solid #444;		
    }
    #header h1#logo {
    	position: absolute;
    	top: 5px; left: 20px;
    	margin: 0; padding: 0;
    	font: bolder 50px 'Trebuchet MS', Arial, Sans-serif;
    	letter-spacing: -2px;	
    }
    #header h2#slogan {
    	position: absolute;
    	top: 50px; left: 65px;
    	color: #FFF;
    	text-indent: 0px;
    	font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif; 
    	text-transform: none;	
    }
    
    /* content-wrap */
    #content-wrap {
    	clear: both;
    	margin: 0; padding: 0;
            overflow: hidden;
    }
    
    /* box */
    .box {
    	margin: 10px 15px;			
    	border: 1px solid #0A1646;	 	
     background-image:url('test.gif');
     background-repeat: no-repeat;
    	background-position: center center;
    	background-attachment: fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    
    /* main */
    #main {
    	margin: 0 0 0 270px;		
    	padding-top: 20px;
    }
    #main .box {
    	margin-left: 0;
    }
    
    /* sidebar */
    #sidebar {
    	float: left;
    	width: 250px;
    	margin: 0;
    	padding-top: 20px; 	
    }
    #sidebar ul.sidemenu {
    	margin: 0 0 0 15px; padding: 0;	
    	background: #242424;		
    	border-top: 5px solid #444;
    }
    #sidebar ul.sidemenu li {
    	display: inline;
    	list-style: none;		
    }
    #sidebar ul.sidemenu li a {
      display: block;	
      padding: 5px 10px 5px 15px;   
      text-decoration: none;
      color: #CCC;
      font-weight: bold;  
    } 
    #sidebar ul.sidemenu li a:hover {
      color: #333;
      background: #A0A0A0;  
    }
    
    /* Footer */
    #footer-wrap { 
      position:absolute;
      bottom:0;
       width:100%;
       height:60px;
    	clear: both; 
    	color: #FFF; 
    	background: #000; 
    	margin: 0 auto; 
    	padding: 0; 
    	font-size: 88%;  		
    }
    #footer-wrap a { 
    	text-decoration: none; 
    	font-weight: bold;	
    	color: #FFF;
    }
    #footer-wrap .footer-left{
    	float: left;
    	width: 65%;	
    	padding-bottom: 20px;	
    }
    #footer-wrap .footer-right{
    	float: right;
    	width: 30%;			
    	padding-bottom: 20px;
    }
    
    /* menu tabs */
    #header ul {
    	position: absolute;
    	top: 20px; right: 20px;
    	margin:0; padding: 0;
       list-style:none;
    	font: bold 1.3em  'Trebuchet MS', Tahoma, verdana,  sans-serif;	
    	height: 2.3em;
    }
    #header li {
       display:inline;
       margin:0; padding:0;
    }
    #header a {
    	float: left;
       margin:0;
       padding:3px 10px 2px 10px;
       text-decoration:none;	
    	color: #CCC;
    }
    #header a:hover {
    	border-top: 5px solid #CCC;	
    }
    #header #current a {
       color: #FFF;
    	border-top: 5px solid #FFF;
    }
    /* end menu tabs */
    
    /* alignment classes */
    .float-left  { float: left; }
    .float-right {	float: right; }
    .align-left  {	text-align: left; }
    .align-right {	text-align: right; }
    
    /* additional classes */
    .clear {	clear: both; }
    .gray  {	color: #A0A0A0; }
    .comments { 
    	text-align: right; 
    	padding: 7px 15px;
    	margin: 20px 15px 15px 15px;
    	background: #0A1646;	 
    }
    One last problem, footer-footer.jpg
    Last edited by myfayt; 05-09-2014 at 01:19 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,290
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Because you have
    Code:
    #footer-wrap {
      position:absolute;
      bottom:0;
    The only thing I can think of is the footer is in a container inside of the body, but just getting the footer info and not the page code I can not tell.

    By the way, you have some CSS code that is just blotting your page. Here's one example:
    Code:
    #wrap, #footer-wrap {
    	width: 84%;
    }
    The width: 84%; could be added to the section above [#wrap{}]. The #footer-wrap{}, which occurs later in the CSS has
    Code:
    #footer-wrap .footer-left{
    	float: left;
    	width: 65%;
    }
    nullifying the above rule.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    myfayt (05-09-2014)

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    408
    Thanks
    2
    Thanked 32 Times in 32 Posts
    instead of position:absolute which positions within the parent element use position:fixed which positions relative to the edges of the viewport. Plus add z-index:100 to make sure the other content goes behind it during the scroll.
    Last edited by COBOLdinosaur; 05-08-2014 at 08:08 PM.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • Users who have thanked COBOLdinosaur for this post:

    myfayt (05-09-2014)

  • #4
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    Thanks guys! seems to work great.
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

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