Позиционирование блоков в css

@VladHa · Регистрация: 11.08.2015

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

Привет всем! Начал разбираться в html и css, по ходу дела возник вопрос: при попытке записи header, article, aside и footer, последний не растягивается по ширине странице. Вот 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
 
header {
    width: calc(100%-20px);
    height:35px;
    margin-bottom: 30px;
    background-image: url('http://luxfon.com/pic/201203/1024x600/luxfon.com-1242.jpg'); 
    border-top:  5px solid #845B15;
    padding: 10px;
    font-family: Comic Sans MS;
    font-size: 200%;
    float:leftl
    
}   
footer {
    width: calc(100%-20px);
    height:35px;
    margin-top:30px;
    background-image: url('http://luxfon.com/pic/201203/1024x600/luxfon.com-1242.jpg'); 
    border-top:  5px solid #845B15;
    padding: 10px;
    font-family: Comic Sans MS;
    font-size: 200%;
    float: left;
    
}
article, aside {
    background-color: #CC973E;
    height: 150px;
    border-radius:5px;
    border: 1px solid #845B15;
    box-sizing: border-box;
    margin-top: 20px;
    float: left;
    
    
}
article{
 
    width: 60%;
    margin-left: 5%;
    margin-right: 5%;
}
aside{
    width: 25%;

Переписывал его несколько раз, поэтому, возможно, удалил какую-то часть кода. Жду вашей помощи, о Гуру web-программирования!

@Mikhail Shell · 11.08.2015, 19:04

VladHa, неплохо бы на html взглянуть.

@VladHa · 11.08.2015, 19:13 **[ТС]**

Да, извините, забыл, вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <!-- указывает кодировку сайта, по стандарту можно оставлять эту-->
    <title>Пишем стили</title> <!-- создает заголовок на вкладке -->
    <link rel="stylesheet" type="text/css" href="стиль.css" />
</head>     
<body>
    <header><center>Шапка сайта</center></header>
    <article></article>
    <aside></aside>
    <footer><center>Низ сайта</center></footer>
</body>
</html>

Писал это с помощью уроков на youtube, после возникшей проблемы начал читать различные статьи, и как я понял, полная замена <div> на новые теги html5 <header>,<footer> и т.д. - это не правильно, так ли это?

@Shakalaka · 11.08.2015, 19:33

Тут и HTML не нужен.

Сообщение от VladHa

float:leftl

leftl...

Сообщение от VladHa

width: calc(100%-20px);

CSS
1
width: calc(100% - 20px); // пробелы между знаком и цифрами

@Mikhail Shell · 11.08.2015, 19:37

VladHa, вообще у сайта (у его блоков хедеров контентов футеров ) должна быть оболочка а именно div.
Должно работать.

HTML5
1
2
3
4
5
6
<div id="main">
<header>Шапка сайта</header>
    <article></article>
    <aside></aside>
    <footer>Низ сайта</footer>
</div>

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
#main{
    margin:30pt auto;
    width:100%; 
}
/*до следующего комментария находится особый код чтобы работал отступ снизу от футера (можете использовать можете не использовать)*/
#main:after {
    content:".";
    clear:both;
    display:block;
    height:0pt;
    font-size:0pt;
    visibility:hidden;
}
#main{
    display:inline-block;
}
 
* html #main {
    height:1%;
}
#main {
    display:block;
}
/* конец */
 
#main *{
    font-family: Comic Sans MS;
    display:block;
}
header, footer{
     text-align:center;   
     font-size: 200%;
    padding: 10px; 
}
header {
    height:35px;
    margin-bottom:30px;
    background-image:url('http://luxfon.com/pic/201203/1024x600/luxfon.com-1242.jpg'); 
    border-top:5px solid #845B15;
}   
footer {
    height:35px;
    background-image: url('http://luxfon.com/pic/201203/1024x600/luxfon.com-1242.jpg'); 
    border-top:  5px solid #845B15;  
    clear:both;
}
article, aside {
    background-color: #CC973E;
    height: 150px;
    border-radius:5px;
    border: 1px solid #845B15;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom:50px;
     float:left;
    
}
article{
 
    width: 60%;
    margin-left: 5%;
    margin-right: 5%;
}
aside{
    width: 25%;
}

Также я заменил тег center свойством text-align:center, потому что тег center устаревший.

@VladHa · 12.08.2015, 04:19 **[ТС]**

Спасибо, Mikhail Shell и Shakalaka , может вы еще по доброте душевной дадите ссылки, где есть хорошие уроки по html 5?

@Максим_nCoder · 12.08.2015, 11:13

в яндексе вбейте magisters, это по-моему мнению, лучший проект с видео курсами)

@whiteapps · 12.08.2015, 11:24

Mikhail Shell, любому сайту от природы дана оболочка в виде body

@VladHa · 12.08.2015, 12:36 **[ТС]**

Вот только возник вопрос, необходимо ли использовать тег div, если есть header и тд, т.е.

HTML5
1
2
3
4
5
<body>
 <div id="name">
    <header></header>
    <footer></footer>
 </div>

или это бред?

@Karssen · 12.08.2015, 13:27

Я такую структуру предпочитаю

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
<header>
      <div  class="container">
        <!--Содержимое-->1
      </div>
    </header>
    <main>
      <div  class="container">
        <div  class="row">
          <article>
            <!--Содержимое-->1
          </article>
          <aside>
            <div class="row">
              <div>
                <!--Содержимое-->1
              </div>
              <div>
                <!--Содержимое-->1
              </div>
            </div>
          </aside>        
        </div>
      </div>
    </main>
    <footer>
      <div class="container">
        <!--Содержимое-->1
      </div>
    </footer>

@VladHa · 12.08.2015, 13:40 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <!-- указывает кодировку сайта, по стандарту можно оставлять эту-->
    <title>Пишем стили</title> <!-- создает заголовок на вкладке -->
    <link rel="stylesheet" type="text/css" href="new 1.css" />
</head>     
<body>  
    <header>Шапка сайта</header>
    <article><abbr title="смотреть в коде!"><blockquote cite="https://xakep.ru/"><p>Хакерский арсенал пополнился беспилотным летательным аппаратом.
        На конференции Defcon состоялась презентация квадрокоптера от компании Aerial Assault, который оборудован всем необходимым для облета территории
        и автоматического взлома окружающих сетей Wi-Fi.</p>
        <p>Квадрокоптер с правильным оборудованием показал хакер Дэвид Джордан (David Jordan), сотрудник Aerial Assault,передает AFP.
        «Таких возможностей никогда не было раньше», — прокомментировал он. Это первый дрон с программами для пентестинга, работающими в автоматическом режиме.</p></blockquote></abbr></article>
    <aside>Меню сайта</aside>
    <footer>Низ сайта</footer>
</body>
</html>

Как вам такой код? Нормально? Или лучше использовать div?

@Karssen · 12.08.2015, 14:06

для основной части существует тег main ну или на крайний случай обернуть центральную область в div. Потому что вы будете флоатить центральные элементы и чтоб предотвратить схлопывание границ достаточно будет задать обертке оверфлоу

@whiteapps · 12.08.2015, 14:19

Karssen,

Сообщение от Karssen

Потому что вы будете флоатить центральные элементы

зачем?

Сообщение от Karssen

чтоб предотвратить схлопывание границ достаточно будет задать обертке оверфлоу

достаточно не использовать float там где он не нужен

в большинстве случаев float успешно заменяется inline-block, при этом элемент не будет вырываться из потока документа и избавит от ненужных костылей(тот же overflow)

@Karssen · 12.08.2015, 15:06

Сообщение от whiteapps

в большинстве случаев float успешно заменяется inline-block

Тогда уж лучше flex использовать. Inline-block оставит между элементами маргины

@whiteapps · 12.08.2015, 15:10

Karssen, не марджины, а letter-space
и если не нужно старые браузеры, то да, лучше

хотя можно сделать что-то типа letter-space: -4px
но это все дело вкуса и специфики конкретной верстки

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	[В процессе разработки] SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	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 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	11.08.2015, 19:04
	VladHa, неплохо бы на html взглянуть. 0

@VladHa 0 / 0 / 0 Регистрация: 11.08.2015 Сообщений: 21
	12.08.2015, 04:19 [ТС]
	Спасибо, Mikhail Shell и Shakalaka , может вы еще по доброте душевной дадите ссылки, где есть хорошие уроки по html 5? 0

@Максим_nCoder 8 / 8 / 7 Регистрация: 26.09.2013 Сообщений: 127
	12.08.2015, 11:13
	в яндексе вбейте magisters, это по-моему мнению, лучший проект с видео курсами) 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	12.08.2015, 11:24
	Mikhail Shell, любому сайту от природы дана оболочка в виде body 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	12.08.2015, 14:06
	для основной части существует тег main ну или на крайний случай обернуть центральную область в div. Потому что вы будете флоатить центральные элементы и чтоб предотвратить схлопывание границ достаточно будет задать обертке оверфлоу 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	12.08.2015, 15:10
	Karssen, не марджины, а letter-space и если не нужно старые браузеры, то да, лучше хотя можно сделать что-то типа letter-space: -4px но это все дело вкуса и специфики конкретной верстки 0