2 つの jsp:include ディレクティブを使用している Web ページがあります。基本的に 1 つはヘッダーで、もう 1 つはフッターです。ヘッダーとフッターが正しく配置されています。ただし、メイン ページの中央の本文は左側に配置されています。
これはページのコードです。
page.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<%@page contentType="text/html" import="java.util.*" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<jsp:include page="../top_and_left.jsp" flush="false"></jsp:include>
<div id="contenttext" align="center">
Hello World!!
</div>
<jsp:include page="../footer.jsp" flush="false"></jsp:include>
</body>
</html>
これはブラウザのコードです。「jsp:include」のおかげで、あちこちにたくさんのタグが横たわっているのがわかります。しかし、それらを削除する方法がわかりません。
「Hello World」の div タグは、ページの左端のヘッダーの後、フッター要素の前に配置されます。私のヘッダー ("top_and_left.jsp") は、名前が示すように、ページの左側にリンクがあり、上部にバナーがある「L」字型です。div タグを L 内に配置したいのですが、これはブラウザー ie8 以降では実行できますが、ie7 では実行できません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../css/style.css" type="text/css" />
<title>HireZilla</title>
</head>
<body>
<div id="page" align="center">
<div id="toppage" align="center">
<div id="date">
<div class="smalltext" style="padding:13px;"><strong>Wed Jul 27 23:14:08 IST 2011</strong></div>
</div>
<div id="topbar">
--Links in the top right corner--
</div>
</div>
<div id="header" align="center">
<div class="titletext" id="logo">
<div class="logotext" style="margin:30px">Hire<span class="orangelogotext">Z</span>illa</div>
</div>
<div id="pagetitle">
<div id="title" class="titletext" align="right" >Welcome to HireZilla!</div>
</div>
</div>
<div id="content" align="center">
<div id="menu" align="right">
<div id="linksmenu" align="center">
--Left link panel menu--
</div>
</div>
</div>
<div id="contenttext" align="center">
Hello World!!
</div>
<div id="footer" class="smallgraytext" align="center" style="margin-left:225px" >
--Footer goes here--
</div>
</div>
</body>
</html>
これは私のcssのcontenttext要素です
#contenttext{
width:608px;
background-color:#F7F7F7;
border-left:solid 1px #999999; border-right:solid 1px #999999;
border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC;
min-height:360px;
}
質問の仕方が正しいかどうかはわかりません。明確にしていただければ幸いです。
このページを css でこれ以上混雑させたくありません。見たい要素を教えていただければ、そのコードをここに貼り付けます。前もって感謝します