Q&A
「CSS」として質問したいのでしたらjspではなくブラウザに表示されたhtmlを提示してください。
初めまして。
現在HTMLの学習をしているものです。
現在、ログインフォームを作成したのですが、写真のように入力フォームとログインボタンがずれてしまいます。
私としては、「パスワード」の文字の下にログインボタンの左端が来るようにして、入力フォームとボタンの左端でそろえたいのですが、うまくいきません。
なぜ、このようになってしまうのか、どのようにすればこの状態を解決できるのか、教えていただけると嬉しいです。
どうぞよろしくお願いいたします。
私のソースコード
css
1@charset "UTF-8"; 2.header{ 3 top:0; 4 left:0; 5 float:left; 6 position:fixed; 7 height:100px; 8 width:100%; 9 background-color:#808080; 10 padding:10px; 11} 12.header_logo{ 13 float:left 14} 15.header-logo{ 16 padding-top:10px; 17} 18.header_logo_font{ 19 color:white; 20} 21.center{ 22 align:center; 23} 24 25.login{ 26 float:left; 27 margin-left:625px; 28} 29 30li{ 31 padding:30px; 32 list-style:none; 33 float:left; 34} 35footer{ 36width: 100%; 37position: absolute; 38bottom: 0; 39} 40.break{ 41 line-height:40px; 42} 43.body{
JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@ page import="exam.LoggerTester" %> 4<% request.setCharacterEncoding("UTF-8"); %> 5<% String loginErrorMessage = (String)request.getAttribute("loginErrorMessage"); %> 6<!DOCTYPE html> 7<html> 8 <head> 9 <meta charset="UTF-8"> 10 <title>書籍管理システム-＜ログイン＞</title> 11 <link rel="stylesheet" href="header.css"> 12 </head> 13 14<div class="container"> 15 <header> 16 17<div class="header"> 18<div class="header_logo_font"> 19<p>書籍管理システムログイン</p> 20</div> 21</div> 22 23<hr> 24</header> 25 <body> 26 27 <% 28 LoggerTester lt = new LoggerTester(); 29 lt.outActionLog("login.jsp", "処理開始"); 30 %> 31 32 <div class="body"> 33 <div class="content"> 34 <div align="center"> 35 <table border="0"> 36 <form action="Login" method="POST"> 37 38 <div class="break"> 39 <font color="#fff">空欄作成のために使用。画面に映りません。</font> 40 </div> 41 42 <div class="break"> 43 <font color="#fff">空欄作成のために使用。画面に映りません。</font> 44 </div> 45 46 <center> 47 <% if(loginErrorMessage != null){ %> 48 <p><font color="red"><%= loginErrorMessage %></font></p> 49 <%} %> 50 </center> 51 <div class="break"> 52 <font color="#fff">空欄作成のために使用。画面に映りません。</font> 53 </div> 54 55 <p>ユーザーID 56 <input class="center" type="text" name="loginid" value="" size="24"> 57 <p>パスワード 58 <input class="center" type="password" name="userpassword" value="" size="24"> 59 <br><br> 60 <input class="login" type="submit" name="login" value="ログイン"></div> 61 62 63 </form> 64 </table> 65 66 </div> 67 </div> 68 </div> 69 70 71 </body> 72 73</div> 74</html>
回答1件
0
ベストアンサー
ボタンの input の後の div タグに応じたオープンタグがありませんからうまく揃えないと思います。
html
1 <div> <!-- このdivタグはありませんでした --> 2 <p>ユーザーID 3 <input class="center" type="text" name="loginid" value="" size="24"> 4 <p>パスワード 5 <input class="center" type="password" name="userpassword" value="" size="24"> 6 <br><br> 7 <input class="login" type="submit" name="login" value="ログイン"> 8 </div> <!-- このdivのオープンタグはありませんでした -->
コードにHTML標準にあってないところがありますので、紹介したいと思います。
html
1<div class="container"> 2 <header> 3 </header> 4 <body> 5 </body> 6</div>
この構成は標準にあっていません。div.container は body タグが含めません。mainタグを使ってください。
html
1<div class="container"> 2 <header> 3 </header> 4 <main> 5 </main> 6</div>
コードがモダンになれる点を紹介したいと思います。
センタリング
html
1<div align="center"> 2 <table border="0"> 3 <form> 4 </form> 5 </table> 6</div>
formをセンターにしたい時は、widthを決めてmargin: auto;をつけてください。
html
1<form style="width: 35em; margin: auto;"> 2</form>
空欄
html
1<div class="break"> 2<font color="#fff">空欄作成のために使用。画面に映りません。</font> 3</div> 4<div> 5</div>
css
1.break{ 2 line-height:40px; 3}
この方法に敬意を払いたいが、marginを用いたら楽になります。
html
1<div style="margin-top: 40px"> 2</div>
投稿2020/07/08 09:33
編集2020/07/08 10:03
総合スコア464
ご回答ありがとうございます。
空欄作成の方法、非常に画期的でした。ありがとうございます。
しかし、以下のようなソースコードに修正してみたのですが、ログインボタンの位置が動きません。どこでつまずいているのか、ご教授いただければ幸いです。
申し訳ございませんが、どうぞよろしくお願いいたします。
----
＜css＞
@charset "UTF-8";
.header{
top:0;
left:0;
float:left;
position:fixed;
height:100px;
width:100%;
background-color:#808080;
padding:10px;
}
.header_logo{
float:left
}
.header-logo{
padding-top:10px;
}
.header_logo_font{
color:white;
}
.center{
align:center;
}
.loginbtn{
float:left;
margin-left:625px;
}
li{
padding:30px;
list-style:none;
float:left;
}
footer{
width: 100%;
position: absolute;
bottom: 0;
}
.main{
----
<jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="exam.LoggerTester" %>
<% request.setCharacterEncoding("UTF-8"); %>
<% String loginErrorMessage = (String)request.getAttribute("loginErrorMessage"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>書籍管理システム-＜ログイン＞</title>
<link rel="stylesheet" href="header.css">
</head>
<div class="container">
<header>
<div class="header">
<div class="header_logo_font">
<p>書籍管理システムログイン</p>
</div>
</div>
<hr>
</header>
<main>
<%
LoggerTester lt = new LoggerTester();
lt.outActionLog("login.jsp", "処理開始");
%>
<div class="main">
<div class="content">
<div align="center">
<table border="0">
<form action="Login" method="POST">
<div style="margin-top: 100px">
</div>
<center>
<% if(loginErrorMessage != null){ %>
<p><font color="red"><%= loginErrorMessage %></font></p>
<%} %>
</center>
<div>
<p>ユーザーID
<input class="center" type="text" name="loginid" value="" size="24">
<p>パスワード
<input class="center" type="password" name="userpassword" value="" size="24">
<br><br>
<input class="loginbtn" type="submit" name="login" value="ログイン">
</div>
</form>
</table>
</div>
</div>
</div>
</main>
</div>
</html>
どういうわけか、ログインボタンの部分だけ
.loginbtn{
float:left;
margin-left:625px;
}
のmargin-left:625px;の数字を大きくしてもボタンが動いてくれずに困っております。。。。。
floatが必要ないと思いますが、margin-leftで動いてくれないとおかしいですね。どのブラウザーを使っていますか？FirefoxかChromeではInspectorで要素に掛けてるCSSのどっちが有効か見えるのでおすすめです。
floatを削除し、margin-leftだけにしたところ無事に動きました！お手数をおかけしました。ありがとうございました。ちなみにChromeを使用しています、Inspectorについても、調べてみます。ありがとうございます。
お役に立てて幸いです。
また機会がございましたらどうぞよろしくお願いいたします。
ありがとうございました。
あなたの回答
tips
プレビュー
