html css 配置上手くいかない

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="style.css">
6<title>login page</title>
7</head>
8<body>
9<div class="frameborder1">
10<h1>ログイン</h1>
11<div class="frameborder2">
12<div class="content">
13<form action="/webkensyu/Relay"  method="get">
14<p><label>ユーザー名<input type="text" name="text1"></label></p><br>
15<p><label>パスワード<input type="text" name ="text2"></label></p>
16<button type="submit" class="button">ログイン</button><br>
17<button type="submit" class="button">ユーザー作成</button>
18</form>
19</div>
20</div>
21</div>
22</body>
23</html>

css
1
2
3.frameborder1{
4	
5	width: 500px; height: 300px;
6	border:1px  solid;
7	position: relative;
8}
9
10h1{
11	text-align: center;
12}
13	
14
15.frameborder2{
16	
17	width: 200px; height: 150px;
18	border:1px  solid;
19	
20	
21	position:absolute;
22	left:150px;
23}
24
25p{
26	 position: absolute;
27	top: 0px;
28}
29

画像のように表示したいのですが、上手くいきません。
アドバイス頂けると助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

超雑ですけど

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="style.css">
6<title>login page</title>
7</head>
8<body>
9<div class="frameborder1">
10<h1>ログイン</h1>
11<div class="frameborder2">
12<div class="content">
13<form action="/webkensyu/Relay"  method="get">
14<p><label>ユーザー名<input type="text" name="text1"></label></p>
15<p><label>パスワード<input type="text" name ="text2"></label></p>
16  <div class="button">
17<button type="submit" class="button">ログイン</button><br>
18<button type="submit" class="button">ユーザー作成</button>
19   </div>
20</form>
21</div>
22</div>
23</div>
24</body>
25</html>

css
1.frameborder1{
2
3    width: 500px; height: 300px;
4    border:1px solid;
5    position: relative;
6}
7
8h1{
9    text-align: center;
10}
11
12
13.frameborder2{
14
15    width: 200px; height: 150px;
16    border:1px solid;
17    position:absolute;
18    left:150px;
19}
20
21p{  
22    text-align:center;
23    font-size:10px;
24    border-bottom: solid 1px;
25    padding-bottom:10px;
26} 
27
28.button {
29    margin: 0 auto;
30    text-align:center;
31}
32
33button {
34    background-color: rgba(117,251,253,1);
35}
36