Не могу установить Footer

0
2

Облазил весь интернет, ни чего не понимаю...В чем может быть проблема? Футер не получается сделать по середине, он получается у меня справа в блоке...хелп http://skrinshoter.ru/s/021118/geDPD1yR 

Мой Код HTML 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documentt</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 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="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>02.11.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.3</span></li>
<li><a href="#">Безумный макс</a><span class="rating_sidebar">8.5</span></li>
<li><a href="#">Облочный атлас</a><span class="rating_sidebar">8.2</span></li>


</ul>
</div>

<footer>
<nav>
<a href="#"> Сайт</a> | 
<a href="#"> Фильмы</a> | 
<a href="#"> Сериалы</a> | 
<a href="#"> Контакты</a> | 
<a href="#"> Главная</a> | 
</nav>
</footer>


</div>

</div>

</div>
</div>

</body>
</html>




Мой CSS

*{
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="password"], input[type="search"] {
color: #5d5d5d;
width: 60%;
padding: 8px;
}

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

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

h2 {
font-size: 140%;
}

a, 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 5px;
line-height: 1.5em;
}

.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}

.main, .logo, .menubar, .site_content {

margin-left: auto;
margin-right: auto;
}

.logo {
width: 880px;
padding-bottom: 40px;
}

.logo h1, .logo h2 {
font; normal 500% 'century gothic', arial, sans-serif;
margin: 0 0 0 9px;

}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {

padding: 50px 0 0 0;
color: #fff;
font-size: 50px;
letter-spacing: 0;
text-decoration: none;

}

.logo_text h2 {
font-size: 1em;
padding: 4px 0 0 0;
color: #999;
}

.menubar {
width: 900px;
height: 46;
}

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: 120px auto 0 auto;

}

.sidebar_container {
float: right;;
width: 224px;
}

.sidebar {
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
border: solid 1px #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.9em;
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: auto;
background: black;
margin: 0 auto;
text-align: center;
padding-top: 25px;
margin-left: 92px;
}

 

Владимир Плужник

11 months ago

Похожие вопросы

12 ответов





Если footer тэгом прописывайте, то из css стилей у класса footer нужно убрать точку, то есть так:

footer{
    width: 100%;
    height: auto;
    background: black; 
    margin: 0 auto;
    text-align: center;
    padding-top: 25px;
    margin-left: 92px;
}

student_G0lztEyB

11 months ago

Не помогло

Владимир Плужник

11 months ago

Всё так же и осталось, только добавился черный фон...

Владимир Плужник

11 months ago

Может проще в исходнике посмотреть и сравнить с кодом?

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

Кнопка "Показать ответ "

student_BUOPPsrj

11 months ago

я так делал, вроде всё тоже сделал, а просто копировать код нет смысла, ибо не понял свою ошибку

Владимир Плужник

11 months ago

Владимир, здравствуйте!

Согласен, что копировать код иногда не стоит, пока самостоятельное не поймешь где ошибся.

Дам несколько рекомендаций, о которых я говорю в своих курсах и дублирую через email-рассылку.

У большинства студентов, которые никогда не программировали или мало программировали, возникают одни и те же ошибки в коде - забывают закрыть html-тег или в css-стилях пропускают ; и вся верстка разваливается.

Часто такое происходит не потому что студент невнимательный, а из-за того, что не использует форматирование кода. Лучше сразу приучать себя ставить табами отступы внутри html-тегов:

<div class="someclass">
    <p>Hello!</p>
</div>

и даже когда вложенных div становится много, их легко можно подсчитать: Div открылся, Div закрылся, и если где-то забыли закрыть Div, его сразу будет видно при правильном форматировании кода, как в примере ниже:

<div class="someclass">
    <div>
        <p>Hello!</p>
    
</div>

Лучше на первом этапе задержитесь на этом задании и постарайтесь найти ошибку. Это для вас будет огромным плюсом по следующим причинам:

1. Вы запомните основные конструкций языка HTML-разметки / CSS-стилей (в дальнейшем и конструкции языков программирования)

Вы будете достаточно должно смотреть на написанный вами код и приводить его в порядок (форматирование), тег за тегом, пока все не станет аккуратным и не заработает.

Когда вы долгое время работаете с кодом, вы запоминаете и привыкаете к конструкциям верстки и так вы получаете опыт. 

Я не знаю для чего вы именно хотите изучить веб-программирование (хотите создать ваш собственный веб-сайт/сервис или хотите в последствии найти работу веб-разработчиком), но программисты постоянно ищут ошибки в своим коде или разбираются с кодом других разработчиков и это очень полезный навык для программиста. Даже в вакансиях в требованиях пишут про навык "Умение разбираться в чужом коде".

2. Вы научитесь решать простые задачи веб-разработчика

Типовые ошибки (не закрыли div, не поставили точку с запятой) и таким образом вы уже в ближайшем будущем получите очень полезный навык - умение решать пускай пока не слишком сложные, но самые настоящие задачи Frontend-разработчика/веб-разработчика. И возможно следующую такую задачу, вы будете решать уже за деньги, например на бирже фриланс. 

Сергей Никонов

teacher

11 months ago

Спасибо вам за наставление , я ценю ваши советы!) 

учу язык для себя, мне это интересно и кажется что в будущем пригодится.

я сразу привык нажимать TAB , но что делать если div слишком много? Как у меня в коде, их уже трудно посчитать и понять все ли на месте, по крайней мере для меня - новичка.

Я сразу подумал что где то забыл закрыть строчку кода, но вот не задача, везде закрыт код... Я не знаю где я мог ошибиться , мне переписывать код чтоли ?(((

Владимир Плужник

11 months ago

В Sublime Text 3 есть с левой стороны (где номера строк кода) стрелки (если навести на номера строк кода) и каждый открывающий и закрывающий тег можно сворачивать в блоки. 

 

***

я сразу привык нажимать TAB , но что делать если div слишком много? Как у меня в коде, их уже трудно посчитать и понять все ли на месте, по крайней мере для меня - новичка.

***

Начните с самого верха с тега head и отформатируйте внутри тега head строки, чтобы из этого:

<head>
<meta charset="UTF-8">
<title>Documentt</title>
<meta name="description" content="Киномонстр - это портал о кино" />
<meta name="keywords" content="фильмы, фильмы онлайн, кино,hd" />
<link rel="stylesheet" href="assets/css/style.css">
</head>

у вас получилось это:

<head>
    <meta charset="UTF-8">
    <title>Documentt</title>
    <meta name="description" content="Киномонстр - это портал о кино" />
    <meta name="keywords" content="фильмы, фильмы онлайн, кино,hd" />
    <link rel="stylesheet" href="assets/css/style.css">
</head>

Пользуйтесь стрелками, о которых я говорил выше - это немного упростит задачу. 

Это ужасно скучно, согласен, но только так вы научитесь верстать, потом программировать и создавать сложные веб-сайты! И потом за пять секунд поймете, где у вас не закрыты теги.

Сергей Никонов

teacher

11 months ago

Перебрал весь код, не смог найти ошибки, везде вроде всё закрыто, div тоже расставлены верно, может кто ни будь пальцем указать мне на ошибку? 

Владимир Плужник

11 months ago

Написал комментарии в вашем коде, где ошибки разметки:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documentt</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 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 от header ниже -->
        </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>02.11.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.3</span></li>
                            <li><a href="#">Безумный макс</a><span class="rating_sidebar">8.5</span></li>
                            <li><a href="#">Облочный атлас</a><span class="rating_sidebar">8.2</span></li>
                        </ul>
                    </div>

                  <!-- Footer не здесь должен быть, он идет отдельным блоком как и header  -->

                </div>
            </div>

        <!-- </div> лишний div -->

		<!-- Footer здесь должен быть -->
		<footer>
            <nav>
                <a href="#"> Сайт</a> |
                <a href="#"> Фильмы</a> |
                <a href="#"> Сериалы</a> |
                <a href="#"> Контакты</a> |
                <a href="#"> Главная</a> |
            </nav>
        </footer>

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

Сергей Никонов

teacher

11 months ago

Сергей , огромное спасибо

Владимир Плужник

11 months ago

не помогло, меню наверху показывает

Георгий

3 months ago

Ваш ответ