body{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 20%;
box-sizing: border-box;
background-color: #BDF7EC;
background-image: url('../images/flywheel.jpg');
background-size: cover;
padding: 2% 5% 2% 5%;
text-align: center;
}
h1{
text-align: center;
color: #ffffff;
text-transform: uppercase;
font-size: 150%;
}
h2{
font: bold 150% Arial, Verdana;
}
p{
font: 100% Arial, Verdana;
}
nav a{
color:#0B0B0B;
background: #f0f4f4;
display: inline-block;
width: 13%;
text-decoration: none;
padding: 1.5% 0;
text-align: center;
border-radius: 4px;
margin: 1% 5% 1% 5%;
}
.active {
background:#ffffff;
color: #111109;
}
a:hover{
background: #B3B3B3;
color: #0006CC;
}
a:focus{
background: #ff8080;
color: #ffffff;
}
a:active{
border: 3px solid #000000;
}
.left{
float: left;
width: 20%;
height: 500px;
box-sizing: border-box;
margin-right: 3%;
display: inline-block;
background: #3CA230;
text-align: center;
}
img{
display: block;
width: 60%;
border: 2px solid #000000;
margin: 0 auto;
margin-bottom: 2%;
margin-top: 2%;
}
.right{
width: 80%;
height: 500px;
box-sizing: border-box;
}
/*The table should be styled using at least four properties*/
.right table{
width: 70%;
font-family: Arial, Helvetica;
line-height: 150%;
text-align: center;
}
/*The table elements < td > should be styled using at least four properties*/
.right table td{
font-family: Arial, Helvetica;
line-height: 150%;
text-align: center;
}
/*Set the opacity of the table rows to a value between .6 and .8 (make sure it is still visible)*/
.right table tr{
background-color: #66ff66;
padding: 2%;
opacity: 0.8;
}
/*Change the opacity of a row when it is hovered over*/
.right table tr:hover{
opacity: 1;
}
/*The table headings should have a border, background color, and at least one other property.*/
/* (Are ONLY the corners of the table styled?)*/
.right table th{
border: solid #00ff00;
border-width: thin thin thick thin;
padding: 2%;
color: #ffffff;
background-color: #008000;
background-image: linear-gradient(#1aff1a, #004d00);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/*Style the table so that the text in the first column is left-aligned and the text in the other two columns is centered*/
.right table tr td:first-child{
text-align: left;
padding-left: 2%;
}
.right table tr th:first-child{
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - History</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee History</h1>
<nav>
<a href="index.html">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html" class = "active">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
<main>
<aside class = "left">
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"></a>
</aside>
<section class = "right">
<h2>Background</h2>
<p>Ultimate Frisbee/Ultimate has been around in some fashion since the 1960s. Joel Silver is credited with introducing the game to his high school in 1968 after learning about the game at summer camp. The game spread to more college campuses soon afterward.</p>
<p>The Ultimate Players Association was founded in 1979 and began organizing touraments across the country. In 2010, UPA because the <a href = "htpp://http://www.usaultimate.org/index.html">USA Ultimate</a>.</p>
<p>Other than professional tournaments, games of Ultimate are typically played without referess. Instead, players rely on "The Spirit of the Game" to encourage sportsmanship and self-officiating.</p>
<h2>Sources</h2>
<ul>
<li><a href = "https://en.wikipedia.org/wiki/Ultimate_(sport)">Ultimate (sport)</a></li>
<li><a href = "http://www.wfdf.org/">World Flying Disc Federation</a></li>
</ul>
</section>
</main>
</body>
</html>
Я не могу изменить HTML, только CSS.Я бы хотел, чтобы в заголовке не было пробела / пространства под ним (над секцией .left в стороне и .right).В настоящее время между ними существует очень очевидный разрыв, и я надеюсь, что они встретятся друг с другом.Предварительное предупреждение - я любитель в этом, первый вопрос здесь, так что базовый код был бы оценен, большое спасибо
Я проверил свои поля (нет соответствующих полей, кажется, проблема) и сделал все элементы "границей-box ", я в основном использую проценты для высоты и ширины.HTML и CSS довольно длинные, поэтому не вставили полный код, просто релевантный CSS.У HTML есть заголовок, кроме раздела с классом .left и другого раздела с классом .right.Дайте мне знать, если я пропустил то, что вам нужно, спасибо
header{
width: 100%;
height: 20%;
box-sizing: border-box;
background-color: #BDF7EC;
background-image: url('../images/flywheel.jpg');
background-size: cover;
padding: 2% 5% 2% 5%;
text-align: center;
}
.left{
float: left;
width: 20%;
height: 500px;
box-sizing: border-box;
margin-right: 3%;
display: inline-block;
background: #3CA230;
text-align: center;
}
.right{
width: 80%;
height: 500px;
box-sizing: border-box;
}