Почему футер уходит вверх?
0
В разделе фильмы добавил 4 фильма. Когда было 3 фильма футер стоял снизу. Как поставил 4 фильм футер ушел вверх! Помогите
3 ответов
1
Ошибся где-то в блоках или div какой-то не закрыт.
Можно исходный код посмотреть в тренажерах или скачать исходный код и сравнить со своим кодом, чтобы найти ошибку.
0
Здесь все просто, нужно просто отформатировать код, чтобы все блоки было видно, где начинаются и где заканчиваются. После форматирования я увидел, то footer не там стоял:
<div class="main">
<div class="header">
<div class="logo">
<div class="logo_text">
<h1><a href="/">Kalimasuper</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_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="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 class="sidebar">
<h2>Новости</h2>
<span>28.02.2001</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Интерстеллар</a><span class="rating_sidebar">8.1</span></li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span></li>
<li><a href="#">Безумный Макс</a><span class="rating_sidebar">9.1</span></li>
<li><a href="#">Наруто</a><span class="rating_sidebar">6.1</span></li>
</ul>
</div>
</div>
<div class="content">
<div class="info_film">
<img src="assets/img/inter.png" />
Когда засуха, пыльные бури и вымирание растений приводят человечество к продовольственному кризису, коллектив исследователей и учёных отправляется сквозь червоточину (которая предположительно соединяет области
пространства-времени через большое расстояние) в путешествие, чтобы превзойти прежние ограничения для космических путешествий человека и найти планету с подходящими для человечества условиями.
<div class="button"><a href="show.html">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/max.png" />
Преследуемый призраками беспокойного прошлого Макс уверен, что лучший способ выжить - скитаться в одиночестве. Несмотря на это, он присоединяется к бунтарям, бегущим через всю пустыню на боевой фуре, под предводительством
отчаянной Фуриосы. Они сбежали из Цитадели, страдающей от тирании Несмертного Джо, и забрали у него кое-что очень ценное. Разъярённый диктатор бросает все свои силы в погоню за мятежниками, ступая на тропу войны - дорогу
ярости.
<div class="button"><a href="#">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/matrix.png" />
Жизнь Томаса Андерсона разделена на две части: днём он - самый обычный офисный работник, получающий нагоняи от начальства, а ночью превращается в хакера по имени Нео, и нет места в сети, куда он не смог бы дотянуться. Но
однажды всё меняется — герой, сам того не желая, узнаёт страшную правду: всё, что его окружает — не более, чем иллюзия, Матрица, а люди — всего лишь источник питания для искусственного интеллекта, поработившего человечество.
<div class="button"><a href="#">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/cloud.png" />
Дневник американского нотариуса, возвращающегося из дальнего плавания, нежные письма и волшебная симфония английского композитора, художественный фильм по сценарию эксцентричного издателя, откровения девушки-клона и
примитивное постапокалиптическое существование – случайны ли параллели или «времен связующая нить» все же существует? Для того чтобы узнать, как дальше будут развиваться события, рекомендуем смотреть онлайн «Облачный атлас».
<div class="button"><a href="#">Cмотреть</a></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>kazakhstan.kz</p>
</div>
</div>
Также у тебя теги <li> были неверно закрыты:
<li><a href="#">Интерстеллар</a><span class="rating_sidebar">8.1</span><li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span><li>
<li><a href="#">Безумный Макс</a><span class="rating_sidebar">9.1</span><li>
<li><a href="#">Наруто</a><span class="rating_sidebar">6.1</span><li>Они должны были так закрываться:
<li><a href="#">Интерстеллар</a><span class="rating_sidebar">8.1</span></li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span></li>
<li><a href="#">Безумный Макс</a><span class="rating_sidebar">9.1</span></li>
<li><a href="#">Наруто</a><span class="rating_sidebar">6.1</span></li>0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>KazKino</title>
<meta name="description" content="Киномонстр - это портал о кино"/>
<meta name="keywords" content="фильм, фильмы онлайн, hd"/>
<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="/">Kalimasuper</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_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="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 class="sidebar">
<h2>Новости</h2>
<span>28.02.2001</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Интерстеллар</a><span class="rating_sidebar">8.1</span><li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8.0</span><li>
<li><a href="#">Безумный Макс</a><span class="rating_sidebar">9.1</span><li>
<li><a href="#">Наруто</a><span class="rating_sidebar">6.1</span><li>
</ul>
</div>
</div>
<div class="content">
<div class="info_film">
<img src="assets/img/inter.png">
Когда засуха, пыльные бури и вымирание растений приводят человечество к продовольственному кризису, коллектив исследователей и учёных отправляется сквозь червоточину (которая предположительно соединяет области пространства-времени через большое расстояние) в путешествие, чтобы превзойти прежние ограничения для космических путешествий человека и найти планету с подходящими для человечества условиями.
<div class="button"><a href="show.html">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/max.png">
Преследуемый призраками беспокойного прошлого Макс уверен, что лучший способ выжить - скитаться в одиночестве. Несмотря на это, он присоединяется к бунтарям, бегущим через всю пустыню на боевой фуре, под предводительством отчаянной Фуриосы.
Они сбежали из Цитадели, страдающей от тирании Несмертного Джо, и забрали у него кое-что очень ценное. Разъярённый диктатор бросает все свои силы в погоню за мятежниками, ступая на тропу войны - дорогу ярости.
<div class="button"><a href="#">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/matrix.png">
Жизнь Томаса Андерсона разделена на две части: днём он - самый обычный офисный работник, получающий нагоняи от начальства, а ночью превращается в хакера по имени Нео, и нет места в сети, куда он не смог бы дотянуться. Но однажды всё меняется — герой, сам того не желая, узнаёт страшную правду: всё, что его окружает — не более, чем иллюзия, Матрица, а люди — всего лишь источник питания для искусственного интеллекта, поработившего человечество.
<div class="button"><a href="#">Cмотреть</a></div>
</div>
<div class="info_film">
<img src="assets/img/cloud.png">
Дневник американского нотариуса, возвращающегося из дальнего плавания, нежные письма и волшебная симфония английского композитора, художественный фильм по сценарию эксцентричного издателя, откровения девушки-клона и примитивное постапокалиптическое существование – случайны ли параллели или «времен связующая нить» все же существует? Для того чтобы узнать, как дальше будут развиваться события, рекомендуем смотреть онлайн «Облачный атлас».
<div class="button"><a href="#">Cмотреть</a></div>
</div>
</div>
<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Новости</a> |
<a href="#">Рейтинг фильмов</a> |
<a href="#">Контакты</a>
</p>
<p>kazakhstan.kz</p>
</div>
</div>
</body>
</html>