0
0

Проверил все,а до этого урока все шло как по маслу и вот что вышло [IMG]https://wmpics.pics/di-GTLBJ.png[/IMG]

<!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="/">КиноMoнстр</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>31.02.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.2</span></li>
                    <li><a href="#">Безумный Макс</a><span class="rating_sidebar">7.5</span></li>
                    <li><a href="#">Облачный атлас</a><span class="rating_sidebar">8.1</span></li>
                </ul>
            </div>  

       </div>

     </div>




</div>

</body>
</html>

Rustam Abdullaew
4 years ago






css надо смотреть что там в стилях для menubar и menu, высылай код

Сергей Белов
4 years ago

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

Алексей Терещенко
4 years ago

После ввода CSS 

ul {

margin: 2px 0 22px 17px;

}

ul li {

margin: 0 0 6px 0;

padding: 0 0 4px 5px;

line-height: 1.5em;

}

и сохранении. В баузере саита колонки сместились в лево. В чем проблемма понять не могу . Помогите.

Алексей Терещенко
4 years ago

Попробуй, сравни с этим кодом. Здесь без смещений.  Или ошибка в 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, .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 {
  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;
}
<!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="/">КиноМонстр</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>31.02.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.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>







	</div>
	
</body>
</html>
Сергей Садовой
4 years ago

Да блин, все проверил нашел одну ошибку там отступ где то не был сделан,уже не раз букву за буквой проверил saderbar вместо sadebar даже увидел ну не чего не изменилось кстати отступы рейтингов тоже в право не смещены

Rustam Abdullaew
4 years ago

5 ответов