SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Submit button pushing footer down the page

    Hi, I have tried various CSS ways, like position :absolute, to prevent a submit button pushing a footer down the page, as in this example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
      
           
     
       <title>English</title>
       
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      	<meta name="robots" content="index, follow"/>
       <meta name="description" content=""/>
    <meta name="author" content="johnk" />
    
    <meta name="keywords" content=""/>
    
    
        
        
        <style>
          ol li {
            background-image: none;
            padding:10px;
          }
          #score{
       font-size : 14px;
       position : relative;
        bottom : 50px; 
         margin-left : 20px;     
     
        font-weight : bold;
       color :  #3399ff;
       
      }
      #footer {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 16px;
    color : #000033;
    border-top : 0 solid #cccccc;
    width : auto;
    margin-left :  20px;
    margin-bottom :  0px;
    margin-top :  10px;
    
    }
        </style>
    
      </head>
      <body>
        <div id="pagewrap"> 
          <div id="container">
            <div id="content">
               
        
           
    	  				
    
              <h4>For, since or ago?</h4>
              <div class="scroll">
                <form method="post" id="myForm" name="f">
                  <ol>
                    <li>
                   It's been raining 
                      <select name="question1">
                        <option value="na">&nbsp;</option>
                        <option value="a"> for </option>   
                        <option value="b"> since </option>
                          <option value="c"> ago </option>  
                      </select> 
                     2 hours.
                    </li>
                    <li>
                      They have lived here
                      <select name="question2">
                       <option value="na">&nbsp;</option>
                        <option value="a"> for </option>   
                        <option value="b"> since </option>
                          <option value="c"> ago </option>  
                      </select>
                     1990.
                    </li>
                    
                  </ol>
                
                 <input type="submit" id="submit" value="Result" />
                  <input type="reset" class="reset" id="reset" name="reset" value="Start again" />
                </form>
                 <div id="score"></div> 
                   <div id="footer">
                              Footer 
                </div>
              </div> 
            </div> 
          </div> 
        </div>
        
        <script>
          Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
              if (obj.hasOwnProperty(key)) size++;
            }
            return size;
          };
          
          (function(){
            "use strict";
            window.checkAnswers = function(opts){
              
              function validateInput(){
                var question,
                    answer;
                    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    answer = f.elements[question].options[f.elements[question].selectedIndex].value;
                    if(answer === "na"){
                      opts[question].state = "not-filled-in";
                    } else if(answer === opts[question].answer){
                      opts[question].state = "correct";
                    } else {
                      opts[question].state = "error";
                    }
                  }
                }
              }
              
              function markCorrectOrIncorrect(){
                var question, 
                    li;
                
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    var img = new Image(),
                    li = f.elements[question].parentElement,
                    feedbackImg = li.getElementsByTagName('img')[0];
    
                    if (feedbackImg){
                      li.removeChild(feedbackImg);
                    }
                    
                    if(opts[question].state === "correct"){
                      img.src = "http://www.littletherese.com/tick.jpg";
                      li.appendChild(img)
                    } else if(opts[question].state === "error"){
                      img.src = "http://www.littletherese.com/x.jpg";
                      li.appendChild(img)
                    }
                  }
                }
              }
              
              function displayScore(){
                var correct = 0,
                    error = 0,
                    score = document.getElementById("score"),
                    totalQuestions = Object.size(opts),
                    question;
    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    if(opts[question].state === "correct"){
                      correct ++
                    } else if(opts[question].state === "error"){
                      error ++
                    }
                  }
                }
                score.innerHTML = "You got " + correct + " out of " + totalQuestions;
              }
              
              function init(){
                validateInput();
                markCorrectOrIncorrect();
                displayScore();
              }
              
              init();
            }
          }());
    
          f.onsubmit = function(){
            checkAnswers({
              question1: {answer: "a"},
              question2: {answer: "b"},
           
            })
            return false;
          }
          
           f.reset.onclick = function(){
            location.reload();
          }
          
        </script> 
      </body>
    </html>
    I was wondering if there might be some way to make the footer stay in the same position, relative to the submit button? Thanks for any help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,779
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Why don't you just put it back in the flow and allow space for it?
    e.g.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>English</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index, follow"/>
    <meta name="description" content=""/>
    <meta name="author" content="johnk" />
    <meta name="keywords" content=""/>
    <style>
    ol{margin-bottom:0}
    ol li {
    	background-image: none;
    	padding:10px;
    }
    #score {
    	font-size : 14px;
    	margin-left : 20px;
    	font-weight : bold;
    	color :  #3399ff;
    	min-height:25px
    }
    #footer {
    	font-family : Verdana, Arial, Helvetica, sans-serif;
    	font-size : 16px;
    	color : #000033;
    	width : auto;
    	margin:10px 0 0 20px
    }
    </style>
    </head>
    <body>
    <div id="pagewrap">
    		<div id="container">
    				<div id="content">
    						<h4>For, since or ago?</h4>
    						<div class="scroll">
    								<form method="post" id="myForm" name="f">
    										<ol>
    												<li> It's been raining
    														<select name="question1">
    																<option value="na">&nbsp;</option>
    																<option value="a"> for </option>
    																<option value="b"> since </option>
    																<option value="c"> ago </option>
    														</select>
    														2 hours. </li>
    												<li> They have lived here
    														<select name="question2">
    																<option value="na">&nbsp;</option>
    																<option value="a"> for </option>
    																<option value="b"> since </option>
    																<option value="c"> ago </option>
    														</select>
    														1990. </li>
    										</ol>
    										<div id="score"></div>
    										<input type="submit" id="submit" value="Result" />
    										<input type="reset" class="reset" id="reset" name="reset" value="Start again" />
    								</form>
    								<div id="footer"> Footer </div>
    						</div>
    				</div>
    		</div>
    </div>
    <script>
          Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
              if (obj.hasOwnProperty(key)) size++;
            }
            return size;
          };
          
          (function(){
            "use strict";
            window.checkAnswers = function(opts){
              
              function validateInput(){
                var question,
                    answer;
                    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    answer = f.elements[question].options[f.elements[question].selectedIndex].value;
                    if(answer === "na"){
                      opts[question].state = "not-filled-in";
                    } else if(answer === opts[question].answer){
                      opts[question].state = "correct";
                    } else {
                      opts[question].state = "error";
                    }
                  }
                }
              }
              
              function markCorrectOrIncorrect(){
                var question, 
                    li;
                
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    var img = new Image(),
                    li = f.elements[question].parentElement,
                    feedbackImg = li.getElementsByTagName('img')[0];
    
                    if (feedbackImg){
                      li.removeChild(feedbackImg);
                    }
                    
                    if(opts[question].state === "correct"){
                      img.src = "http://www.littletherese.com/tick.jpg";
                      li.appendChild(img)
                    } else if(opts[question].state === "error"){
                      img.src = "http://www.littletherese.com/x.jpg";
                      li.appendChild(img)
                    }
                  }
                }
              }
              
              function displayScore(){
                var correct = 0,
                    error = 0,
                    score = document.getElementById("score"),
                    totalQuestions = Object.size(opts),
                    question;
    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    if(opts[question].state === "correct"){
                      correct ++
                    } else if(opts[question].state === "error"){
                      error ++
                    }
                  }
                }
                score.innerHTML = "You got " + correct + " out of " + totalQuestions;
              }
              
              function init(){
                validateInput();
                markCorrectOrIncorrect();
                displayScore();
              }
              
              init();
            }
          }());
    
          f.onsubmit = function(){
            checkAnswers({
              question1: {answer: "a"},
              question2: {answer: "b"},
           
            })
            return false;
          }
          
           f.reset.onclick = function(){
            location.reload();
          }
          
        </script>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant! I hadn't thought of the "min-height" solution! Thanks so much!


Bookmarks

Posting Permissions

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