CSS div "разлазятся" при растягивании страницы :(

@Товарищ Саахов · Регистрация: 04.10.2011

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

Привет всем, скажите в чем может быть проблема:

есть код:

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
<html>
<head>
<title></title>
</head>
<body>
<div align = "center"> 
<div class="block6">
<img src="1.jpg">
</div>
<div class="block4">
<ul>
<li><input type="button" value="l1"></li>
<li><input type="button" value="l2"></li>
<li><input type="button" value="l3"></li>
<li><input type="button" value="l4"></li>
</ul>
</div>
<div class="block5">
<ul>
<li><input type="button" value="r1"></li>
<li><input type="button" value="r2"></li>
<li><input type="button" value="r3"></li>
<li><input type="button" value="r4"></li>
</ul>
</div>
</div>
</br>
<div id="menubar" >
<div  class="menu_item">
<ul>
<li><input type="button" value="1"></li>
<li><input type="button" value="4"></li>
<li><input type="button" value="7"></li>
</ul>
</div>
<div  class="menu_item">
<ul>
<li><input type="button" value="2"></li>
<li><input type="button" value="5" onclick="changeScene(5)"></li>
<li><input type="button" value="8"></li>
<li><input type="button" value="0"></li>
</ul>
</div>
<div  class="menu_item">
<ul>
<li><input type="button" value="3"></li>
<li><input type="button" value="6"></li>
<li><input type="button" value="9"></li>
</ul>
</div>
</div>
</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
<style>
   li {
    list-style-type: none; 
   }
   ul {
    margin-left: 0; 
    padding-left: 0; 
   }
   .block1 { 
    bottom: 15px; 
    left: 30px; 
   }
#menubar
{
position: fixed; 
height: 150px;
width: 700px;
tex-align: center;
}
.menu_item
{
 margin: 0px auto;
 margin-right: 10px;
 float: right;
}
 
.block4{
position: fixed; 
    left: 450px; 
    top: 30%; 
}
.block5{
 position: fixed; 
    right: 450px;
    top: 30%; 
}
 
  </style>

вопрос почему при растягивании страницы, все дивы разлезаются?
вроде ж position: fixed; не должна давать это делать?

@maximus2011 · 09.01.2013, 05:55

Это не к вашей теме. Это к многим темам такого характера.

Блин, последнее время такие коды показывают, ужас. Ребят учитесь сначала видеть и строить правильно структуру страницы, а уж потом верстайте. ИМХО "Это тоже самое, что сделать дверь в подъезд, скажем, где-нибудь на 6 этаже.

@Taatshi · 09.01.2013, 08:49

Не по теме:

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

@Товарищ Саахов · 09.01.2013, 12:39 **[ТС]**

спасибо за ответ, а по теме указать на ошибку, и подсказать как исправить можно?

@dane.yeah · 10.01.2013, 02:21

Сообщение от Товарищ Саахов

спасибо за ответ, а по теме указать на ошибку, и подсказать как исправить можно?

у тебя же position:fixed; поэтому и разъезжаются, не отступая от своих значений

Сообщение от html-book

Синтаксис
position: absolute | fixed | relative | static | inherit

Значения
absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

@Товарищ Саахов · 13.01.2013, 16:24 **[ТС]**

ну когда я ставлю static дивы вообще вниз уходят.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ATM Instruction</title>
<style>
body { 
    margin: 0;
   }
 
li {
    list-style-type: none; 
   }
ul {
    margin-left: 0; 
    padding-left: 0; 
   }
#topmenu{
position:relative;
}
.menu_item1{
position:absolute;
left:300px;
top:200px;
width:100px;
}
.menu_item2{
position:absolute;
right:300px;
top:200px;
width:100px;
}
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div align = "center" id="topmenu" > 
    <div class="menu_item">
        <img src="img.jpg" id="menu">
    </div>
    <div class="menu_item1">
        <ul>
        <li><input type="button" value="l1" ></li>
        <li><input type="button" value="l2"></li>
        <li><input type="button" value="l3"></li>
        <li><input type="button" value="l4"></li>
        </ul>
    </div>
    <div class="menu_item2">
        <ul>
        <li><input type="button" value="r1" ></li>
        <li><input type="button" value="r2"></li>
        <li><input type="button" value="r3"></li>
        <li><input type="button" value="r4"></li>
        </ul>
    </div>
</div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	09.01.2013, 05:55
	Это не к вашей теме. Это к многим темам такого характера. Блин, последнее время такие коды показывают, ужас. Ребят учитесь сначала видеть и строить правильно структуру страницы, а уж потом верстайте. ИМХО "Это тоже самое, что сделать дверь в подъезд, скажем, где-нибудь на 6 этаже. 1

@Taatshi
	09.01.2013, 08:49
	Не по теме: maximus2011, вступление многообещающее. Еще бы по конкретному случаю - указать на ошибку - было бы вообще замечательно. 0

@Товарищ Саахов 0 / 0 / 0 Регистрация: 04.10.2011 Сообщений: 32
	09.01.2013, 12:39 [ТС]
	спасибо за ответ, а по теме указать на ошибку, и подсказать как исправить можно? 0