← Комьюнити

Как правильно написать блочный элемент для того чтобы он разместился внизу создаваемого сайта?

Николай5 ответов
#html#css

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

вот то что я вводил для нижнего блочного элемента. 

p.s.При вводе Алексеем данных тегов, его блочный элемент сразу разместился снизу. 

<div class="footer">
<p>
<a href="#">Главная</a> |
<a href="#">Фильмы</a> |
<a href="#">Сериалы</a> |
<a href="#">Рейтинг фильмов</a> |
<a href="#">Контакты</a> |
</p>
<p>wh-db.com2015</p>

</div>

5 ответов

Принятый ответ

У вас div не закрыт от <div class="site_content"> перед footer, так нужно:

<div class="main">

    <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>

    <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="bth" 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.2020</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"> 7.5</span></li>
                    <li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 7.4</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>wh-db.com2015</p>

        </div>
</div>

В стилях ошибка для input:

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

написано passworf, а должно быть password

Также еще в стилях ошибка:

а, a:hover {
outline: none;
text-decoration: underline;
color: #aeb002;
}

Первая буква "a" написана в русской раскладке клавиатуры, должна быть в английской.

В целом еще есть ошибки, посмотрите как должно быть и сравните с вашим кодом (Показать ответ, справа сверху):

/ru/courses/html-and-css/footer-interactive/

student_Y7yoWdC7▲ 2

Покажите код полностью HTML файл и CSS файл

student_t6h_cJbE
<!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="main">

<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>

<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="bth" 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.2020</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"> 7.5</span></li>
<li><a href="#">Облачный атлас</a><span class="rating_sidebar"> 7.4</span></li>
</ul>
</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.com2015</p>

</div>
</div>

</body>
</html>
Николай
* {
margin: 0;
padding: 0;
}

body{
font-size: 1.2em;
background-color: #fff;
color: #555;
}

p {
padding: 0 0 20px 0;
line-height: 1.7em;
}

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

input, textrea {
outline: none;
border: none;
border: solid 1px #f2f2f2;
}

h1, h2 {
font: normal 170% 'century gothic', artil;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #000;
}

h2{
font-size: 140%;
}

а, a:hover {
outline: none;
text-decoration: underline;
color: #aeb002;
}

ul {
margin: 2px 0 22px 17px;
}

ul li {
margin: 0 0 6px 0;
padding: 0 0 4px 5 px;
line-height: 1.5em;
}


.header {
background-color: darkslateblue;
height: 177px;
front-size: 0.8em;
margin-left: 0px;
margin-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 {
front: 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: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1 px #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%;
}

.sidebar ul {
margin: 0;
}

.sidebar ul li {
list-style-type: none;
margin: 0 0 0 0;
}

.sidebar .rating_sidebar {
float: right;
}


.footer {
width: 100%;
height: 100px;
padding: 28px 0 5px 0;
text-align: center;
background-color: darkslateblue;
color: #a8aa94;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}

.footer a {
color: #a8aa94;
text-decoration: none;
}

.footer a:hover {
color: #fff;
text-decoration: none;
}

.footer p{
padding: 0 0 10px 0;
}
Николай

Спасибо) проблема решена)

Николай

Ваш ответ

Войдите, чтобы ответить