footer не центрируется

@SUNKX · Регистрация: 09.10.2022

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

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Исторические личности</title>
    <link href="historicalpeople.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul class="main-menu">
        <li><a href="main.html">Главная</a></li>
        <li class="menu-children">
          <a href="kazakhstan.html">Страны и культура Центральной Азии</a>
          <ul>
              <li class="menu-children">
                  <a href="kazakhstan.html">Страны Центральной Азии</a>
                  <ul>
                      <li><a href="kazakhstan.html">Республика Казахстан</a></li>
                      <li><a href="uzbekistan.html">Республика Узбекистан</a></li> 
                      <li><a href="tajikistan.html">Республика Таджикистан</a></li>   
                      <li><a href="kyrgyzstan.html">Кыргызская Республика</a></li>   
                      <li><a href="turkmenistan.html">Туркменистан</a></li>             
                  </ul>
                  <li class="menu-children">
                  <a href="middleeasthistory.html">Информация про страны ЦА</a>
                  <ul>
                      <li><a href="middleeasthistory.html">История стран ЦА</a></li>
                      <li><a href="middleeastculture.html">Культура стран ЦА</a></li> 
                      <li><a href="middleeastnature.html">Природа стран ЦА</a></li>
                      <li><a href="middleeastsights.html">Достопримечательности стран ЦА</a></li>
                      <li><a href="middleeastgeography.html">Географическое положение стран ЦА</a></li>
                      <li><a href="middleeastconflicts.html">Конфликты стран ЦА</a></li>
                      <li><a href="middleeastices.html">Ледники стран ЦА</a></li>
                      <li><a href="middleeastseas.html">Озёра стран ЦА</a></li>
                      <li><a href="middleeastrivers.html">Реки стран ЦА</a></li>
                </ul>  
          </ul>
      </li>
        <li><a href="blog.html">Блог автора</a></li>
        <li><a href="library.html">Библиотека</a></li>
        <li><a href="movieposter.html">Кино-афиша</a></li>
        <li><a href="flyagency.html">Туристическое агенство</a></li>
        <li><a href="photoalbum.html">Фотоальбом</a></li>
        <li class="active"><a href="historicalpeople.html">Исторические личности</a></li>
        <li><a href="about.html">Про нас</a></li>
        <li><a href="feedback.html">Обратная связь</a></li>
        <li class="menu-children">
          <a href="#url">Смена языка</a>
              <ul>
                  <li class="menu-children">
                      <a href="historicalpeople.html">Русский язык</a>
                      <a href="z_historicalpeople.html">English</a>
                      <a href="q_historicalpeople.html">Қазақ тілі</a>
                  </li>
              </ul>
    </ul>
 
 
 
    <section id="hero">
        <div class="container">
            <h1>Исторические личности</h1>
            <p>Изучайте биографии великих личностей и открывайте новые грани истории.</p>
        </div>
    </section>
 
        <section id="search">
            <div class="container">
                <h2>Поиск</h2>
                <form id="search-form">
                    <input type="text" id="search-input" placeholder="Введите имя исторической личности">
                    <button type="submit">Поиск</button>
                </form>
                <div id="search-results"></div>
            </div>
        </section>
    </main>
 
    <main>
        <section id="ancient">
            <div class="container">
                <h2>Древнее время</h2>
                <div class="row">
                    <div class="col-6">
                        <img src="https://rus.team/images/article/5026/2019-06-08-290_15835-3_199603.webp" alt="Мухаммед">
                        <h3>Мухаммед</h3>
                        <p>Пророк Ислама</p>
                        <a href="muhammed.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="http://www.pravoslavie.ru/sas/image/102202/220294.p.jpg?0.3414113759063184" alt="Платон">
                        <h3>Платон</h3>
                        <p>Философ, ученик Сократа, учитель Аристотеля</p>
                        <a href="platon.html">Узнать больше</a>
                    </div>
                </div>
            </div>
        </section>
 
        <section id="19year">
            <div class="container">
                <h2>19 век (1800-1900)</h2>
                <div class="row">
                    <div class="col-6">
                        <img src="https://biographe.ru/wp-content/uploads/2019/07/32234423.png" alt="Наполеон Бонапарт">
                        <h3>Наполеон Бонапарт</h3>
                        <p>Полководец и государственный деятель, заложивший основы современного Французского государства</p>
                        <a href="napoleon.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://oinfo.ru/img/2010/02/1168589922_95039_2125996.jpg" alt="Александр Пушкин">
                        <h3>Александр Пушкин</h3>
                        <p>Русский поэт, драматург и прозаик, историк, публицист, журналист</p>
                        <a href="pushkin.html">Узнать больше</a>
                    </div>
                </div>
            </div>
        </section>
 
        <section id="20year">
            <div class="container">
                <h2>20 век (1900-2000)</h2>
                <div class="row">
                    <div class="col-6">
                        <img src="https://www.weidenfeldandnicolson.co.uk/wp-content/uploads/2018/12/hbg-title-9781474600446.jpg?fit=450%2C664" alt="Владимир Ленин">
                        <h3>Владимир Ленин</h3>
                        <p>Революционер, основоположник марксизма-ленинизма, основатель СССР</p>
                        <a href="lenin.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://static1-repo.aif.ru/1/d4/524405/84c17b96d0747258ab0992ecb8e835d5.jpg" alt="Хирохито">
                        <h3>Хирохито</h3>
                        <p>Император Японской империи</p>
                        <a href="hirohito.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://bugin.kz/media/2021/10/06/akhmet1111.png" alt="Ахмет Байтурсынов">
                        <h3>Ахмет Байтурсынов</h3>
                        <p>Казахский просветитель, педагог, публицист, переводчик, учёный-тюрколог, лингвист и политический деятель. Создатель казахского алфавита. Один из руководителей и активных деятелей движения «Алаш»</p>
                        <a href="baitursunov.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://static.life.ru/posts/2018/10/1161536/4a82d52306829f73901a794a785ed0c0.png" alt="Адольф Гитлер">
                        <h3>Адольф Гитлер</h3>
                        <p>Фюрер Нацисткой Германии</p>
                        <a href="hitler.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://www.ektu.kz/news/2018.06.05/1/1.JPG" alt="Магжан Жумабаев">
                        <h3>Магжан Жумабаев</h3>
                        <p>Казахский поэт, публицист, педагог, один из основателей новой казахской литературы</p>
                        <a href="magzhan.html">Узнать больше</a>
                    </div>
                </div>
            </div>
        </section>
 
        <section id="modern">
            <div class="container">
                <h2>Новое время</h2>
                <div class="row">
                    <div class="col-6">
                        <img src="https://cdn.forbes.ru/forbes-static/750x422/new/2022/01/TASS-29585868-61e69f738036f.jpg" alt="Нурсултан Назарбаев">
                        <h3>Нурсултан Назарбаев</h3>
                        <p>Первый президент Республики Казахстан</p>
                        <a href="nazarbaev.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://www.inform.kz/radmin/news/2019/11/22/191122231238338e.webp" alt="Димаш Кудайбергенов">
                        <h3>Димаш Кудайбергенов</h3>
                        <p>Казахский певец, композитор и мультиинструменталист. Заслуженный деятель Казахстана</p>
                        <a href="dimash.html">Узнать больше</a>
                    </div>
                    <div class="col-6">
                        <img src="https://i.trbna.com/preset/wysiwyg/a/84/87898b61411ebb01bcd3603cd6326.jpeg" alt="Денис Тен">
                        <h3>Денис Тен</h3>
                        <p>Казахстанский фигурист, выступавший в одиночном разряде. Заслуженный мастер спорта Республики Казахстан</p>
                        <a href="denisten.html">Узнать больше</a>
                    </div>
                </div>
            </div>
        </section>
 
 
 
        <footer class="footer">
            <div class="container">
                <div class="rowwy">
                    <div class="footer-col">
                        <h4>SunGo</h4>
                        <ul>
                            <li><a href="main.html">Главная страница</a></li>
                            <li><a href="privacycompleted.html">Условия и политика конфиденциальности</a></li>
                            <li><a href="feedback.html">Обратная связь</a></li>
                            <li><a href="about.html">Про нас</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>Разделы сайта</h4>
                        <ul>
                            <li><a href="library.html">Библиотека</a></li>
                            <li><a href="movieposter.html">Кино-афиша</a></li>
                            <li><a href="flyagency.html">Турагенство</a></li>
                            <li><a href="photoalbum.html">Фотоальбом</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>Общие разделы сайта</h4>
                        <ul>
                            <li><a href="historicalpeople.html">Исторические личности</a></li>
                            <li><a href="blog.html">Блог автора</a></li>
                            <li><a href="kazakhstan.html">Республика Казахстан</a></li>
                            <li><a href="middleeasthistory.html">Информация про страны Центральной Азии</a></li>
                        </ul>
                    </div>
                </div>
            </div>
       </footer>
 
        <script src="historicalpeople.js"></script>
</body>
</html>

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: #eee;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px;
  }
  
  h1 {
    font-size: 36px;
    margin-bottom: 10px;
  }
  
  section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  
  section h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  section p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  section a {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px;
    margin: 13px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s ease;
  }
  
  section a:hover {
    background-color: #aaa;
  }
  
  #search-form {
    display: flex;
    margin-bottom: 20px;
  }
  
  #search-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
  }
  
  #search-input:focus {
    outline: none;
    border-color: #333;
  }
  
  #search-form button {
    padding: 10px;
    background-color: #333;
    color: #fff;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
  }
  
  #search-results {
    margin-top: 20px;
  }
  
  #search-results h3 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  #search-results p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  #search-results a {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s ease;
  }
  
  #search-results a:hover {
    background-color: #aaa;
  }
  
  a {
    text-decoration: none;
    font-weight: bold;
  }
 
  .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 30px;
    font-family: 'Montserrat', sans-serif;   
}
 
.main-menu > li {
    display: inline-flex;
}
 
.main-menu > li + li {
    margin-left: 20px;
}
 
.main-menu > li > a {
    padding: 0 0 20px 0;
    position: relative;
    text-transform: uppercase;   
    color: #000;
    font-weight: bold;
    letter-spacing: 0.2px;
    font-size: 15px;
    text-decoration: none;   
}
 
.main-menu > li > a:hover {
    text-decoration: none;   
    color: #337AB7;
}
 
.main-menu > li > a:after {
    width: 0;
    height: 3px;
    background-color: #337AB7;
    content: '';
    left: 0;
    bottom: 10px;
    position: absolute;
    transition: all .3s;
}
 
.main-menu > li > a:hover::after {
    width: 100%;
}
 
.main-menu > li.active a:after {
    width: 100%;
}
 
.main-menu li {
    margin: 0;
    white-space: nowrap;
}
 
.main-menu li.menu-children {
    position: relative;
    margin-right: 12px;
}
 
.main-menu li.menu-children:after {
    position: absolute;
    content: "\2039";
    color: #337AB7;
    font-size: 20px;
    font-weight: bold;
    right: -12px;
    top: -2px;
    transform: rotate(-90deg);
}
 
.main-menu li li.menu-children:after {
    position: absolute;
    content: "\2039";
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    right: 10px;
    top: 12px;
    transform: rotate(180deg);
}
 
.main-menu li.menu-children:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
 
.main-menu ul {
    padding: 10px 0;
    margin: 0;
    list-style: none;
    background-color: #337AB7;
    position: absolute;
    z-index: 20;
    min-width: 180px;
    top: 100%;
    left: -30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 200ms cubic-bezier(0.43, 0.59, 0.16, 1.25);
}
 
.main-menu ul li {
    display: block;
    padding: 0 10px;
    line-height: 1.1;
}
 
.main-menu ul li:last-child {
    margin-bottom: 0;
}
 
.main-menu ul li a {
    display: block;
    color: #fff;
    padding: 10px;
    transition: all .3s;
    text-decoration: none;   
}
 
.main-menu ul li a:hover {
    color: #337AB7;
    background: #FFF;
    text-decoration: none;   
}
 
.main-menu ul ul {
    top: 0;
    left: 100%;
}
 
 
 
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.container{
    max-width: 1200px;
}
.rowwy{
    display: flex;
    flex-wrap: wrap;
}
 
ul{
    list-style: none;
}
 
.footer{
    background-color: #24262b;
    padding: 30px 0;
    margin-top: auto;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
    font-size: 18px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    position: relative;
}
.footer-col h4::before{
    content: '';
    position: absolute;
    left:0;
    bottom: -10px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.footer-col ul li:not(:last-child){
    margin-bottom: 10px;
}
.footer-col ul li a{
    font-size: 16px;
    text-transform: capitalize;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    color: #bbbbbb;
    display: block;
    transition: all 0.3s ease;
}
.footer-col ul li a:hover{
    color: #ffffff;
    padding-left: 8px;
}
 
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

@Codera · 05.04.2023, 12:55

CSS
1
2
3
4
.rowwy {
display: flex;
justify-content: space-between;
}

@SUNKX · 05.04.2023, 12:55 **[ТС]**

надо что бы футер был как на этом фото

@SUNKX · 05.04.2023, 13:08 **[ТС]**

не помогло к сожалению(

KingdaKa · 05.04.2023, 13:45

SUNKX,

CSS
1
2
3
4
5
.rowwy{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

Вы бы еще уточняли какое именно центрование нужно...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@SUNKX 0 / 0 / 0 Регистрация: 09.10.2022 Сообщений: 3
	05.04.2023, 12:55 [ТС]
	надо что бы футер был как на этом фото Миниатюры 0

@SUNKX 0 / 0 / 0 Регистрация: 09.10.2022 Сообщений: 3
	05.04.2023, 13:08 [ТС]
	не помогло к сожалению( 0