Good afternoon, I'm a little new to the subject and I have a test application which has two buttons to go to the next question and to go back if you want. The fact is that I have no way to square them well because if the question is very long, they put where they want. On the other hand I would like to know if you could put two arrows on both sides of the form to do the same function. Thanks,
header{
background: #000033;
height: 70px;
color:#fff;
}
a{text-decoration: none;color: #fff;}
header p{padding-top:20px;}
footer{
background: #339966;
height: 100px;
color:#fff;
}
footer p{padding-top:50px;}
.image{
padding-top:10%;
height: 453px;
}
.intro{
margin:150px 0px 150px 70px;
}
.question{height: 342px;}
.result-logo{margin-left: 42%;margin-top:1.6%;}
.result-logo1{margin-left: 55%;}
.result-container{margin-left: 40%;margin-top:1%; color:#684B68;}
.logout{padding-top:100px;}
.next{margin-left:200px;}
.answer{color:green;font-weight: 300;font-size: larger; }
.answerw{color:#F00;font-weight: 300;font-size: larger; }
.result{height: 452px;}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!--<meta name="viewport" content="width=device-width, minimum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<script src="js/promise.min.js"></script>
<style>
.container {
margin-top: 110px;
}
.error {
color: #B94A48;
}
.form-horizontal {
margin-bottom: 100px;
}
.hide{display: none;}
</style>
</head>
<body style="background-color:#EEE">
<header>
<p class="text-center">
Bienvenid@
</p>
</header>
<div class="container question">
<div class="col-xs-12 col-sm-8 col-md-8 col-xs-offset-4 col-sm-offset-3 col-md-offset-3">
<hr>
<form class="form-horizontal" role="form" id='login' method="post" action="result.php">
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>. <?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<div id="botones">
<button id='<?php echo $i;?>' class='next btn btn-success' type='button'>Siguiente</button>
</div>
</div>
<?php }elseif($i<1 || $i<$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>. <?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<div id="botones">
<button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Anterior</button>
<button id='<?php echo $i;?>' class='next btn btn-success' type='button' >Siguiente</button>
</div>
</div>
<?php }elseif($i==$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>. <?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<div id="botones">
<button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Anterior</button>
<button id='<?php echo $i;?>' class='next btn btn-success' type='submit'>Terminar</button>
</div>
</div>
<?php } $i++;} ?>
</form>
</div>
</div>
<div class="container question">
<footer>
<p class="text-center" id="foot">
Footer
</p>
</footer>
</div>
<body>
<html>
