Задать вопрос
@destroer18
Начинаю изучать HTML, CSS, JS.
html

Как убрать отступ вверху сайта?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Picture perfect</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:700|Roboto" rel="stylesheet">
</head>
<body>
    <header id="header" class="header">
        <dir class="main-header clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="navbar-brand">MoGo</div>
                    </div>
                    <div class="col-lg-2">
                    </div>
                    <div class="col-lg-8">
                        <nav>
                            <ul class="menu d-flex justify-content-between clearfix">
                                <li class="menu_item">
                                    <a href="#">
                                        about
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        service
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        work
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        blog
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        contact
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        <i class="fa fa-shopping-cart"></i>
                                    </a>
                                </li>
                                <li class="menu_item">
                                    <a href="#">
                                        <i class="fa fa-search"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </dir> 
</body>
</html>


body {
	font-family: 'Roboto', sans-serif;
	color: #999999;
	background: #ffffff;
}

ul, li {
	display: block;
	padding: 0;
	margin: 0;
}

.navbar-brand {
	font-family: Montserrat;
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
}

.menu {
	margin: 20px;

}

.menu_item {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}

.menu_item a {
	color: #ffffff;
	text-transform: uppercase;
}

.metu_item  a:focus, a:hover {
	color: #fce38a;
}

.header {
	background: url(..//img/header_bg.png); no-repeat center top;
	height: 500px;
	background-attachment: relative;
	background-position: center center;
}


5a6062b529a8c950416624.png
  • Вопрос задан
  • 11351 просмотр
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
vadimkot
@vadimkot Куратор тега CSS
Есть такой устаревший тег dir https://developer.mozilla.org/en-US/docs/Web/HTML/... - он в браузерных стилях по умолчанию имеет отступы сверху и снизу (стили одинаковы для ul, menu, dir). Зачем его используете (dir class="main-header clearfix")? Очепятка?
Из косяков header не закрыт и background-attachment: relative сами придумали?
Для .header в background после url зачем точка с запятой?
https://validator.w3.org/ - избавил бы сразу ото всех этих вопросов.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 3
Comers
@Comers
Frontend Dev.
html, body {
margin:0;
padding:0;
}
Ответ написан
2 комментария
2 комментария
eugenius1997
@eugenius1997
недоПрограммист
Используй CSS reset Эрика Мейера.
www.stijit.com/html-css/css-reset-erika-meyera
Ответ написан
1 комментарий
1 комментарий
@tyzberd
тут у вас ошибка
background: url(..//img/header_bg.png); no-repeat center top;
после ; не пишется no-repeat center top;
думаю у вас картинка меньшего размера, добавьте ей
background-size: cover;
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Ещё заказы