блоки CSS

@vanyakilkil · Регистрация: 13.06.2012

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

Делаю блоки CSS. Что я заметил. Во первых: при уменьшении окна браузера блоки могут немного меняется местами, во вторых: самый нижний блок вдруг вверх пошел. Сайт пустой, просто блоки тренируюсь делать нормальные..
Вот код 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
#shapka 
{
border: 1px solid red;
height: 200px
}
#menu
{
 
border: 1px solid green;
height: 400px;
width: 150px;
float: left
}
#content
{
border: 1px solid red;
height: 400px;
width: 1200px;
float: left
}
#piar
{
position: fixed;
border: 1px solid red;
height: 400px;
float: right;
 
}
#niz
{
border: 1px solid red;
height: 110px;
 
}

А вот собственно сам HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css" >
</head>
<body>
<div id="shapka">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="piar">
</div>
<div id="niz">
</div>
 
 
 
 
</body>
</html>

Хотелось бы чтобы блоки четко стояли, чтобы не дрыгались. Будут потом с контентом местами меняться... Спасибо

@maximus2011 · 15.04.2013, 06:23

www.csstemplater.com

@Taatshi · 15.04.2013, 09:39

maximus2011, ну что Вы на каждый вопрос, касающейся верстки, даете эту ссылку? Лучше объясните своими словами ошибку.

@maximus2011 · 15.04.2013, 10:15

Человек должен сам понять принцип построения блоков, исходя из готового кода. Тогда он и поймет ошибку. А расписывать в теме учебник по html и css не вижу смысла. Тем более, что человек сам сверстал страничку, значит учебник уже читал

@vanyakilkil · 15.04.2013, 10:41 **[ТС]**

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

Человек должен сам понять принцип построения блоков, исходя из готового кода. Тогда он и поймет ошибку. А расписывать в теме учебник по html и css не вижу смысла. Тем более, что человек сам сверстал страничку, значит учебник уже читал

Да, читал. Сделал так, как это увидел уже сам. Я всего-лишь попросил указать на ошибку.

@Taatshi · 15.04.2013, 13:07

maximus2011, у меня складывается такое ощущение, что вы просто не можете - своими словами. Тогда лучше промолчать.

@maximus2011 · 15.04.2013, 18:33

ну я незнаю что у вас там и куда складывается, но когда есть конкретный вопрос, я всегда даю конкретный ответ. А когда человек, не может понять элементарных правил css, я не вижу смысла, опять же повторюсь (переписывать в пост учебник по html и css) Самое лучшее понимание - это трудолюбие, а не готовый продукт.

@vanyakilkil · 15.04.2013, 18:51 **[ТС]**

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

ну я незнаю что у вас там и куда складывается, но когда есть конкретный вопрос, я всегда даю конкретный ответ. А когда человек, не может понять элементарных правил css, я не вижу смысла, опять же повторюсь (переписывать в пост учебник по html и css) Самое лучшее понимание - это трудолюбие, а не готовый продукт.

Ну вообще не трудно было просто изначально написать что здесь я не дописал то то, или нужно дописать то то...
P.S: Я принципиально не пользуюсь программами. И еще одно, я бы не стал заказывать сайт у человека, если бы знал что он пользуется такими программами... Нужно все самому делать. Вот я и пытаюсь сам все делать

@maximus2011 · 15.04.2013, 20:01

Ну это похвально, что вы все сами делаете

Но для того, чтобы понять, как правильно строятся блоки, лучше всего разобрать готовые примеры и понять, что и как. Зачем стрить новый велик, пытаясь себе что-то доказать? Возьмите готовый и разберите, потом соберете без подсказок и все. Я лично учился так, брал любой сайт в инете на угад, и копировал его своими руками. Потом сравнивал что получилось. Зато теперь проблем нет, куча мелочей в голове которые всегда пригодяться. А читать и заучивать правила это удел заучек

@vanyakilkil · 15.04.2013, 20:03 **[ТС]**

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

Ну это похвально, что вы все сами делаете

Но для того, чтобы понять, как правильно строятся блоки, лучше всего разобрать готовые примеры и понять, что и как. Зачем стрить новый велик, пытаясь себе что-то доказать? Возьмите готовый и разберите, потом соберете без подсказок и все. Я лично учился так, брал любой сайт в инете на угад, и копировал его своими руками. Потом сравнивал что получилось. Зато теперь проблем нет, куча мелочей в голове которые всегда пригодяться. А читать и заучивать правила это удел заучек

Согласен впринципи. Ну а все же.

@maximus2011 · 15.04.2013, 20:12

Ну вот вам по вашей ситуации коротко:

Все блоки div строятся в ряд по вертикали вниз.

Если вы делаете два или более блока в ряд по горизонтали, всегда нужно применять свойство

CSS
1
float

и не забывать про

CSS
1
clear

это своего рода подставка под горизонтально расположенные блоки. Так же можно использовать свойство

CSS
1
overflow

но иногда его не удобно использовать

CSS
1
position:fixed;

Фиксирует блок в браузере не давая ему двигаться с места. Указывая расположение, вы указываете отступ от краев браузера, если нужно чтобы блок фиксировался относительно родительского блока, значит родительскому блоку нужно указать

CSS
1
position:relative;

то же самое относиться и к блокам с

CSS
1
position:absolute;

ну вот как-то так

@vanyakilkil · 15.04.2013, 20:17 **[ТС]**

Спасибо

Пойду теперь тренироваться

@maximus2011 · 15.04.2013, 20:20

незачто, почитайте про эти свойства, поиграйте с ними и больше для работы с блоками впринципе и не надо. Остальное приложится

Donald28 · 15.04.2013, 23:10

Просто твои блоки не умещаются в по ширине браузера, поэтому начинают прыгать с места на место, при изменении ширины этого браузера.

Оберни эти блоки в div, например c id=wrapper:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="wrapper">
<div id="shapka">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="piar">
</div>
<div id="niz">
</div>
</div>

и задай этому диву определенную ширину, так понял, надо не меньше 1460px делать.

P.S.

CSS
1
2
3
4
5
6
#piar{
position: fixed; /* так как задано фиксированное положение*/
border: 1px solid red;
height: 400px;
float: right; /* то обтекание не требуется, его никто обтекать не будет. Тоже самое и при position: absolute;*/
}

@vanyakilkil · 15.04.2013, 23:31 **[ТС]**

Как я понял нужно взять и поместить эти блоки в один блок, который будет равен полностью размерам страницы?

Donald28 · 15.04.2013, 23:33

угу

@vanyakilkil · 15.04.2013, 23:34 **[ТС]**

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

угу

А вот такой момент. Если страница будет увеличиваться по размерам, как поведет себя блок? И еще, какое четкое разрешение нужно ставить? Ведь мониторы у всех разные

Donald28 · 15.04.2013, 23:38

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

Если страница будет увеличиваться по размерам, как поведет себя блок?

блоки будут на месте, только все это будет примыкать к левому краю

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

какое четкое разрешение нужно ставить?

Вот тут я не понял. Если разрешение монитора не позволит уместить сайт, то появятся полосы прокрутки

@vanyakilkil · 15.04.2013, 23:41 **[ТС]**

Вот я бы и не хотел чтобы они появлялись. Чтобы на всех мониторах все подходило.

Donald28 · 15.04.2013, 23:47

тогда надо, либо уменьшать ширину сайта, чтобы подходило для самого маленького разрешения. Либо делать резиновую верстку (но мне этот стиль не нравится)

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни 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 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.04.2013, 06:23
	www.csstemplater.com 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.04.2013, 09:39
	maximus2011, ну что Вы на каждый вопрос, касающейся верстки, даете эту ссылку? Лучше объясните своими словами ошибку. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.04.2013, 10:15
	Человек должен сам понять принцип построения блоков, исходя из готового кода. Тогда он и поймет ошибку. А расписывать в теме учебник по html и css не вижу смысла. Тем более, что человек сам сверстал страничку, значит учебник уже читал 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.04.2013, 13:07
	maximus2011, у меня складывается такое ощущение, что вы просто не можете - своими словами. Тогда лучше промолчать. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.04.2013, 18:33
	ну я незнаю что у вас там и куда складывается, но когда есть конкретный вопрос, я всегда даю конкретный ответ. А когда человек, не может понять элементарных правил css, я не вижу смысла, опять же повторюсь (переписывать в пост учебник по html и css) Самое лучшее понимание - это трудолюбие, а не готовый продукт. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.04.2013, 20:01
	Ну это похвально, что вы все сами делаете Но для того, чтобы понять, как правильно строятся блоки, лучше всего разобрать готовые примеры и понять, что и как. Зачем стрить новый велик, пытаясь себе что-то доказать? Возьмите готовый и разберите, потом соберете без подсказок и все. Я лично учился так, брал любой сайт в инете на угад, и копировал его своими руками. Потом сравнивал что получилось. Зато теперь проблем нет, куча мелочей в голове которые всегда пригодяться. А читать и заучивать правила это удел заучек 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	15.04.2013, 20:17 [ТС]
	Спасибо Пойду теперь тренироваться 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.04.2013, 20:20
	незачто, почитайте про эти свойства, поиграйте с ними и больше для работы с блоками впринципе и не надо. Остальное приложится 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	15.04.2013, 23:31 [ТС]
	Как я понял нужно взять и поместить эти блоки в один блок, который будет равен полностью размерам страницы? 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	15.04.2013, 23:33
	угу 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	15.04.2013, 23:41 [ТС]
	Вот я бы и не хотел чтобы они появлялись. Чтобы на всех мониторах все подходило. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	15.04.2013, 23:47
	тогда надо, либо уменьшать ширину сайта, чтобы подходило для самого маленького разрешения. Либо делать резиновую верстку (но мне этот стиль не нравится) 0