Hello!
I am soo confused. I have searched google in order to learn but no success. It's about positioning elements in a relative manner...
How come that the element
<hr..> is place far to the right. I have "position: relative; left: 0px;"
the text enclosed in <p> elements "Article" and "Remove" is positioned like a stair; Article is higher up than Remove even though i don't change the realtive top-position? Shouldn't they be at the same y-coordinate? They should be on the same line.
The Save button is so far to the right as well even though left=0... Actually, I think it is the entire form that is far to the right.
WHAT IS EVERYTHING RELATIVE TO?
And there are more things about positioning. But I guess it's something fundamental I am not getting. Could anyone please tell me what it is I am not getting!? I thought this supposed to very simple. Thank you in advance!
<html>
<head>
<title>Checkbox problems</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
body {
margin-left: 175px;
margin-top: 175px;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
#dynamicInput{
position: relative; top: 0px;
position: relative; left: 0px;
}
.articleRow{
position: relative; left: 0px;
position: relative; top: 25px;
display: inline;
}
.articleCB{
position: relative; left: 25px;
display: inline;
}
.hr {
height:1px; color: #000000;
position: relative; left: 0px;
position: relative; top: 100px;
width: 200px;
}
#dynamicInput input{
border: 0px;
margin: 0px;
padding: 0px;
font-size: small;
}
#articleForm{
position: relative; left: 125px;
position: relative; top: 0px;
display: inline;
}
#articleLabel{
position: relative; left: 50px;
position: relative; top: 0px;
}
#article {
position: relative; left: 100px;
position: relative; top: 0px;
width: 200px;
}
#addArticleButton {
position: relative; left: 115px;
position: relative; top: 0px;
width: 100px;
}
.tabellVara{
position: relative; left: 125px;
position: relative; top: 0px;
border: 0px;
padding: 0px;
}
.tabellCB{
position: relative; left: 275px;
border: 0px;
padding: 0px;
}
#submitButton{
position: relative; left: 225px;
position: relative; top: 0px;
width: 100px;
}
</style>
<script type="text/javascript">
var ingred=new Array("Iron", "Zink", "Platina");
var counter = 0;
function addArticle(divName){
if(!(document.getElementById('article').value=="") && !(document.getElementById('article').value==" ")){
var newdiv = document.createElement('div');
var art = "article" + counter;
newdiv.innerHTML = "<div class='articleRow'><input id='ett' type='text' name='" + art + "' value='" + document.getElementById('article').value + "'><input class='articleCB' id='artCB' type='checkbox' name='cb" + art + "'></div>";
document.getElementById(divName).appendChild(newdiv);
counter++;
document.getElementById('ett').visibiblity="visible";
document.getElementById('article').value="";
}
}
function suggestText(id, evt){
if(evt.keyCode==13){
addArticle('dynamicInput');
id.focus();
}else if(evt.keyCode!=16){
if(evt.keyCode!=8){
var vl=id.value;
var start = id.value.length;
for(var i = 0; i<ingred.length; i++){
if(vl.toUpperCase()==ingred.substring(0, vl.length).toUpperCase()){
if(id.setSelectionRange){ //FF
id.value=ingred;
id.focus();
id.setSelectionRange(vl.length, ingred.length);
break;
}else if(id.createTextRange){ //IE
id.value=ingred;
var tR = id.createTextRange();
tR.moveStart("character", vl.length);
tR.moveEnd("character", 0);
tR.select();
id.focus();
break;
}
}
}
}
}
}
</script>
</head>
<body>
<label id="articleLabel" for="article">Add</label><input id="article" name="article" value="" onkeyup="javascript:suggestText(this, event);"><button id="addArticleButton" onClick="addArticle('dynamicInput');"> Add</button>
<span class="tabellVara"><p id="tabellart">Article</p></span><span class="tabellCB"><p id="tableCB">Remove</p><span>
<hr class="hr">
<form id="articleForm" method="POST">
<input id="submitButton" type="submit" value="Save">
<div id="dynamicInput">
</div>
</form>
</body>
</html>
Best Regards,
Niklas
I am soo confused. I have searched google in order to learn but no success. It's about positioning elements in a relative manner...
How come that the element
<hr..> is place far to the right. I have "position: relative; left: 0px;"
the text enclosed in <p> elements "Article" and "Remove" is positioned like a stair; Article is higher up than Remove even though i don't change the realtive top-position? Shouldn't they be at the same y-coordinate? They should be on the same line.
The Save button is so far to the right as well even though left=0... Actually, I think it is the entire form that is far to the right.
WHAT IS EVERYTHING RELATIVE TO?
And there are more things about positioning. But I guess it's something fundamental I am not getting. Could anyone please tell me what it is I am not getting!? I thought this supposed to very simple. Thank you in advance!
<html>
<head>
<title>Checkbox problems</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
body {
margin-left: 175px;
margin-top: 175px;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
#dynamicInput{
position: relative; top: 0px;
position: relative; left: 0px;
}
.articleRow{
position: relative; left: 0px;
position: relative; top: 25px;
display: inline;
}
.articleCB{
position: relative; left: 25px;
display: inline;
}
.hr {
height:1px; color: #000000;
position: relative; left: 0px;
position: relative; top: 100px;
width: 200px;
}
#dynamicInput input{
border: 0px;
margin: 0px;
padding: 0px;
font-size: small;
}
#articleForm{
position: relative; left: 125px;
position: relative; top: 0px;
display: inline;
}
#articleLabel{
position: relative; left: 50px;
position: relative; top: 0px;
}
#article {
position: relative; left: 100px;
position: relative; top: 0px;
width: 200px;
}
#addArticleButton {
position: relative; left: 115px;
position: relative; top: 0px;
width: 100px;
}
.tabellVara{
position: relative; left: 125px;
position: relative; top: 0px;
border: 0px;
padding: 0px;
}
.tabellCB{
position: relative; left: 275px;
border: 0px;
padding: 0px;
}
#submitButton{
position: relative; left: 225px;
position: relative; top: 0px;
width: 100px;
}
</style>
<script type="text/javascript">
var ingred=new Array("Iron", "Zink", "Platina");
var counter = 0;
function addArticle(divName){
if(!(document.getElementById('article').value=="") && !(document.getElementById('article').value==" ")){
var newdiv = document.createElement('div');
var art = "article" + counter;
newdiv.innerHTML = "<div class='articleRow'><input id='ett' type='text' name='" + art + "' value='" + document.getElementById('article').value + "'><input class='articleCB' id='artCB' type='checkbox' name='cb" + art + "'></div>";
document.getElementById(divName).appendChild(newdiv);
counter++;
document.getElementById('ett').visibiblity="visible";
document.getElementById('article').value="";
}
}
function suggestText(id, evt){
if(evt.keyCode==13){
addArticle('dynamicInput');
id.focus();
}else if(evt.keyCode!=16){
if(evt.keyCode!=8){
var vl=id.value;
var start = id.value.length;
for(var i = 0; i<ingred.length; i++){
if(vl.toUpperCase()==ingred.substring(0, vl.length).toUpperCase()){
if(id.setSelectionRange){ //FF
id.value=ingred;
id.focus();
id.setSelectionRange(vl.length, ingred.length);
break;
}else if(id.createTextRange){ //IE
id.value=ingred;
var tR = id.createTextRange();
tR.moveStart("character", vl.length);
tR.moveEnd("character", 0);
tR.select();
id.focus();
break;
}
}
}
}
}
}
</script>
</head>
<body>
<label id="articleLabel" for="article">Add</label><input id="article" name="article" value="" onkeyup="javascript:suggestText(this, event);"><button id="addArticleButton" onClick="addArticle('dynamicInput');"> Add</button>
<span class="tabellVara"><p id="tabellart">Article</p></span><span class="tabellCB"><p id="tableCB">Remove</p><span>
<hr class="hr">
<form id="articleForm" method="POST">
<input id="submitButton" type="submit" value="Save">
<div id="dynamicInput">
</div>
</form>
</body>
</html>
Best Regards,
Niklas