fc_logo_w_label
FructCode
Курсы и скринкастыКомьюнитиБлогЦена и оплата
Темно
ru
ВойтиРегистрация

Как привязать footer в самый низ?

0

Как привязать footer в самый низ???

У меня проблема, у меня футер не ставится вниз.

html
css

9 ответов

0

Спасибо большое, сейчас

0

CSS:

* {
margin: 0;
padding: 0;
}

input[type="text"], [type="password"], [type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}
input, textarea {
outline: none;
border: none;
border: solid 1px #000080;
border-radius: 63px;
}
body {
background-color: #f5f5dc;
}

.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.8;
margin-right: 0px;
margin-left: 0px;
}
.logo_text h1, .logo_text h1 a {
color: white;
text-decoration: none;
padding-left: 5px;
font: 200% 'impact';
padding-top: 20px;
}
.logo_text h2, .logo_text h2 a {
color: white;
font: 150% 'impact';
padding-top: -10px;
letter-spacing: 8px;
padding-left: 11px;
}
.menu {
margin-top: -50px;
text-align: center;
}
.menu li {
display: inline;
list-style: none;
padding: 3px;
letter-spacing: 2px;
}
.menu li a {
text-decoration: none;
font: 100% 'impact';
color: white;
}
.menu li a:hover {
color: yellow;
}
.site_content {
width: 1300px;
overflow: hidden;
margin: 20px auto 0 auto;
background-color: #f5f5dc;
}
.sidebar-container {
float: right;
width: 224px;
}
.sidebar {
float: right;
width: 222px;
padding: 5%;
border-radius: 5px;
background-color: darkslateblue;
margin-top: 45px;
}
.btn {
padding: 8px;
background-color: white;
cursor: pointer;
border-radius: 63px;
}
.btn:hover {
background-color: silver;
}
.sidebar h2 {
color: white;
font: 110% 'trebuchet ms'
}
.login {
float: right;
width: 222px;
padding: 5%;
border-radius: 5px;
background-color: darkslateblue;
margin-top: 5px;
}
.login h2 {
font: 110% 'trebuchet ms';
color: white;
}
.username {
margin-bottom: 5px;
}
.lables_passreg_text a {
text-decoration: none;
color: white;
font: 80% 'trebuchet ms';
}
.lables_passreg_text a:hover {
color: yellow;
}
.news {
float: right;
width: 222px;
padding: 5%;
border-radius: 5px;
background-color: darkslateblue;
margin-top: 5px;
}
.news a, p {
color: white;
text-decoration: none;
}
.news h2 {
font: 110% 'trebuchet ms';
color: white;
}
.news a:hover {
color: yellow;
}
.news a {
font: 90% 'trebuchet ms';
letter-spacing: 2px;
}
.rating_films {
float: right;
width: 222px;
padding: 5%;
border-radius: 5px;
background-color: darkslateblue;
margin-top: 5px;
}
.rating_films li {
list-style: none;
}
.rating_films li a {
text-decoration: none;
color: white;
font: 90% 'trebuchet ms';
}
.rating_films h2 {
color: white;
font: 110% 'trebuchet ms';
}
.rating_sidebar {
padding-left: 5px;
}
.rating_films a:hover {
color: yellow;
}
.rating_sidebar {
float: right;
}
.footer {
width: 100%;
height: 70px;
padding: 28px 0 5px 0;
background-color: darkslateblue;
text-align: center;
color: white;
margin-left: 0;
margin-right: 0;
min-width: 900px;
}
.footer a {
color: white;
text-decoration: none;
}
.footer a:hover {
color: yellow;
}
.footer p {
padding-bottom: 19px;
}
.content {
text-align: left;
}
.content h1 {
font: 130% 'trebuchet ms';
padding-bottom: 20px;

}
.content a {
text-decoration: none;
}
.films_block {
margin-bottom: 5%;
}
.films_block img {
border: solid 2px darkslateblue;
border-radius: 5px;
}
.sidebar, .login, .news, .rating_films {
margin-bottom: 16px;
}
.post hr {
border: solid 1px darkslateblue;
margin-top: -10px;
}
.post h1 a {
color: black;

}
.post_content p {
color: black;
font: 100% 'trebuchet ms';
}
.post p a {
color: darkslateblue;
}
.second_post hr {
border: solid 1px darkslateblue;
}
.second_post h1 a {
color: black;
}
.second_post_content p {
color: black;
font: 100% 'trebuchet ms';
}
.second_post p a {
color: darkslateblue;
}
.posts {
width: 950px;
}

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Киномонстр-платформа для просмотра фильиов</title>
<meta name="description" content="Киномонстр-платформа для просмотра фильиов">
<meta name="keywords" content="Team-Battle,Cs:Go,Турниры Cs:Go">
<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>

<ul class="menu">
<li class="home"><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-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="login">
<h2>Вход</h2>
<form method="post" action="#" id="login_field">
<input type="text" class="username" name="username" 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="news">
<h2>Новости</h2>
<span>14.04.2020</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">Читать...</a>
</div>
<div class="rating_films">
<h2>Рейтинг фильмов</h2>
<ul>
<li><a href="#">Интерстеллар</a><span class="rating_sidebar">8,6</span></li>
<li><a href="#">Матрица</a><span class="rating_sidebar">8,6</span></li>
<li><a href="#">Безумный Макс</a><span class="rating_sidebar">7,8</span></li>
<li><a href="#">Облачный атлас</a><span class="rating_sidebar">7,7</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>
<a href="#"><img src="Assets/img/dead.png"></a>
<a href="#"><img src="Assets/img/silicon.png"></a>
</div>
<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>
<a href="#"><img src="Assets/img/dead.png"></a>
<a href="#"><img src="Assets/img/silicon.png"></a>
</div>
<div class="posts">
<div class="post">
<hr>
<h1><a href="#">Как снимали Интерстеллар</a></h1>
<div class="post_content">
<p>
45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте.
</p>

</div>
<p><a href="#">Читать...</a></p>
</div>
<div class="second_post">
<hr>
<h1>Актер Том Хенкс поделился впечатлением о фестивале</h1>
<div class="second_post_content">
<p>
<p>16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии — в нашем репортаже.</p>
</p>
</div>
<p><a href="#">Читать...</a></p>


</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>wh-db.com 2015</p>
</div>

</div>
</body>
</html>
0

Спасибо, сейчас попробую

0

А если мне хочется, сделать их разнообразными??? Что мне делать тогда ???? 

0

Дело в том, что на первой вкладке у меня всё нормально, но только потому что контент прижимает футер в самый низ, а вот на странице просмотра фильмов из-за того что контента не много футер прижат к концу  контента

0

Я ничего не понял 

0
А если мне хочется, сделать их разнообразными??? Что мне делать тогда ????

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

0

У тебя ошибка в коде. Покажи код html и код css полностью, помогу найти ошибку.

0

Вот ошибка, в <p> добавлен еще один <p>:

<p>
         <p>16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии — в нашем репортаже.</p>
</p>

В меню нужно все оборачивать в блок <div class="sidebar">, у тебя только блок поиск правильно обернут. Если вместо классов login, news, rating_films напишешь sidebar, footer встанет на место. Если блоки однообразны, без сильных отличий, имеет смысл делать один класс для них, в данном случае sidebar логично. 

У тебя есть название класса sidebar-container, лучше как в уроках называть класс, чтобы потом не запутаться.

Sign up or Log in to write an answer