Ошибка HTML/СSS

Я проходил "Интерактивный онлайн курс HTML и CSS программирования и верстки сайтов для начинающих — Обучение HTML с нуля".

Результат который у меня получился: (при условии, что я остановился на разделе "5.5 Right Block. Продолжение")

file:///C:/Users/Admin/Desktop/kinomonster/index.html

Фото не удаётся прикрепить, поэтому кратко опишу суть проблемы. Блок с параметрами "Вход" отображается некорректно по отношению к блоку "Поиск". Суть проблемы состоит в том, что блок "Вход" отображается слева от блока "Поиск", а должен находиться под ним, согласно тому как это выглядит в уроке "5.5 Right Block. Продолжение".

Прилагаю код для просмотра отображения расположения блоков на странице, относительно друг друга, чтобы вы смогли наглядно лицезреть картину происходящего на сайте, отличную от картины того, что говорит предполагаемый программист в своём видеоуроке.

Код: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="description" content="Киномонстр -это сайт о фильмах" />
<meta name="keywords" content="фильм, фильмы, мультфильмы, кино, сериал, hd, кино онлайн, смотреть фильм, смотреть кино" />
<link rel="stylesheet" href=" assets/css/style.css">
</head>
<body>

<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">КиноМонстр</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="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>
<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><a href="#">Забыли пароль?</a></span> | <span><a href="#">Регистрация</a></span>
</div>

</form>
</div>

</div>

</body>
</html>

Код: style.css

* {
margin: 0;
padding: 0;
}

input[type="text"], input[type="password"], input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}

input, textarea {
outline: none;
border: none;
padding: 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: #aeb002;
}
.header {
background-color: darkslateblue;
height: 177px;
font-sie: 0.8em;
mergin-left: 0px;
mergin-right: 0px;
min-width: 900px;
}

.main, .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: 900px;
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 5px 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_container {
float: right;
width: 224px;
}

.sidebar {
float: right;
width: 224px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 10px;
background-color: #f9f9f9;
}

.btn {
padding: 8px;
background-color: white;
cursor: pointer;
}

.sidebar h2 {
color: #137cb2;
}

.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}

Дмитрий Гаранин

2 years ago

2 ответов