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:
<!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"> </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"> </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.