При создание блока вход, сам блок вход стоит рядом с поиском, а не под?
0
при создание блока вход,сам блок вход стоит рядом с поиском,а не под что делать?
5 ответов
0
вот html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="description" content="Киномонстр - это портал о кино">
<title>Document</title>
<meta name="keyword" content="фильмы,фильмы онлайн,hd"/>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main">
</div>
<div class='logo'>
</div>
<div class="logo_text">
<h1><a href="/">Киномонстр</a></h1>
<h2>Кино наша страсть!</h2>
</div>
<div class='header'>
</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="Войти"/>
</form>
</div>
</div>
</div>
</body>
</html>0
вот css
* {
margin:0;
padding:0;
}
input[type="text"],input[type="password"],input[type="search"] {
color: #5d5d5d;
width:60%;
padding:8px;
}
h1, h2 {
font: normal 170%' century gothic',arial;
margin: 0 0 15px 0;
padding:15px 0 5px 0;
color:#000;
}
html {
height:100px;
}
h2{
font-size:140%;
}
input,textarea {
outline:none;
border:none;
border:solid 1px #f2f2f2;
}
.header {
background-color: darkslateblue;
height: 177px;
font-size: 0.10em;
margin-left: 0px;
margin-right:0px;
min-width: 1000px;
margin-top:-200px;
}
.main,.logo,.menubar,.site_content,.footer {
margin-left: auto;
margin-right: auto;
}
.logo {
width: 980px;
padding-bottom: 40px;
}
.logo h1,.logo h2 {
font:normal 300% 'century gothic',arial,sans-serios
margin-top:19px;
margin-bottom:10px;
}
.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
padding-bottom:100px;
padding-left:150px;
padding-top:10px;
margin-top:10px;
margin-bottom:-140px;
color:#fff;
letter-spacing:0,8em;
text-decoration:none;
}
.logo_text h2 {
font-size: 1em;
padding-top:50px;
padding-left:300px;
padding-bottom:70px;
margin-bottom:19px;
margin-top:1px;
color: #999;
}
.menubar {
width:1100px;
height:36px;
text-decoration:none;
}
ul.menu {
float:right;
;
}
ul.menu li {
float:left;
padding-bottom:-5px;
padding-left:-7px;
list-style:none;
margin:-40px 80px 18px 36px;
text-decoration:none;
letter-spacing:3px;
}
ul.menu li a {
font:normal 100% 'trebuchet',sans-serif;
display:block;
height: 30px;
padding:-50px 39px 18px 36px;
color:#aaa;
text-decoration: none;
}
ul.menu.selected a {
color:#aeb002;
}
ul.menu li a:hover {
color:#e4ec04;
}
.site_content {
width: 880px;
overflow: hidden;
margin-right:-300px;
background-color: white;
float:right;
margin-top:10px;
margin-left:1300px;
}
.sidebar_conteiner {
float:left;
width: 224px;
}
.sidebar {
float:left;
width:220px;
padding:2%;
margin-bottom:400px;
padding-bottom:40px;
border:solid 3px #f2f2f2;
border-radius: 9px;
background-color:#f9f9f9;
}
input[class="btn"] {
padding:8px;
background-color:white;
cursor:pointer;
}
.sidebar h2 {
color: #136cb2;
}
0
и еще помогите пож-та,с тем,что сайт ушел на лево т.е он сместился со всем в лево,что делать?
0
Div какой то не закрыл. Покажи свой код целиком в ответе (html и css), я помогу. Или исходник скачай и сравни со своим кодом
0
Вот ошибки в html:
<div class="header"></div>В блок header ничего не входит, а должны входить другие блоки.
logo и logo_text находятся вне header, также как и menubar.
С блоком main та же история. В него должны входить все блоки.
В CSS коде тоже есть ошибки:
.logo h1,.logo h2 {
font:normal 300% 'century gothic',arial,sans-serios
margin-top:19px;
margin-bottom:10px;
}1. Должно быть не sans-serios, а sans-serif.
2. Не стоит точки с запятой.
Дальше код css не стал смотреть.
Вот так должен выглядеть код у header:
https://fructcode.com/ru/courses/html-and-css/header-and-top-menu/
А тут пример кода с правым меню: