課題でHTMLでボタンの動きについて書いています。 htmlは出来たのですが、cssでボタンの位置を指定するコマンドなど全然学ばずにしていてよく分かりません。
プログラムのどこがおかしいのか教えてくださいお願いします。
以下が書いたhtmlとcssのプログラムです
html
<html>
<head>
<meta charset="UTF-8">
<script src="../jquery-1.10.2.min.js"></script>
<title> Light's three primary colors</title>
<link rel="stylesheet" href="newtest1.css">
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#btn1").css("background","#0000FF");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#0000FF");
$("#btn5").css("background","#0000FF");
$("#btn6").css("background","#E0E0E0");
$("#btn7").css("background","#0000FF");
$("#footer").text("blue");
});
$("#btn2").click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#FF0000");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#FF0000");
$("#btn5").css("background","#E0E0E0");
$("#btn6").css("background","#FF0000");
$("#btn7").css("background","#FF0000");
$("#footer").text("red");
});
$("#btn3").click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#8FBC8F");
$("#btn4").css("background","#E0E0E0");
$("#btn5").css("background","#8FBC8F");
$("#btn6").css("background","#8FBC8F");
$("#btn7").css("background","#8FBC8F");
$("#footer").text("green");
});
$("#btn4").click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#DA70D6");
$("#btn5").css("background","#E0E0E0");
$("#btn6").css("background","#E0E0E0");
$("#btn7").css("background","#E0E0E0");
$("#footer").text("blueviolet");
});
$("#btn5").click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#E0E0E0");
$("#btn5").css("background","#87CEEB");
$("#btn6").css("background","#E0E0E0");
$("#btn7").css("background","#E0E0E0");
$("#footer").text("skyblue");
});
$("#btn6").click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#E0E0E0");
$("#btn5").css("background","#E0E0E0");
$("#btn6").css("background","#FFFF00");
$("#btn7").css("background","#E0E0E0");
$("#footer").text("yellow");
});
$("#btn7).click(function(){
$("#btn1").css("background","#E0E0E0");
$("#btn2").css("background","#E0E0E0");
$("#btn3").css("background","#E0E0E0");
$("#btn4").css("background","#E0E0E0");
$("#btn5").css("background","#E0E0E0");
$("#btn6").css("background","#E0E0E0");
$("#btn7").css("background","#FFFFFF");
$("#footer").text("white");
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<p>Light's three primary colors</p>
</div>
<div id="block1">
<p>
<input id="btn1" class="btn" type="button" value="blue"></p>
</div>
<div id="block2">
<p><input id="btn2" class="btn" type="button" value="red"></p>
</div>
<div id="block3">
<p><input id="btn3" class="btn" type="button" value="green"></p>
</div>
<div id="block4">
<p><input id="btn4" class="btn" type="button" value="blueviolet"></p>
</div>
<div id="block5">
<p><input id="btn5" class="btn" type="button" value="skyblue"></p>
</div>
<div id="block6">
<p><input id="btn6" class="btn" type="button" value="yellow"></p>
</div>
<div id="block7">
<p><input id="btn7" class="btn" type="button" value="white"></p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
入力したcss
*{
margin:0;
padddig:0;
}
#main{
clean:both;
postition:absolite;
left:50%;
top:50%;
width:300px;
height:200px;
margin-left:-140px;
margin-top:-75px;
}
#hearder,#footer{
clear:both;
wight:300px;
text-align:center;
}
#block1,#block2,#block3#block4,#block5,#block6,#block7{
width:150p;
float:left;
text-align:justify;
text-justify:auto;
}
btn{
height:50px;
width:100px;
background: #EEE;
background: 7px solid #DDD;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
color; #111;
margin:2px 10px 0px 0px;
overflow: hidden;
outline:0px none black;
}