この演習では、メイン コンテンツ (コンテンツ 1 とコンテンツ 2) を 2 つのサイド メニューの中間に移動しようとしています。現在、主なコンテンツは 2 つのメニューの上に流れています。誰かがそれを正しく設定する方法を教えてもらえますか? ありがとうございました。
スタイル.css
body {
color: #000305;
background-image: url('images.jpg');
font-size: 87.5%;
font-family:Arial;
line-height: 1.5;
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited {
color:#CEFC3F;
}
a:hover, a:active{
background-color:#CEFC3F;
}
.body{
margin: 0 auto;
width: 90%;
clear:both;
}
.mainHeader img{
width: 100%;
height:100px;
margin:2% 0;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style:none;
margin: 0 auto;
}
.mainHeader nav ul li{
float:left;
display:inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color: #CEFC3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent{
line-height:25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content{
width:50%;
}
.subContent1{
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3% 5%;
margin-top:2%;
}
.subContent2{
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3% 5%;
margin-top:2%;
}
.leftNav{
width:16%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
}
.rightNav{
width:16%;
float:right;
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:2% 3%;
}
.footer{
width: 100%;
float:left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0 2% 0;
background-color: #666;
}
index.html
<!DOCTYPE html>
<html lang="en">
<html>
<head class="top_header">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="mainHeader">
<img src="Lighthouse.jpg"/>
<nav><ul>
<li class="active"><a href="#">My Account</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Cart</a></li>
</ul></nav>
<div class="search_tab">
<div class="search_textbox">
</div>
<div class="search_button">
</div>
</div>
</div>
<div class="mmainContent">
<div class="content">
<div class="subContent1">
<h2>Content 1</h2>
<p>Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content
Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content
Here is a sub-content Here is a sub-content
</p>
</div>
<div class="subContent2">
<h2>Content 2</h2>
<p> this is a paragraph this is a paragraph this is a paragraph this is a paragraph
this is a paragraph this is a paragraph this is a paragraph this is a paragraph
this is a paragraph this is a paragraph this is a paragraph this is a paragraph
</p>
</div>
</div>
</div>
<div class="leftNav">
<h2><a>Left Menu</a></h2>
<p>This is a left menu This is a left menu This is a left menu This is a left menu This is a left menu
This is a left menu This is a left menu This is a left menu This is a left menu
This is a left menu This is a left menu This is a left menu </p>
</div>
<div class="rightNav">
<h2><a>Right Menu</a></h2>
<p>This is a right menu This is a right menu This is a right menu This is a right menu This is a right menu
This is a right menu This is a right menu This is a right menu This is a right menu
This is a right menu This is a right menu This is a right menu This is a right menu
</p>
</div>
<footer class="footer">
<p>All Right Reserved!</p>
</footer>
</body>
</html>