Html удалил видимо не тот div и картинка с текстом съехала, что делать?

0

Синяя полоска(которая лежит за картинкой и названием Новые фильмы должна быть в самом низу, как и выделенные курсором названия) То есть снизу должна быть синяя линия и все данные слова(выделенные курсором), они и были там, потом я наверное удалил не тот <div> и все съехало наверх, что делать? Вот код html и фото сайта по данной ссылке https://sun2.sibirix.userapi.com/mUTiQ08gvMK3Le-iuGEigdcm8-0QwK_FV5W1Wg/qreS790Xdzk.jpg

html

<!DOCTYPE html>
<html lang="ru">
<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>
<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="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="sitebar">
<h2>Вход</h2>
<form nethod="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>31.03.2018</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="content">

<h1>Новые фильмы</h1>

<div class="films_block">

<img src="assets/img/matrix.png">




</div>

</div>

<div class="footer">
<p>
<a href="#">Главная</a> |
<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>
html
css

1 ответов

0

Вот твои ошибки:

1. Блок menubar должен входить в блок header, у тебя menubar отдельно.

2. В коде ниже пишешь вместо слова sidebar, слово sitebar:

            <div class="sitebar">
                <h2>Вход</h2>
                <form nethod="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>

3. Блок footer у тебя входить в блок site_content, а должен идти отдельно и входить в блок main.

Если исправить ошибки и верно css стили написано, все будет нормально выглядеть. Я исправил твой html код по этим 3 пунктам:

<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="btn" value="найти" />
                </form>
            </div>
            <div class="sidebar">
                <h2>Вход</h2>
                <form nethod="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>31.03.2018</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="content">
            <h1>Новые фильмы</h1>

            <div class="films_block">
                <img src="assets/img/matrix.png" />
            </div>
        </div>
    </div>

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

Здесь есть полный интерактивный пример (нажми показать ответ справа сверху):

https://fructcode.com/ru/courses/html-and-css/footer-interactive/

Sign up or Log in to write an answer