ここで div タグを使用して css テンプレートを作成しようとしています。
私がやろうとしていることは、この画像に示されています:
ただし、いくつかの問題があります。ボックス 1 をうまく機能させることができ、ボックス 2、3、4 を所定の位置に配置すると、必要な場所に配置されます。
ただし、ボックス 5 では正しい位置に移動しますが、ボックス 4 も同じ高さから開始する必要があります。この画像に示すように:
私のコードは次のとおりです。
HTMLライブデモが見つかりませんでしたが、これをコピーして貼り付けるとうまくいくはずです
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leopold Planning </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untited Document</title>
<style type="text/css">
*
{
margin: 0 auto;
}
body
{
background-image:url(background.png);
background-color:#1f54bd;
background-repeat:repeat-x;
background-attachment:fixed;
margin-top:0px;
text-align: center;
font-family:Lucinda Bright;
font-size: 14px;
}
.contain
{
width:1000px;
margin: 0 auto;
}
.info
{
width: 500px;
background-color: white;
float: right;
margin-top: 10px;
padding: 5px;
margin-right: 300px;
}
.info1
{
width: 990px;
background-color: white;
float: right;
margin-top: 10px;
padding: 5px;
}
.contact
{
width: 200px;
background-color: white;
float: right;
margin-top: 10px;
padding: 5px;
}
#navigation
{
font-size:1.2em;
width:180px;
margin-left: 0px;
margin-top: 10px;
float:left;
overflow: hidden;
}
#navigation ul
{
margin:0px;
padding:0px;
}
#navigation li
{
list-style: none;
}
ul.top-level
{
background:#ffffff
}
ul.top-level li {
border-bottom: #C0C0C0 solid;
border-width: 1px;
}
#navigation a {
color: #D4A017;
cursor: pointer;
display:block;
line-height: 25px;
text-indent: 0px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
color: #fff;
text-decoration:none;
}
#navigation li:hover {
background: #2554C7;
position: relative;
}
.contact_info
{
width:180px;
background-color: white;
float: left;
margin-top: 5px;
overflow: hidden;
}
.mainbody {
width: 500px;
background-color: white;
float:left;
margin-top: 10px;
margin-left: 10px;
overflow: hidden;
padding: 5px;
}
.phone {
width: 280px;
background-color: white;
float: right;
margin-top: 10px;
margin-left: 10px;
overflow: hidden;
padding: 5px;
}
</style>
</head>
<body>
<!-- banner removed -->
<!-- container -->
<div class="contain">
<!-- WELCOME MESSAGE -->
<div class="info1">
<h2> Welcome to Leopold Planning</h2>
<p>Thank you for visiting Leopold Planning, we hope you find what you are looking for and we are always willing to help!</p>
</div>
<!-- NAVIGATION -->
<div id="navigation">
<ul class="top-level">
<li><a id="displayText2" href="javascript:App();"><b>Planning Application</b></a></li>
<li><a id="displayText3" href="javascript:cert();"><b>Certificate of Lawfulness Applications</b></a></li>
<li><a id="displayText1" href="javascript:Appeal();"><b>Planning Appeals</b></a></li>
<li><a id="displayText" href="javascript:statement();"><b>Planning Statements</b></a></li>
<li><a href="#"><b>Site Appraisals/Stalled Sites</b></a></li>
</ul>
</div>
<!-- Main Body -->
<div class="mainbody">
<!-- top navigation -->
<div id="navigation1">
going to have three links here
</div>
</div>
<!-- main content -->
<div class="mainbody">
sadas
</div>
<!-- Phone back -->
<div class="phone">
<h3>Phone Back</h3>
<table align="center">
<form action="" method="post">
<tr><td align="left">Name:<font color="red">*</font></td><td> <input type="text" name="name_p" /></td></tr>
<tr><td align="left">Number:<font color="red">*</font></td><td> <input type="text" name="number_p" /></td></tr>
<tr><td colspan="2"><input type="submit" name="p_submit" /></td></tr>
</form>
</table>
</div>
<!-- Contact -->
<!-- Twitter -->
</div>
</div>
</div>
</div>
</body>
</html>