← Комьюнити

Как убрать выделение заголовка синим цветом?

Виктор Шаповал4 ответов
#html#css

В уроке 52 при заполнении отзывов появилась синее выделение области заголовка Интерстеллар. Не получается самостоятельно найти ошибку.

<!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="/">КиноMонстр</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>07.11.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="content">

                 <h1>Интерстеллар</h1>

                 <iframe width="560" height="315" src="https://www.youtube.com/embed/xHGRCBV46ik" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                 <div class="info_film_page">
                     
                     <span class="label">рейтинг: </span><span class="value">8.1 / 10</span>
                     <span class="label">год: </span><span class="value">2014</span>
                     <span class="label">режиссёр: </span><span class="value">Кристофен Нолан</span>
                     
                 </div>

                 <hr>

                 <h2>Описание Интерстеллар</h2>
                 <div class="discription_film">
                     <img src="assets/img/inter.png">
                     Когда засуха приводит человечество к продовольственному кризису,коллектив исследователей и учёных отправляется сквозь червоточину (которая предположительно соединяет области пространства времени через большое расстояние) в путешествие,чтобы превзойти прежние ограничения для космических путешествий человекка и переселить человечество на другую планету.
                 </div>


                 <hr>
                 
                 <h2>Отзывы об Интерстеллар</h2>

                 <div class="reviews">

                    <div class="review_name">
                        Сергей
                    </div>

                 <div class="review_text">
                    Отличный фильм ,3 часа пролетели незаметно.
                 </div>


                 <div class="reviews"> 

                    <div class="review_name">
                        Дмитрий
                    </div>

                 <div class="review_text">
                    После фильма Начало, я с нетерпением ждал ещё работ от Кристофера Нолана. Интерстеллар меня впечатлил.
                 </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>
    

        

            



                
                
                
                        
    <!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="/">КиноMонстр</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>07.11.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="content">

                 <h1>Интерстеллар</h1>

                 <iframe width="560" height="315" src="https://www.youtube.com/embed/xHGRCBV46ik" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                 <div class="info_film_page">
                     
                     <span class="label">рейтинг: </span><span class="value">8.1 / 10</span>
                     <span class="label">год: </span><span class="value">2014</span>
                     <span class="label">режиссёр: </span><span class="value">Кристофен Нолан</span>
                     
                 </div>

                 <hr>

                 <h2>Описание Интерстеллар</h2>
                 <div class="discription_film">
                     <img src="assets/img/inter.png">
                     Когда засуха приводит человечество к продовольственному кризису,коллектив исследователей и учёных отправляется сквозь червоточину (которая предположительно соединяет области пространства времени через большое расстояние) в путешествие,чтобы превзойти прежние ограничения для космических путешествий человекка и переселить человечество на другую планету.
                 </div>


                 <hr>
                 
                 <h2>Отзывы об Интерстеллар</h2>

                 <div class="reviews">

                    <div class="review_name">
                        Сергей
                    </div>

                 <div class="review_text">
                    Отличный фильм ,3 часа пролетели незаметно.
                 </div>


                 <div class="reviews"> 

                    <div class="review_name">
                        Дмитрий
                    </div>

                 <div class="review_text">
                    После фильма Начало, я с нетерпением ждал ещё работ от Кристофера Нолана. Интерстеллар меня впечатлил.
                 </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>

4 ответов

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

Ошибка очень простая, не хватает закрывающего </div> перед блоком footer. Если код поправить, так получится:

<div class="main">
    <div class="header">
        <div class="logo">
            <div class="logo_text">
                <h1><a href="/">КиноMонстр</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>07.11.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="content">
            <h1>Интерстеллар</h1>

            <iframe width="560" height="315" src="https://www.youtube.com/embed/xHGRCBV46ik" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

            <div class="info_film_page">
                <span class="label">рейтинг: </span><span class="value">8.1 / 10</span> <span class="label">год: </span><span class="value">2014</span> <span class="label">режиссёр: </span><span class="value">Кристофен Нолан</span>
            </div>

            <hr />

            <h2>Описание Интерстеллар</h2>
            <div class="discription_film">
                <img src="assets/img/inter.png" />
                Когда засуха приводит человечество к продовольственному кризису,коллектив исследователей и учёных отправляется сквозь червоточину (которая предположительно соединяет области пространства времени через большое расстояние) в
                путешествие,чтобы превзойти прежние ограничения для космических путешествий человекка и переселить человечество на другую планету.
            </div>

            <hr />

            <h2>Отзывы об Интерстеллар</h2>

            <div class="reviews">
                <div class="review_name">
                    Сергей
                </div>

                <div class="review_text">
                    Отличный фильм ,3 часа пролетели незаметно.
                </div>

                <div class="reviews">
                    <div class="review_name">
                        Дмитрий
                    </div>

                    <div class="review_text">
                        После фильма Начало, я с нетерпением ждал ещё работ от Кристофера Нолана. Интерстеллар меня впечатлил.
                    </div>
                </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>
student_Cx8W3815▲ 1

Спасибо большое. Подскажите пожалуйста,как самому проще находить такие нелепые ошибки,чтобы по мелочам не отвлекать?

Виктор Шаповал
Подскажите пожалуйста,как самому проще находить такие нелепые ошибки,чтобы по мелочам не отвлекать?

Нужно считать количество открытых и закрытых тегов (div, span, p и прочих), должно получаться четное количество. Также нужно, как в курсе Сергей рекомендует, сразу писать код с отступами (с правильным форматированием). Если форматирование кода написано правильно, сразу видно где теги не закрыты.

student_Cx8W3815

Спасибо, учту на будущее.

Виктор Шаповал

Ваш ответ

Войдите, чтобы ответить
Как убрать выделение заголовка синим цветом? — FructCode | FructCode