0
私の4番目のセクションが他のセクションと一致しないように見えません。 何か助けや手がかりをいただければ幸いです。私は何が間違っているかについて迷っています。私は解決策に幸運を尽くそうとしているChrome Devolperツールを使いこなしています。ここでウェブサイトの1つのセクションがレイアウトに合わない
http://landonsimmons.altervista.org/School/assign7/assign7.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utc-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="img/logo.png" />
<span>Computer Science Department</span>
</header>
<nav>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Classes</a></li>
<li><a href="proglist.html">Program List</a></li>
</ul>
</nav>
<section id="left">
<ul>
<li>
<a>Computer Programming</a>
<a>Computer Specialist</a>
</li><br>
<li>
<a>Information Technology Analysis</a>
</li><br>
<li>
<a>Information Technology Management</a>
</li><br>
<li>
<a>Network System Developer</a>
</li><br>
<li>
<a>Web Development Specialist</a>
</li>
</ul>
</section>
<section id="middle">
<h1 id="hist">History of College</h1>
<p id="first">
</p>
<p>
</p>
<h1 id="comp">About Computer Science</h1>
<p>
<img id="img" src="img/Capture3.PNG" />
While the computing field is one of the fastest growing segments of industry,
it is also one of the fastest changing areas technologically. Computing professionals
education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training.
In computer theory and applications, new ideas are developed every day.
Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
</p>
</section>
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height=260 width=323 >
<source src="vid/a1.mp4"/>
</video>
</section>
<footer>
<address>
</address>
</footer>
</body>
</html>
/***********************************************
font
***********************************************/
pre {
font-family: serif;
}
#first::first-letter {
font-size: 45px;
}
#big b {
letter-spacing: 4px;
font-family: serif;
font-size: 20px;
text-align: center;
margin-left: 180px
}
#middle p {
margin-right: 5px;
margin-top: -10px;
}
#right p {
margin: 16px 30px;
}
h1 {
padding: 5px 40px;
letter-spacing: 2px;
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
}
footer address {
color: green;
font-variant: small-caps;
font-style: normal;
font-weight: bolder;
font-size: 12px;
text-align: center;
font-family: sans-serif;
}
/***********************************************
page setup
***********************************************/
body {
background-image: url(../img/parch.jpg);
display: inline-block;
max-width: 850px;
margin: 25px 8px 0 8px;
}
#left {
width: 20%;
float: left;
text-align: center;
}
#middle {
width: 40%;
border-right: 1px solid black;
border-left: 1px solid black;
display: inline-block;
}
video {
overflow: hidden;
}
#bot {
float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
vertical-align: sub;
}
#right {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
float: right;
}
#small {
width: 18%;
text-align: center;
display: inline-block;
float: left;
}
#big a {
letter-spacing: 8px;
}
#big {
width: 75%;
border-left: 1px solid gray;
display: inline-block;
padding-left: 25px;
}
#img {
max-height: 90px;
max-width: 140px;
margin: 10px 10px 10px 10px;
float: right;
}
/***********************************************
color scheme
***********************************************/
#comp {
background-color: gray;
text-align: center;
color: #872E3F;
}
#gain {
background-color: #B28570;
text-align: center;
}
#hist {
background-color: black;
color: #872E3F;
text-align: center;
}
#right {
background-color: #FFC1A2;
}
/***********************************************
Header
***********************************************/
header {
width: 100%;
height: 120px;
background-color: #000;
}
header span {
color: #D2E1FF;
font-size: 25px;
margin: 30px;
letter-spacing: 4px;
position: relative;
top: -30px;
}
/***********************************************
nav + list
***********************************************/
#left ul {
list-style: none;
padding: 0 0 0 0;
}
#left ul li a {
text-decoration: none;
color: black;
}
#small ul {
list-style: none;
padding: 0 0 0 0;
}
#small ul li a {
text-decoration: none;
color: black;
}
nav ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0 15px 0 50px;
font-weight: bold;
letter-spacing: 2px;
}
nav ul {
list-style: none;
margin: 0 0 0 0;
}
nav {
width: 100%;
height: 25px;
background-color: #0000FC;
}
nav ul li {
display: inline;
}
nav ul li a:hover {
color: red;
}
#small ul li a:hover,
#left ul li a:hover {
color: #ff6666;
outline: 1px double black;
}
/***********************************************
footer
***********************************************/
footer {
clear: right;
border-top: 1px solid black;
}
うーん...あなたの4番目のセクションは、ボットと呼ばれるものですか？もしそうなら、それは右の権利になるはずですか？ –
はい、4番目のセクションはボットですが、右側のセクションのすぐ下にあるはずですが、その代わりに、その上部と右側に大きな隙間があります。 – Landon
大丈夫、夕食から戻ってくるときにできることを私は見ていきます。 –