Неприятная ситуация при верстке сайта из собственного макета

@Coi · Регистрация: 16.01.2016

Студворк — интернет-сервис помощи студентам

Не лупите сильно чайника, только начал изучать в итоге вот что получается. Я пытаюсь сдвинуть текст ниже, но фоновое изображение двигается вместе с ним. вот скрин.
А вот собственно коды. Скажите что исправить, где накосячил. И нормально ли все идет для начинающего? )
HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Games is your life</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
       <div class="container">
       <div class="heading clearfix">
         <img src="img/Logo.png" alt="Логотип" class="logo">
          <nav>
            <ul class="menu">
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">Reviews</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Footer</a>
            </li>
            <li>
              <img src="img/ava.png" alt="Аватар" class="avatar">
            </li>
            </ul>
          </nav>
       </div>
          
          
       </div>
        </header>
    <section class="main">
       <div class="container">  
      <div class="titles">
      <h1>Games is your life</h1>
        <div class="titles_first">
          Spend your time with pleasure
        </div>
      </div>
       </div>
        </section>
    <section>
       <div class="container">
           
       </div>
        </section>
    <section>
       <div class="container">
           
       </div>
        </section>
    <footer>
       <div class="container">
           
       </div>
        </footer>
</body>
</html>

И CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    background-attachment: fixed
}
.clearfix{
    content: '';
    display: table;
    width: 100%;
    clear: both;    
}
div {
    box-sizing: border-box;
}
header {
    background: url(../img/werh.png) no-repeat center top / cover;
    height: 40px; 
 
}
.container {
width: 930px;
margin: 0 auto ;
}
.logo {
    margin-top: -2px;
    float-left;
    
} 
nav {
    float: right;
    margin-top: 14px;
}
.menu {
    padding: 0;
    margin: 0;
    display: block;
}
.menu li {
    float: left; 
    display: block;
    margin-right: 44px;
    font-size: 14px; 
    }
.menu a {
    color: #363636;
    text-decoration: none;
    text-transform: uppercase;   
}
 
.avatar {
    margin-top: -11px;
 
}
.main {
background: url(../img/Head1.jpg) no-repeat center top / cover;
height: 527px;
display: block;
padding: 0;
margin: 0
}
 
h1 {
    color: #fff;
    font-size: 60px;
    display: block;
    text-transform: uppercase;
    text-align: center;
}
 
.titles {
    color:#fff;
    font-size: 30px;
    text-align: center;
    margin-top: 50px;
}
.titles.first {
    margin-top: 100px;
}

@AlexZaw · 09.07.2017, 10:23

тут виновато схлопывание маржинов, почитайте вот тут:http://htmlbook.ru/samlayout/b... ya-otstupy
и зачем вы к тегам ul и h1 добавляете display:block? они и так являются блочными

@Coi · 09.07.2017, 15:01 **[ТС]**

Спасибо за ответ. А про блочность тегов не знал, каюсь) Третий день ток верстаю)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	09.07.2017, 10:23
	тут виновато схлопывание маржинов, почитайте вот тут:http://htmlbook.ru/samlayout/b... ya-otstupy и зачем вы к тегам ul и h1 добавляете `display:block`? они и так являются блочными 1

@Coi 1 / 1 / 0 Регистрация: 16.01.2016 Сообщений: 43
	09.07.2017, 15:01 [ТС]
	Спасибо за ответ. А про блочность тегов не знал, каюсь) Третий день ток верстаю) 0