Я довольно новичок в программировании, и я делаю это для своего онлайн-класса в колледже. По какой-то причине мой нижний колонтитул не идет ко дну. Пропустите навигационную панель выше.
Мне также нужно больше слов, чтобы опубликовать это, поэтому я буду продолжать добавлять слова, пока они не скажут, что я в порядке. Так что да, я продолжаю говорить и говорить, и говорю хорошо, на самом деле я печатаю, а не говорю, поэтому я печатаю печатать, набирая, пока в этом посте не будет достаточно слов, потому что этот код довольно большой.
Вот мой код :
body {
background-color: #e1b382;
color: #e1b382;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: #2d545e;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
display: block;
text-align: center;
}
h1 {
padding-top: 50px;
}
nav {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
overflow: auto;
}
main nav {
display: inline-block;
float: left;
width: 198px;
float: left;
margin-left: 75px;
border: 1px solid #2d545e;
}
main nav a {
float: left;
text-decoration: none;
margin: -20px;
}
nav a {
text-decoration: none;
text-align: center;
padding: 2%;
padding: 2%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
nav a:hover {
color: #e1b382;
background-color: #2d545e;
}
.search {
text-decoration: none;
text-align: center;
font-weight: bold;
;
padding-left: calc(2%);
padding-right: calc(18%);
padding-top: 5px;
padding-bottom: 5px;
color: #2d545e;
}
.search:hover {
color: #e1b382;
background-color: #2d545e;
}
footer {
background-color: #2d545e;
font-size: .60em;
text-align: center;
font-style: italic;
padding: 1em;
display: block;
bottom: 0;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: white;
min-height: 1000px;
min-width: 900px;
max-width: 1200px;
}
main {
display: block;
color: #2d545e;
padding-top: 10px;
}
.floatright {
float: right;
margin-left: 400px;
}
ul {
list-style-type: none;
}
main li {
display: inline-block;
width: 200px;
padding-bottom: 10px;
margin: 10px;
text-align: center;
font-family: Arial, Georgia;
}
.column {
float: left;
width: 50%;
padding-bottom: 3px;
}
.row::after {
content: "";
clear: both;
display: table;
}
h2 {
padding-left: 2em;
}
.borderdiv {
float: left;
width: calc(50% - 2px);
padding-bottom: 3px;
border: 1px solid #e1b382;
}
main div div div img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px outset #e1b382
}
main div div div img:hover {
border: 1px inset #2d545e
}
main a {
color: #2d545e;
}
section {
display: block;
margin-left: 300px;
}
.bar {
display: inline-block;
margin-top: -29px;
height: 30px;
padding-left: 10px;
padding-right: 300px;
border: 1px solid gray;
}
.pic {
width: 30%;
float: left;
}
.item {
width: 70%;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ONSHOP Online Store and Shipping :: Items</title>
<link rel="stylesheet" href="research.css">
<!--Reed Wilson-->
</head>
<body>
<div id="wrapper">
<header>
<h1>ONSHOP</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="items.html">Items</a>
<a>Ordered</a>
<a>Sale</a>
<a>Saved</a>
<a>Login</a>
<a>Watchlist</a>
<a>Help</a>
<a class="search">Search</a>
</nav>
<main>
<h2 style="margin-left:25px">Items</h2>
<nav>
<ul>
<li><a>Clothes</a></li>
<li><a>Food</a></li>
<li><a>Home</a></li>
<li><a>Toys</a></li>
<li><a>Sports</a></li>
<li><a>Animal Care</a></li>
<li><a>Electronics</a></li>
<li><a>Kitchen</a></li>
<li><a>Office</a></li>
<li><a>Music</a></li>
<li><a>Toiletries</a></li>
<li><a>Filter</a></li>
</ul>
</nav>
<section>
<div>
<p class="bar">Search</p>
</div>
<div class="borderdiv">
<div class="row">
<div class="pic">
<img src="shopping-6.jpg" alt="Home">
</div>
<div class="item">
<h6>Lysol Hand Sanitizer 4 Pack</h6>
</div>
</div>
<div class="row">
<div class="pic">
<img src="shopping-3.jpg" alt="Home">
</div>
<div class="item">
<h6>Clorox Disinfecting Wipes</h6>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Copyright © 2020 Design of a Major Website<br>
<a href="mailto:reed@wilson.com">reed@wilson.com</a></p>
</footer>
</div>
</body>
</html>