Q&A
Copyrightが付いていますが問題ないですか？あるなら急いで消したほうが良いです。。。
外部ファイルからcssを呼び込む時のレイアウトについての質問です。
jspページは現在作成しているwebアプリケーションシステムとなります。
環境としては、
OS：Windows7
ブラウザ：IE
エクリプス：3.6
トムキャット：7.0
HTML：4.01
動的webプロジェクトでプロジェクトを作成中
となります。
①ここから
<%@ page language="java" contentType="text/html; charset=Shift_JIS"
pageEncoding="Shift_JIS"%>
</td> </tr> <tr id="footer"><td> <div id="footer"> 20150405 </div> </td></tr> </table> </body> </html><div style="margin:120px 0;"> <a href="ListSrv"><font size="8pt">映画一覧</font></a> <div style="margin-top:50px"><a href="BookSrv"><font size="8pt">映画登録</font></a></div> </div> <div id="login"> <form action="LoginSrv" method ="post" name = "form_top" onSubmit="return check();"> ユーザID：<input type="text" name="id" size="10"><br> パスワード：<input type="password" name="ps" size="10"> <br> <input type="submit" value="ログイン"> </form> </div> <!-- 内容ココマデ -->
①ここまでです。
②ここから
<%@ page language="java" contentType="text/html; charset=Shift_JIS"
pageEncoding="Shift_JIS"%>
<%@ page import="java.util." %>
<%@ page import="java.io." %>
<%@ page import="bean.BookBean" %>
<%@ page import="operator.*" %>
</td> </tr> <tr id="footer"><td> <div id="footer"> 20150405 </div> </td></tr> </table> </body> </html><div id="listAll"> <div id="search"> <% List<BookBean> list_ = (ArrayList<BookBean>)session.getAttribute("GENRESERCH_LIST"); %> <form name = "form_serchList" method ="post" action ="BookSrv" > <!-- ここから--> ジャンル <select name="genreSerch"> <option value="all">全て</option> <%for(BookBean bbean:list_) { %> <option value=" <%=bbean.getId()%>"><%= bbean.getGenre() %></option> <%} %> </select> <input type = "hidden" name = "serch" value = "serch"> <input type="submit" value="絞り込み"> <!-- ここまでのレウアウトを崩さずに --> </form> </div> <% List<BookBean> list = (ArrayList<BookBean>)request.getAttribute("BOOK_LIST"); %> <%if(list.size() == 0){%> <br> <div id="msg" style="padding:5px;font-size:140%;color:red;"><h1>映画情報はありません</h1></div> <br> <%}%> <%String error = (String)request.getAttribute("error");%> <%if(error != null){%> <font size = "5"><%=error %></font> <%}%> <table summary="regist" id="list" > <tr class ="title"> <td width="80px">名前</td> <td width="70px">ジャンル</td> <td>公開日</td> <td >人気</td> <td width="40px">BD在庫</td> <td width="100px">コメント</td> <td></td> </tr> <%CharOperator co = new CharOperator(); %> <%for(BookBean bbean:list){ %> <tr class ="sample" > <td><%= co.replace(bbean.getName()) %></td> <td><%= co.replace(bbean.getGenre()) %></td> <td><%= bbean.getReleaseDay() %></td> <td width="110px" > <% int i = 1; %> <% int j = bbean.getPopularity(); %> <% while(i <= j){ %> ★ <% i++; %> <%}%> </td> <td> <%if("1".equals(bbean.getStock())){%> あり <%}else if("0".equals(bbean.getStock())){ %> _ <%}%> </td> <td><%= co.replace(bbean.getComment()) %></td> <td> <form method="post" name="form_delete" action ="ListSrv"> <input type="submit" value="削除" onclick="return deleteList()" style="margin:2px; float:left;"> <input type="hidden" name="id" value="<%=bbean.getId()%>"> </form> <form method="post" name="form_update" action ="UpdateSrv" style="margin:2px; float:left;"> <input type="submit" value="更新" > <input type="hidden" name="id" value="<%=bbean.getId()%>"> </form> </td> </tr> <% } %> </table> </div> <!-- 内容ココマデ -->
②ここまでです。
以下が現在外部ファイルから読み込んでいるcssになります。
- {
margin: 0;
padding: 0;
font-family: "Verdana";
}
html,body{
height:100%;
}
a:hover{
background-color: #ccf;
}
a:link,a:visited,a:hover,a:active{
color: #00f;
}
th {
padding-top: 5px;
text-align: left;
}
#contents {
height: 100%;
width: 100%;
border-collapse: collapse;
}
tr#header, tr#footer {
height: 25px;
}
div#header{
background-color: #666;
height: 27px;
padding: 5px;
}
div#header *{
color: #fff;
}
#body td {
padding: 5px 10px;
}
#footer {
height: 27px;
padding: 5px;
text-align: center;
background-color: #666;
color: #fff;
bottom:0;
}
table#list {
border-collapse: collapse;
}
table#list td{
padding: 5px 20px;
}
tr.title{
font-weight: bold;
font-size: 120%;
background-color: #3CB371;
color: #fff;
}
tr.odd{
background-color: #CCFFCC;
}
div#login {
border-style: solid ;
border-width: 1px;
border-color: #ccc;
background-color: #CCFFCC;
padding: 20px;
text-align:right;
margin-left: 1120px;
border: 1px solid #ccc;
border-left: 1px double #999;
}
#resist {
border-collapse: separate;
border-spacing: 0px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; margin: 10px;
}
#resist th{
padding:4px;
text-align: left;
vertical-align: top;
color: #444;
background-color: #CCFFCC;
border-left: 1px double #999;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#resist td{
padding:8px;
background-color: #fafafa;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
div#listAll {
width: 64%;
}
#search {
padding: 20px;
margin-left:600px;
text-align:right;
}
tr.sample:nth-child(2n+1) {
background-color: #CCFFCC;
}
cssは外部ファイルですのでこのまま表示してもレイアウトが崩れてしまいます。ソースだけを公開するという無礼をお許しください。
質問なのですが、３つあります。
一つ目は①のjspページ表示についてです。画面には問題なく表示されますが、ブラウザの横幅を狭めた時、映画一覧リンクと映画登録リンクが隠れてしまいます。ブラウザの横幅に関わらず、映画一覧リンクと映画登録リンクを画面の真ん中に表示させたいのですが････
二つ目は②のjspページ内にあります、ヘッダーの下の部分からのジャンル・ジャンルプルダウン・絞込みボタンですが、これまた画面を狭めた場合、プルダウンは固定されていますが、ジャンルという表記と絞込みボタンが動いてしまいます。こちらもジャンル・ジャンルプルダウン・絞込みボタンを一まとめとしたいのです。
三つ目ですが、同じく②のjspについて、別のページ内で登録したジャンルや映画名、そのコメントを表示するのですが、長い映画名やジャンル、コメントが入力された場合について、一定の文字数で改行させるといった事を実装したいのですが、可能なのでしょうか？
あまりにもcssについての知識が欠如しており大変申し訳ないのですが、どなたか教えて頂けないでしょうか？どこか1つ、或いは方向性といった事でもとても有り難いです。よろしくお願い致します。
回答1件
0
ベストアンサー
一つ目は①のjspページ表示についてです
ちゃんとページの真ん中に表示されてますよ？
ただし、margin-left: 1120px;があるため、
ブラウザを小さくしても実際の幅は大きいままなのでスクロールが出てしまいます。
結果として、スクロールバーが左に寄っているので右にあるように見えてしまいます。
二つ目は②のjspページ内にあります
#search のレイアウト幅に指定がない為です。
<td width="100px">と記述があるので100pxを超えてしまうと 勝手に改行されてしまうと思いますがいかがでしょうか？三つ目ですが、同じく②のjspについて
投稿2015/04/05 06:09
編集2015/04/05 06:27総合スコア187
あなたの回答
tips
プレビュー
