0
0

В видео-уроке мы начали создавать Footer.

По окончанию видео у Сергея все ссылки и копирайт находились в низу страницы. Я повторял всё как в видео, но у меня всё было на оборот, все ссылки и копирайт находились в верху страницы. Я проверил все <div> закрыты . Вот ссылка на сайт file:///G:/%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%20%D0%BA%D0%B8%D0%BD%D0%BE%20%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80/index.html

Помогите мне пожалуйста.


student_VCSbTLhM
4 years ago






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

Pavel Lazarev
4 years ago

Спасибо

student_VCSbTLhM
4 years ago

Я всё проверил но не нашол ошыбку .

Вот ссылка на сайт file:///G:/%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%20%D0%BA%D0%B8%D0%BD%D0%BE%20%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80/index.html

Помогите пожалуйста . 

student_VCSbTLhM
4 years ago

код прикрепите полный - html и css - посмотрю, подскажу

Pavel Lazarev
4 years ago

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Кино монстр</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>
                   

		
		<div class="site_content">
				
	               <div class="sitebar_container">
	               	
	                <div class="sitebar">
	                	
                        <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 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="sitebar">

	                	<h2>Новости</h2>
	                	<span>31.02.2017</span>
	                	<p>Мы запустим расширеный поиск</p>
	                	<a href="#">читать</a>
	                </div>
	                <div class="sitebar">
	                	<h2>Рейтинг фильмов</h2>
	                      <ul>
	                      	<li><a href="#">Карнавал</a><span class="rating_saitebar">8.1</span></li>
	                      	<li><a href="#">Матрица</a><span class="rating_saitebar">8.0</span></li>
	                      	<li><a href="#">Диктатор</a><span class="rating_saitebar">7.1</span></li>
	                      	<li><a href="#">Зомбиленд</a><span class="rating_saitebar">7.0</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.com 2015</p>
			</div>
	</div>

</body>
</html>
student_VCSbTLhM
4 years ago

Я думаю ошыбка в css . Я знаю что в верху надо было написать просто a, a:hover но я написал подругому потомучто если зделать так ка видио то страница ламаеться

student_VCSbTLhM
4 years ago

* {
	margin: 0;
	padding: 0;

}
body {
	font-size: 1.2em;
	background-color: #ffffff;
	color: #555555;
}
p {
	padding: 0px 0px 20px 0px;
	line-height: 1.7em;
}
.sitebar ul {
	margin: 2px 0 22px 17px;
}
.sitebar ul li {
	margin: 0 0 6px 0;
	padding: 0 0 4px 5px ;
	line-height: 1.5em;
}
.site_content a, .site_content a:hover {
	text-decoration: none;
	color: #FF9800;
	outline: none;
}

.footer ul {
	margin: 2px 0 22px 17px;
}
.footer ul li {
	margin: 0 0 6px 0;
	padding: 0 0 4px 5px ;
	line-height: 1.5em;
}
.footer a, .footer a:hover {
	text-decoration: none;
	color: #FF9800;
	outline: none;
}
input[type="search"], input[type="text"], input[type="password"] {
	color: 5d5d5d;
	width: 60%;
	padding: 8px;
}
input, textearea {
	outline: none;
	border: none;
	border: solid 1px #F2F274;
}
h1, h2 {
	font: normal 170% 'century gothic', sans-serif ;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	color: #000;
}
h2 {
	font-size: 140%;
}



.header {
	background-color: #115971;
	font-size: 0.8em;
	height: 177px;
	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 {
	font: normal 300% 'century gothic', arial, sans-serif;
	margin-left: 9px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
	padding-top: 22px;
	color: #64B7FC
	letter-spacing: 0.1em; 
	text-decoration: none;
}
.logo_text h2 {
	font-size: 0.9em;
	padding-top: 4 px
	color: #737DE5;
}
.menubar {
	width: 900px;
	height: 46px;
}
ul.menu {
	float: right;
}
ul.menu li {
	float: left;
	padding-left: 9px;
	list-style: none;
    margin-left: 1px;
    margin-bottom: 2px;
    padding-right: 10px;
}
ul.menu li a {
	font-size: normal 100% 'trebuchet ms', sans-serif ;
	 color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 20px;
	padding-right:35px;
	padding-left: 28px;
	padding-top: 6px;
	padding-bottom: 5px;
}
ul.menu li.selected a {
    color: #F38900
}
ul.menu li a:hover {
	color: #FFA525;
}	
.site_content {
	width: 880px
	overflow: hidden;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
    margin-left: auto;
    background-color: #FFFFFF;
}
.sitebar_container {
	float: right;
	width: 224px;
	margin-right: 125px;
}
.sitebar {
	float: right;
    width: 222px;
	padding: 5%;
	margin: 0px 0px 16px 0px;
	border: solid 1px #F2F274;
	border-radius: 5px;
	background-color: #EFF6A4;
}
.btn {
	padding: 8px;
	background-color: white;
	cursor: pointer;
}
.sitebar h2 {
	color: #0B91C6;

}
.lables_passreg_text a {
	
	font-size: 0.7em;
	margin-top: 3%;
	margin-left: 2%;
}
.rating_saitebar {
	float: right; 
}
.sitebar ul li {
      overflow: hidden;
      margin: 0;
 }
.sitebar ul {
	margin: 0;
}



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

Помогите

student_VCSbTLhM
4 years ago

input[type="search"], input[type="text"], input[type="password"] {

color: 5d5d5d;

здесь # не хватает

Проставьте в конце строк точки с запятой - в трех местах я точно нашел что не хватает ; в конце строки  - от этого весь последующий код не работает.

Pavel Lazarev
4 years ago

9 ответов