На сайте при переходе на другие страницы смещается интерфейс?
0
На сайте при переходе на другие страницы смещается интерфейс.
Прохожу курс "html/css" на уроке 49 создавалась новая страница, при копирования главной страницы. весь контент сайта смещается. Помогите найти и исправить ошибку. ?
html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Kinomonster</title>
<meta name="description" Сайт о кино />
<meta name="keywords" фильмы,кино,онлайн/>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">КиноМонстер</a></h1>
<h2>Кино и сериалы - это наша страсть</h2>
</div>
</div>
<div class="mune_bar">
<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>
</ul>
</div>
</div>
<div class="side_content">
<div class="side_bar_container">
<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="passwordn_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 class="sidebar">
<h2>Новости</h2>
<span>08.04.2020</span>
<p>Я создаю сайт</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Топ 10 фильмов <a href="https://www.kinopoisk.ru/" target="_blank">КиноПоиск</a></h2>
<ul>
<li><a href="#">Побег из Щоушенка</a><span class="rating_sdibar">9.19</span></li>
<li><a href="#">Зелёная миля</a><span class="rating_sdibar">9.13</span></li>
<li><a href="#">Форрест Гамп</a><span class="rating_sdibar">9,01</span></li>
<li><a href="#">Список Шиндлера</a><span class="rating_sdibar">8.88</span></li>
<li><a href="#">1+1</a><span class="rating_sdibar">8.83</span></li>
<li><a href="#">Начало</a><span class="rating_sdibar">8.77</span></li>
<li><a href="#">Леон</a><span class="rating_sdibar">8.77</span></li>
<li><a href="#">Король Лев</a><span class="rating_sdibar">8.1</span></li>
<li><a href="#">Бойцовский клуб</a><span class="rating_sdibar">8.76</span></li>
<li><a href="#">Аватар</a><span class="rating_sdibar">6.9</span></li>
</ul>
</div>
<div class="sidebar">
<h2>Топ 10 фильмов <a href="https://www.imdb.com/" target="_blank">IMDb</a></h2>
<ul>
<li><a href="#">Побег из Щоушенка</a><span class="rating_sdibar">9.2</span></li>
<li><a href="#">Крёстный Отец</a><span class="rating_sdibar">9.1</span></li>
<li><a href="#">Крёстный Отец</a><span class="rating_sdibar">9,0</span></li>
<li><a href="#">Тёмный рыцарь</a><span class="rating_sdibar">9.0</span></li>
<li><a href="#">12 рaзгневанных ...</a><span class="rating_sdibar">8.9</span></li>
<li><a href="#">Список Шиндлера</a><span class="rating_sdibar">8.9</span></li>
<li><a href="#">Властелин колец: Возвращение короля</a><span class="rating_sdibar">8.9</span></li>
<li><a href="#">Криминальное чтиво</a><span class="rating_sdibar">8.9</span></li>
<li><a href="#">Хороший, плохой, злой</a><span class="rating_sdibar">8.8</span></li>
<li><a href="#"> Властелин колец: Братство кольца</a><span class="rating_sdibar">8.8</span></li>
</ul> </div> </div>
<div class="content">
<h1>Новые фильмы</h1>
<div class="films_block">
<a href="#"><img src="assets/img/matrix.png"></a>
<a href="#"><img src="assets/img/max.png"></a>
<a href="#"><img src="assets/img/inter.png"></a>
<a href="#"><img src="assets/img/cloud.png"></a>
</div>
</div>
<div class="content">
<h1>Новые сериалы</h1>
<div class="films_block">
<a href="#"><img src="assets/img/dead.png"></a>
<a href="#"><img src="assets/img/silicon.png"></a>
<a href="#"><img src="assets/img/xfiles.png"></a>
<a href="#"><img src="assets/img/breakingbad.png"></a>
</div>
<div class="posts">
<hr>
<h2><a href="#">Как снимали Интерстеллар</a></h2>
<div class="posts_content">
<p>
45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте.
</p>
</div>
<p><a href="#">читать</a></p>
<hr>
<h2><a href="#">Актер Том Хенкс поделился впечатлением о фестивале</a></h2>
<div class="posts_content">
<p> 16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии — в нашем репортаже.
</p>
</div>
<p><a href="#">читать</a></p>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг фильмов</a> |
<a href="#">Контакты</a>
</p>
<p>Kinomonster2020</p>
</div>
</div>
</body>
</html
css
*{
margin: 0;
padding: 0;
}
body{
font-size: 1.2em;
background-color: #fff;
color: #555;
}
p{
padding: 0 0 20px 0;
line-height: 1.2em;
}
input[type="text"], input[type="password"], input[type="search"] {
color: #5d5d5d;
width: 68%;
border-radius: 10px;
padding: 6px;
}
input, textarea {
outline: none;
border: none;
border: solid 1px #f2f2f2 ;
border-radius: 10px;
}
h1,h2 {
font: normal 170% 'century gothic', arial;
margin: 0 0 0 0;
padding: 0 0 5px 0;
color: #000;
}
h2{
font-size: 140%;
}
a {
outline: none;
text-decoration: none;
color: #999;
}
a:hover {
outline: none;
text-decoration: none;
color: black;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
hr {
border: solid 1px #f3f3f3/*rgba(0,49,83,0.175)*/; /*f3f3f3*/
}
.posts .posts_content{
font-size: 0.8em;
}
.header {
background-color: #003153;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.main, .logo, .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: 1.2em;
padding: 4px 0 0 0;
color: #999;
}
.menu_bar{
width: 900px;
height: 46px;
}
ul.menu {
float: right;
margin-right: 375px;
}
ul.menu li {
font-size: 1.1em;
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
}
ul.menu li a {
font: normal 90% 'trebuchet ms' , sans-serif;
display: block;
height: 20px;
padding: 6px 35px 5px 28px;
color: #fff;
text-decoration: none;
}
ul.menu li.selected a {
color: #999; /* #8A8A8A */
}
ul.menu li a:hover{
/* font-size: 1.2em; */
color: #FFAE42; /*#e4ec04*/ /*FFAE42*/
}
.side_content {
width: 915px;
overflow: hidden;;
margin: 20px auto 0 auto;
background-color: white;
}
.side_bar_container {
float: right;
width: 224px;
}
.sidebar{
float: right;
width: 224px;
padding: 6%;
margin: 0 0 16px 0;
border: solid 1px #f2f2f2;
border-radius: 15px;
background-color:rgba(0,49,83,0.175);
}
.btn {
padding: 7px;
background-color: white;
cursor:pointer;
}
.sidebar h2{
color:#003153; /*#136cd2*/
}
.lables_passreg_text {
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sidebar ul{
margin: 0;
}
.sidebar li{
list-style-type: none;
margin: 0 0 0 0;
}
.sidebar .rating_sdibar {
float: right;
}
.content {
text-align: left;
width: 640px;
padding:0 0 0 5px;
float: left;
}
.content a{
text-decoration: none;
}
.films_block {
margin-bottom: 5%;
}
.films_block img{
/*margin-left: 2px;
margin-left: 2px; */
border-radius: 5px;
border: solid 5px rgba(0,49,83,0.175); /*#dad7d5*/
width: 22.5%;
}
.footer {
width: 100%;
height: 80px;
padding: 28px 0 5px 0;
text-align: center;
background-color: #003153;
color: #a8aa94;
margin-top: 50px;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.footer a:hover{
color:#FFAE42;
text-decoration: none;
}
.footer p {
padding: 0 0 10px 0;
}
2 ответов
0
<div class="content">
<h1>Новые фильмы</h1>
<div class="films_block">
<a href="#"><img src="assets/img/matrix.png"></a>
<a href="#"><img src="assets/img/max.png"></a>
<a href="#"><img src="assets/img/inter.png"></a>
<a href="#"><img src="assets/img/cloud.png"></a>
</div>
</div>
<div class="content">Класс content один раз вроде должен использоваться.
0
Как я понял side_content смещается влево, а side_content смещается в право вот Пример ошибки, а вот как должно быть пример