Урок 65 адаптивная вёрстка, страница контакты не адаптировалась?
Евгений Гриб1 ответов
Настраивал, по уроку, поля для ввода комментариев на странице фильма Интерстеллар. Всё получилось. Затем при переходе на страницу "контакты", поля для ввода данных не были автоматически адаптированы, в уроке это было сделано автоматически.
Что нужно написать или где ошибка?
Код страницы "контакты"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, instial-scale=1.0">
<title>contacti</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><a href="index.html">Главная</a></li><!-- присвоили класс, для того, чтобы выделить этот элемент, присвоив ему отдельный дополнительный стиль -->
<li> <a href="films.html">Фильмы</a></li> <!-- # обозначает что при нажатии никуда не переходим в будущем решетки заменить ссылками, по которым будет пересылать при нажатии на слово-->
<li> <a href="#">Сериалы</a></li>
<li> <a href="rating.html">Рейтинг фильмов</a></li>
<li class="selected"> <a href="contacti.html">Контакты</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" id="search_form"> <!-- form - создает форму.
method - указали метод через который передаем форму(post и get)
action - ссылка на страницу, которую должна обработать форма
id - индификато рформы. уникальное имя.форм может быт ьнесколько на одной странице,
поэтому создается ее уникальное название для того, чтобы ее можно было отправить в фоновом режиме -->
<input type="search" name="search_filed" placeholder="Ваш запрос" /> <!-- imput может иметь разные типы,
которые мы задаем словом type. ознакомиться самостоятельн ои выписать в ворд.
name - имя imput, чтобы с нее можно было получить данные, на странице обработки.
placeholder - подсказка дял пользователя, которая находится внутри imput.
!тут тоже можно использовать value, но пользователю необходимо будет стереть данные, а потом написать запрос!-->
<input type="submit" class="btn" value="Найти" /> <!-- это кнопка. ее тип submit/
value - параметр, позволяющий поместить в imput данные. поэтому на кнопке написано "найти" -->
</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>05.01.2020</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul >
<li> <a href="#">Гарри Поттер</a> <span class="rating_sidebar">9.1</span> </li>
<li> <a href="#">Форест Гамп</a> <span class="rating_sidebar">8.5</span> </li>
<li> <a href="#">Кот Леапольд</a> <span class="rating_sidebar">8.1</span> </li>
<li> <a href="#">Смешарики</a> <span class="rating_sidebar">7.6</span> </li>
</ul>
</div>
</div>
<div class="content">
<h1 class="gl_cont">Контакты</h1>
Оставьте ваш отзыв о портале КиноМонстр
</div>
<div class="cont">
<form method="post" action="#" id="review">
<input type="text" name="review_cont_txt" placeholder="Ваше имя">
<input type="text" name="review_cont_txt" placeholder="Ваш email">
<textarea name="review_text"></textarea>
</form>
<form method="post" action="#" id="review">
<input type="submit" class="btn" value="Отправить">
</form>
</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 2017</p> <!--Копирайт-->
</div>
</div>
</body>
</html>Код страницы фильма Интерстеллар
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, instial-scale=1.0">
<title>show</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><a href="index.html">Главная</a></li><!-- присвоили класс, для того, чтобы выделить этот элемент, присвоив ему отдельный дополнительный стиль -->
<li class="selected"> <a href="films.html">Фильмы</a></li> <!-- # обозначает что при нажатии никуда не переходим в будущем решетки заменить ссылками, по которым будет пересылать при нажатии на слово-->
<li> <a href="#">Сериалы</a></li>
<li> <a href="rating.html">Рейтинг фильмов</a></li>
<li> <a href="contacti.html">Контакты</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" id="search_form"> <!-- form - создает форму.
method - указали метод через который передаем форму(post и get)
action - ссылка на страницу, которую должна обработать форма
id - индификато рформы. уникальное имя.форм может быт ьнесколько на одной странице,
поэтому создается ее уникальное название для того, чтобы ее можно было отправить в фоновом режиме -->
<input type="search" name="search_filed" placeholder="Ваш запрос" /> <!-- imput может иметь разные типы,
которые мы задаем словом type. ознакомиться самостоятельн ои выписать в ворд.
name - имя imput, чтобы с нее можно было получить данные, на странице обработки.
placeholder - подсказка дял пользователя, которая находится внутри imput.
!тут тоже можно использовать value, но пользователю необходимо будет стереть данные, а потом написать запрос!-->
<input type="submit" class="btn" value="Найти" /> <!-- это кнопка. ее тип submit/
value - параметр, позволяющий поместить в imput данные. поэтому на кнопке написано "найти" -->
</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>05.01.2020</span>
<p>Мы запустили расширенный поиск</p>
<a href="#">Читать</a>
</div>
<div class="sidebar">
<h2>Рейтинг фильмов</h2>
<ul >
<li> <a href="#">Гарри Поттер</a> <span class="rating_sidebar">9.1</span> </li>
<li> <a href="#">Форест Гамп</a> <span class="rating_sidebar">8.5</span> </li>
<li> <a href="#">Кот Леапольд</a> <span class="rating_sidebar">8.1</span> </li>
<li> <a href="#">Смешарики</a> <span class="rating_sidebar">7.6</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; 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="description_film">
<img src="assets/img/inter.png">
Действие фильма «Интерстеллар» (Interstellar) происходит в недалеком будущем. Климат на Земле существенно изменился, а высокая концентрация азота скоро приведет к гибели людей. Необходимо срочно искать другую планету, чтобы переселить на нее весь человеческий род. Ученые обнаружили в пространстве червоточину, через которую можно переместиться в другую галактику. Это единственный выход для спасения всего человечества.
</div>
<hr>
<h2>Отзывы об интерстеллар</h2>
<div class="reviews">
<div class="review_name">
Сергей
</div>
<div class="review_text">
Отличный фильм, 3 часа пролетели незаметно.
</div>
<div class="review_name">
Антон
</div>
<div class="review_text">
Замени "астронавтов" на "мужиков", "космическую станцию" на "рыбалку", "спутник" на "самогонный аппарат" и получишь фильм-римейк "Особенности национальной рыбалки".
</div>
</div>
<div class="send">
<form method="post" action="#" id="review">
<input type="text" name="review_name" placeholder="Ваше имя">
<textarea name="review_text"></textarea>
<input type="submit" class="btn" value="Отправить">
</form>
</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 2017</p> <!--Копирайт-->
</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% 'centry gotic', areal;
margin: 0 0 1px 0;
padding: 15px 0 5px 0;
color: #000;
}
h2{
font-size: 140%;
}
a, a:hover{
outline: none;
text-decoration: underline;
color: #DAA520;
}
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, .footer {
margin-left: auto;
margin-right: auto;
}
.logo{
width: 800px;
padding-bottom: 30px;
}
.logo h1, .logo h2{
font: normal 250% 'cetry gotic', arial, sans-serif;
margin: 0 0 0 0px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
text-align: center;
color: #fff;
letter-spacing: 0.1em;
text-decoration: none;
}
.logo_text h2{
font-size: 1.2em;
padding: 10px 5px 10px 5px;
text-align: center;
color: #FFD700;
}
.menubar{
width: 900px;
height: 46px;
}
ul.menu{
float: right;
color: #fff;
}
ul.menu li{
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 0px 2px 30px 0;
}
ul.menu li a{
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
height: 20px;
padding: 6px 35px 5px 28px;
color: white;
text-decoration: none;
}
ul.menu li.selected a{
color:gold;
}
ul.menu li a:hover{
color:#FF8C00;
}
hr{
border: solid 1px #f3f3f3;
}
.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 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.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;
}
.content{
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
.content a {
text-decoration: none;
}
.films_block{
margin-bottom: 5%;
}
.films_block img{
border-radius: 5px;
border: solid 5px #dad7d5;
width: 22%;
}
.posts .posts_content{
font-size: 0.9em;
}
.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;
}
.info_film_page{
margin-top: 2%;
margin-bottom: 4%;
}
.info_film_page .lable{
font-size: 1.2em;
}
.info_film_page .value{
font-size: 1em;
color: #49945a;
margin-right: 3%;
}
.description_film{
margin-bottom: 15%;
}
.description_film img{
float: left;
margin-right: 2%;
border-radius: 5px;
border: solid 5px #dad7d5;
}
.reviews{
margin-bottom: 4%;
font-size: 0.9em;
}
.reviews .review_name{
background-color: #7268ad;
color: white;
padding: 1%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 20px;
}
.reviews .review_text{
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2%;
}
.send{
margin-bottom: 4%;
}
.send input[text="text"], textarea{
border: solid 1px #c3c3c3;
margin-top: 5%;
}
.send input[type="text"] {
width: 98%;
}
.send textarea{
width: 624px;
height: 200px;
}
.send input[type="submit"] {
background-color: #7268ad;
padding: 3%;
color: white;
border-radius: 5px;
}
/*----------------Контакты-----------------*/
.gl_cont{
margin-bottom: 3%;
}
.cont input[text="text"], input[name="review_cont_txt"], textarea{
border: solid 1px #c3c3c3;
margin-top: 2%;
width: 510px;
}
.cont textarea{
width: 525px;
height: 220px;
}
.cont input[type="submit"] {
margin-top: 2%;
background-color: #7268ad;
padding: 2%;
color: white;
border-radius: 5px;
}
/*------------------film--------------------*/
.info_film{
margin-bottom: 5%;
background-color: #f9f9f9;
padding: 5%;
height: 270px;
}
.info_film img{
float: left;
margin-right: 2%;
border-radius: 5px;
border: solid 5px #dad7d5;
width: 25%;
}
.button{
background-color: #7268ad;
padding: 2%;
color: white;
border-radius: 5px;
float: right;
margin-top: 5%;
clear: both;
font-size: 0.8em;
}
.button a{
color: white;
}
/*---------------Рейтинг------------------*/
table{
width:100%;
border: solid 1px #f4f4f4;
}
td{
padding: 2%;
border: solid 1px #f4f4f4;
}
td img{
width: 60px;
vertical-align: middle;
}
.center{
text-align:center;
}
.rating{
font-weight: bold;
}
.footer a{
color: #a8aa94;
text-decoration: none;
}
.footer a:hover{
color: #fff;
text-decoration: none;
}
.footer p{
padding: 0 0 10px 0;
}
/* CSS mobile */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px){
.header{
background-color: #257965;
min-width: 100%;
height: 20%;
text-align: center;
}
.logo {
width: 100%;
}
.site_content {
width: 100%;
text-align: center;
}
.menubar {
width: 100%;
height: 100%;
}
.content{
width: 100%;
text-align: center;
}
.sidebar_container {
display: none;
}
.footer{
display: none;
}
ul.menu{
float: none;
}
ul.menu li{
margin:0;
padding: 0;
float: none;
}
.logo h1 {
font: normal 235% 'centry gothic', arial, sans-serif;
}
.logo h2 {
font: normal 100% 'centry gothic', arial, sans-serif;
}
.content h1, h2{
font: normal 110% 'centry gothic', arial;
}
.films_block img{
width:43%;
}
.posts_content p{
line-height: 1.5em;
margin-right: 3%;
padding: 3%;
text-align: justify;
}
.posts p{
font-size: 120%;
}
/* films page */
.info_film{
float: none;
text-align: justify;
height: 100%;
}
.info_film img{
width: 90%;
margin-bottom: 5%;
}
.button{
float: none;
text-align: center;
}
/* rating page */
table{
display: block;
}
th{
font-size: 75%;
}
td{
padding: 0;
margin: 0;
font-size: 95%;
text-align: left;
}
/* show page */
iframe{
width: 88%;
height: 100%;
}
.description_film{
width: 90%;
text-align: justify;
margin-left: 2%;
}
.description_film img{
float: none;
width: 73%;
display: block;
margin: 0;
padding: 0;
margin-left: 11%;
margin-bottom: 7%;
}
.reviews {
width: 96%;
text-align: justify;
}
.review_text{
width: 95%;
}
.send input[type="text"] {
width: 80%;
}
.send textarea {
width: 84%;
}
}