Вопрос по границам отображения в google chrom? как добиться отступов как у вас в примере ?
1
Здравствуйте.
Проблема следующего характера. Дошел по курсу HTML/CSS до 43 урока. Все отображается и все работает - но не так как надо отображается.
Хочется центрировать все - а то у меня меню убежало на право - а картинки на лево. А по центру пустое место.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>КиноМонстр</title>
<meta name ="discription" content="Мой сайт"/>
<meta name="keywords" content="Фильмы, фильмы онлайн, сериалы, HD"/>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div claas ="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 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.02.2019</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">
<a href="#"><img src="assets/img/matrix.png"></a>
<a href="#"><img src="assets/img/max.png"></a>
<a href="#"><img src="assets/img/inter.png"></a>
<a href="#"><img src="assets/img/cloud.png"></a>
</div>
<div class="content">
<h1> Новые сериалы</h1>
<div class="films_block">
<a href="#"><img src="assets/img/dead.png"></a>
<a href="#"><img src="assets/img/silicon.png"></a>
<a href="#"><img src="assets/img/breakingbad.png"></a>
<a href="#"><img src="assets/img/xfiles.png"></a>
</div>
</div>
</div>
</div>
<div class= "footer" >
<p>
<a href="#">Главная </a>|
<a href="#">Фильмы </a>|
<a href="#">Сериалы </a>|
<a href="#">Рейтинг фильмов </a>|
<a href="#">Контакты </a>
<p>wh-db.com 2019</p>
</p>
</div>
</body>
</html>
*
{
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: #FF00a5;
}
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: 880px;
padding-bottom: 40px;
}
.logo h1, .logo h2
{
font: normal 300% "century gothic", arial, sans-serif;
margin: 0 0 0 9px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover
{
padding: 22px 0 0 0;
color: #fff;
letter-spacing: 0.1em; /*интервал между символами - чем выше значение тем больше интервал между символами*/
text-decoration: none; /* */
}
.logo_text h2
{
font-size: 0.9em;
padding: 4px 0 0 0;
color: #999;
}
.menubar
{
width: 900px;
height: 46px;
}
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
{
widows: 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: #0fC9c3;
}
.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: 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%;
}
.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;
}
.footer a
{
color: #a8aa94;
text-decoration: none;
}
.footer a:hover
{
color: #fff;
text-decoration: none;
}
.footer p
{
padding: 0 0 10px 0;
}5 ответов
0
я исправил в меню с лева , тоже было прижата к краю левой стороны
попробуй вот так ,
.sidebar_container {
float: right;;
width: 224px;
margin-right: 15em;
}0
Спасибо за ответ Сергей. со словом класс действительно опечатка, а вот с пробелами - он вроде и так и так его интерпретирует.
0
Дело в том, что каким - то образом у меня все работает - только позиционирование - не верное. Я попробовал по другому. Скачал файлы с задания и заменил сначала файл index.html, а потом css файл стилей. Ошибка где-то в файле стилей, но самое нехорошее не понимаю где - сравнил все по строчкам - один в один - такое чувство - что я где-то русскими буквами что-то написал - или действительно дело в пробелах. Оставил оба файла буду сравнивать под микроскопом.
0
Ошибка нашлась Sublime Text на авто вставке добавил ":" в строку width, ну и я тоже добавил ":". В результате, все расползалось в разные стороны.
.site_content {
width: 880px; /*Тут была width :: 880px; */
overflow:hidden;
margin: 20px auto 0 auto;
background-color: white;
}
0
Опечаток у вас много, посмотрите как даже здесь подсвечивается ваш код, где черное - это значит в большинстве случаев с ошибками:
Примеры:
После name стоит пробел, пробела быть не должно
<meta name ="discription" content="Мой сайт"/>Здесь сразу две ошибки - это пробел и слово class с ошибкой написано:
<div claas ="main">