Reputation: 1
I bought a course, There is a lesson on the course, and I have a problem with the <div>
with the footer class. I have it on top, but it should be on the bottom of the video. When writing the code, he had no problems, I just happened. I am attaching the code and screenshots.
I have it wrong
it should be
Code html:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-size: 1.2em;
background-color: #fff;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
input[type="text"],
input[type="password"],
input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input,
textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
h1,
h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 140%
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: green;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: #000;
}
.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-right: 0px;
margin-left: 0px;
min-width: auto;
}
.mine,
.logo,
.menubar,
.site_content,
.footer {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 880px;
padding-bottom: 40px;
}
.logo h1,
.logo h2 {
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1,
.logo_text h1 a,
.logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
}
.logo_text h2 {
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar {
width: 950px;
height: 46px;
}
ul.menu {
float: right;
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 6px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #aeb002;
}
ul.menu li a:hover {
color: #e4ec04;
}
.site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_containter {
float: right;
width: 224px;
}
.sidebar {
float: right;
widows: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2 {
color: #136cb2;
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sitebar ul {
margin: 0;
}
.sitebar ul li {
list-style-type: none;
margin: 0 0 0 0;
}
.sitebar .rating_sidebar {
float: right;
}
.footer {
text-align: center;
background-color: darkslateblue;
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="description" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="asset\css\style.css">
<title>K.S</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">KinoStar</a></h1>
<h2>Кино - только для вас!</h2>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="#">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг Фильмов</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="site_content">
<div class="sidebar_containter">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос" />
<input type="submit" class="btn" value="найти">
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин" />
<input type="password" name="password_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
<div class="lables_passreg_text">
<span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span>
</div>
</form>
</div>
<div class="sidebar">
<h2>Новости</h2>
<span>31.10.2020</span>
<p>Запуск сайта на тестовом хостинге.</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li>
<li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг</a> |
<a href="#">Контакты</a>
</p>
<p>kn-st.com 2020</p>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 95
Reputation: 106
There are multiple things wrong in your code. For starters, the way you have mentioned css in link tag is wrong. This should be the correct way -
<link rel="stylesheet" type="text/css" href="asset/css/style.css">
Secondly, you wrote footer as a class for a div. Footer is an actual tag in html which is used for writing footer. I changed the entire <div class="footer", to just <footer>
.
Third, you wrote all the code in header class itself. Which means footer is never reached. So you need to keep header only till the header part, yet you included all of the sidemenu and footer in it.
I changed the code, copy paste and try it now
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-size: 1.2em;
background-color: #fff;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
input[type="text"],
input[type="password"],
input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input,
textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
h1,
h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 140%
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: green;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: #000;
}
.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-right: 0px;
margin-left: 0px;
min-width: auto;
}
.mine,
.logo,
.menubar,
.site_content,
footer {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 880px;
padding-bottom: 40px;
}
.logo h1,
.logo h2 {
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1,
.logo_text h1 a,
.logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
}
.logo_text h2 {
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar {
width: 950px;
height: 46px;
}
ul.menu {
float: right;
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 6px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #aeb002;
}
ul.menu li a:hover {
color: #e4ec04;
}
.site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_containter {
float: right;
width: 224px;
}
.sidebar {
float: right;
widows: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2 {
color: #136cb2;
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sitebar ul {
margin: 0;
}
.sitebar ul li {
list-style-type: none;
margin: 0 0 0 0;
}
.sitebar .rating_sidebar {
float: right;
}
footer {
text-align: center;
background-color: darkslateblue;
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="description" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="asset/css/style.css">
<title>K.S</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">KinoStar</a></h1>
<h2>Кино - только для вас!</h2>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="#">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг Фильмов</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
<div class="site_content">
<div class="sidebar_containter">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос" />
<input type="submit" class="btn" value="найти">
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин" />
<input type="password" name="password_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
<div class="lables_passreg_text">
<span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span>
</div>
</form>
</div>
<div class="sidebar">
<h2>Новости</h2>
<span>31.10.2020</span>
<p>Запуск сайта на тестовом хостинге.</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li>
<li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг</a> |
<a href="#">Контакты</a>
</p>
<p>kn-st.com 2020</p>
</footer>
</body>
</html>
Upvotes: 2
Reputation: 950
Your .site_content
div is inside of the header. It should be after that and before the footer like this:
<div class="main">
<div class="header">...</div>
<div class="site_content">...</div>
<div class="footer">...</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-size: 1.2em;
background-color: #fff;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
input[type="text"],
input[type="password"],
input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input,
textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
h1,
h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 140%
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: green;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: #000;
}
.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-right: 0px;
margin-left: 0px;
min-width: auto;
}
.mine,
.logo,
.menubar,
.site_content,
.footer {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 880px;
padding-bottom: 40px;
}
.logo h1,
.logo h2 {
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1,
.logo_text h1 a,
.logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
}
.logo_text h2 {
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar {
width: 950px;
height: 46px;
}
ul.menu {
float: right;
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 6px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #aeb002;
}
ul.menu li a:hover {
color: #e4ec04;
}
.site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_containter {
float: right;
width: 224px;
}
.sidebar {
float: right;
widows: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2 {
color: #136cb2;
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sitebar ul {
margin: 0;
}
.sitebar ul li {
list-style-type: none;
margin: 0 0 0 0;
}
.sitebar .rating_sidebar {
float: right;
}
.footer {
text-align: center;
background-color: darkslateblue;
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="description" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="asset\css\style.css">
<title>K.S</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">KinoStar</a></h1>
<h2>Кино - только для вас!</h2>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="#">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг Фильмов</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
<div class="site_content">
<div class="sidebar_containter">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос" />
<input type="submit" class="btn" value="найти">
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин" />
<input type="password" name="password_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
<div class="lables_passreg_text">
<span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span>
</div>
</form>
</div>
<div class="sidebar">
<h2>Новости</h2>
<span>31.10.2020</span>
<p>Запуск сайта на тестовом хостинге.</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li>
<li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг</a> |
<a href="#">Контакты</a>
</p>
<p>kn-st.com 2020</p>
</div>
</div>
</body>
</html>
Upvotes: 1
Reputation: 665
Remove height from header class
.header {
background-color: darkslateblue;
/* height: 177px; */ Remove this line
font-size: 0.8em;
margin-right: 0px;
margin-left: 0px;
min-width: auto;
}
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-size: 1.2em;
background-color: #fff;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
input[type="text"],
input[type="password"],
input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input,
textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}
h1,
h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2 {
font-size: 140%
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: green;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: #000;
}
.header {
background-color: darkslateblue;
font-size: 0.8em;
margin-right: 0px;
margin-left: 0px;
min-width: auto;
}
.mine,
.logo,
.menubar,
.site_content,
.footer {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 880px;
padding-bottom: 40px;
}
.logo h1,
.logo h2 {
font: normal 300% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1,
.logo_text h1 a,
.logo_text h1 a:hover {
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
}
.logo_text h2 {
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar {
width: 950px;
height: 46px;
}
ul.menu {
float: right;
}
ul.menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 6px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #aeb002;
}
ul.menu li a:hover {
color: #e4ec04;
}
.site_content {
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: white;
}
.sidebar_containter {
float: right;
width: 224px;
}
.sidebar {
float: right;
widows: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 5px;
background-color: #f9f9f9;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}
.sidebar h2 {
color: #136cb2;
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sitebar ul {
margin: 0;
}
.sitebar ul li {
list-style-type: none;
margin: 0 0 0 0;
}
.sitebar .rating_sidebar {
float: right;
}
.footer {
text-align: center;
background-color: darkslateblue;
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="description" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="asset\css\style.css">
<title>K.S</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">KinoStar</a></h1>
<h2>Кино - только для вас!</h2>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="#">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг Фильмов</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="site_content">
<div class="sidebar_containter">
<div class="sidebar">
<h2>Поиск</h2>
<form method="post" action="#" id="search_form">
<input type="search" name="search_field" placeholder="ваш запрос" />
<input type="submit" class="btn" value="найти">
</form>
</div>
<div class="sidebar">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="логин" />
<input type="password" name="password_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
<div class="lables_passreg_text">
<span></span><a href="#">забыл пароль?</a><span></span>|<span></span><a href="#">регистрация</a><span></span>
</div>
</form>
</div>
<div class="sidebar">
<h2>Новости</h2>
<span>31.10.2020</span>
<p>Запуск сайта на тестовом хостинге.</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Наруто</a><span class="rating_sidebar"> 10</span></li>
<li><a href="#">Dxd</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Убица гоблинов</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Моя геройская академия</a><span class="rating_sidebar"> 9.9</span></li>
<li><a href="#">Шаман Кинг</a><span class="rating_sidebar"> 9.9</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг</a> |
<a href="#">Контакты</a>
</p>
<p>kn-st.com 2020</p>
</div>
</div>
</body>
</html>
Upvotes: 0