Как сделать, чтобы меню было всегда слева от центрированного div с position: absolute?

@MaxRumata · Регистрация: 07.11.2014

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

Доброго времени суток!

Я экспериментирую с эффектом параллакс, и у меня есть центрировання многослойная композиция, в которой у всех дивов position: absolute. Как мне сделать слева от этих дивов боковое меню так, чтобы при уменьшении окна браузера композиция "упиралась" в меню и дальше не сдвигалась? Потому что сейчас она наезжает на меню при уменьшении окна.

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

И еще: хотел сделать чтобы меню при прокрутке "пиклеивалось" к верхней границе окна, поэтому оно должно будет менять позиционирование с relative (или любого другого, которое посоветуете) на fixed. И хотелось чтобы при этом оно по-прежнему было слева от композиции.

Как это сделать?

Может возможно как-то задать минимальный отступ слева для композиции? Но она уже центрирована...

Использовать таблицы?.. кажется так уже не делают, может есть другое решение?
Или если все же таблицы то подскажите, как лучше сделать?

В общем задача!

Заранее большое спасибо!

@Justff · 02.12.2014, 01:23

это просто поток ваших мыслей и размышления?

если хотите помощи, выкладывайте код

@Fedor92 · 02.12.2014, 01:35

Если я правильно понимаю, то в статике Вам нужен position:relative, а при прокрутке fixed... Приклеить меню легко... Для того, чтобы оно было сверху достаточно задать свойство top:0, а чтобы было слева left:0... Если хотите немного подвинуть тогда применяем правило (например top:20px, что соответствует отступу слева) ИМХО, всё остальное делается с помощью js... На событие onscroll Вам необходимо повесить изменение css свойств меню... Как-то так...

@MaxRumata · 02.12.2014, 02:59 **[ТС]**

Justff, Да, очень нужен совет

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
<!doctype: html>
<html>
 
<head>
 
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
 
<script>
    function parallax() {
        var fon = document.getElementById ("fon");
        fon.style.top = -(window.pageYOffset / 90)+"px";
        
        var doma_2 = document.getElementById ("doma-2");
        doma_2.style.top = -(window.pageYOffset / 2)+"px";
        
        var doma_3 = document.getElementById ("doma-3");
        doma_3.style.top = -(window.pageYOffset / 1.2)+"px";
        
        var zabor = document.getElementById ("zabor");
        zabor.style.top = -(window.pageYOffset * 1.7)+"px";
        
        var kanal_2 = document.getElementById ("kanal_2");
        kanal_2.style.top = -(window.pageYOffset * 1.4)+"px";
        
    }
 
    
    window.addEventListener("scroll",parallax,false);
 
    
</script>
 
</head>
 
<body>
 
    <div id="main">
    
    
        <div id="header">Заголовок</div>
    
                
    
            
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">Меню</div>
        
            
        <div id="content">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        
        
        
            <div id="footer">Футер</div>
        </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
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
body {
    background: url(../Materials/Photo/Livia/fon.png);
    background-repeat: repeat;
    background-size: 500px;
    background-attachment: fixed;
    
    
}
 
* {
    padding:0;
    margin:0;
}
 
 
 
#header {
 
    font-style: italic;
    height: 50px;
    padding: 20px;
    width: 90%;
    position: absolute;
    text-align: center;
    
    
 
 
}
 
 
 
 
#footer {
        
        margin-top: 500px;
        height: 100px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        }
        
#content {
    position: absolute;
}
    
    
    
/*Слои с домами */
 
 
#fon {
 
    position: absolute;
    width: 800px;
    height: 1000px;
margin-top: -180px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/vodopad_fon_most_realwater_2.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-2 {
position: absolute;
 
 
    width: 800px;
    height: 875px;
    margin-top: 430px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
    background: url(../Materials/Photo/Kuldiga/Shapka/domiki_1_11.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-3 {
 
    position: absolute;
    width: 800px;
    height: 2000px;
    margin-top: 675px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_1_2.png) no-repeat;
    background-size: 100%;
    
 
}
 
#zabor {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1790px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/derevo_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
#kanal_2 {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1660px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_2_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
 
.menu{
    
    ou
    left: 200px;
    float: left;
    text-align: left;
}
 
#doma-1 {
    z-index: 1;
}
 
#doma-2 {
    z-index: 2;
}
 
#doma-3 {
    z-index: 3;
}
 
#zabor {
    z-index: 5;
}
 
#kanal_2 {
    z-index: 4;
}

Добавлено через 3 минуты
Fedor92, Да, спасибо!

Я нашел интересный вариант - урок, но у меня проблема с тем как сделать чтобы рядом с меню находящаяся группа слоев с абсолютным позиционированием и центрированная при уменьшении окна браузера не наезжала на меню (и не подъезжало под него), а примыкала и дальше не смещалось. Вот такая задача

Добавлено через 3 минуты
P.S. Там где в CSS стиль класса menu - это просто черновик, я экспериментировал с азными вариантами и скопировал что было на настоящий момент.

@Fedor92 · 02.12.2014, 11:34

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

у меня проблема с тем как сделать чтобы рядом с меню находящаяся группа слоев с абсолютным позиционированием и центрированная при уменьшении окна браузера не наезжала на меню (и не подъезжало под него), а примыкала и дальше не смещалось. Вот такая задача

Проблема, как раз с абсолютным позиционированием, на которое неадекватно реагируют браузеры поскольку при изменении расширения блоки никуда двигаться в абсолютной позиции не будут... Как вариант можно попробовать обернуть блоки с абсолютным позиционированием в блок со свойством position:relative и уже с ним проводить манипуляции по позиционированию относительно меню или меню относительно данного блока

... Или опять же обратиться к js, но как мне кажется - это более топорный вариант...

@MaxRumata · 02.12.2014, 13:26 **[ТС]**

Fedor92, Да я как раз пытался обернуть их в блок с другим позиционированием, но, насколько я понимаю, блоки с абсолютным позиционированием нельзя поместить в другой блок, ведь они не меняют его высоту, верно? Я еще не пробовал задать высоту вручную, но мне кажется что все рвано блок-родитель не будет влиять на вложенные...

@Fedor92 · 02.12.2014, 15:06

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

мне кажется что все рвано блок-родитель не будет влиять на вложенные...

Почему же? Очень даже будет...

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

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

А зачем они должны менять его высоту? Можно задать размеры родительского блока и внутри него спозиционировать дочерние аккурат по его высоте...

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

@MaxRumata · 03.12.2014, 01:38 **[ТС]**

Fedor92, Попробовал, странный глюк получается. Я сделал со скринами:

1 этап.

1. Так выглядит страница в начале, до помещения многослойной композиции в родительский див. По центру многослойная композиция, слева вверху видны буквы "ляляля" - это слово лежит внутри дива в котором будет меню (написал для теста).

Вот код:

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
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
<!doctype: html>
<html>
 
<head>
 
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
 
<script>
    function parallax() {
        var fon = document.getElementById ("fon");
        fon.style.top = -(window.pageYOffset / 90)+"px";
        
        var doma_2 = document.getElementById ("doma-2");
        doma_2.style.top = -(window.pageYOffset / 2)+"px";
        
        var doma_3 = document.getElementById ("doma-3");
        doma_3.style.top = -(window.pageYOffset / 1.2)+"px";
        
        var zabor = document.getElementById ("zabor");
        zabor.style.top = -(window.pageYOffset * 1.7)+"px";
        
        var kanal_2 = document.getElementById ("kanal_2");
        kanal_2.style.top = -(window.pageYOffset * 1.4)+"px";
        
    }
 
    
    window.addEventListener("scroll",parallax,false);
 
    
</script>
 
</head>
 
<body>
 
    <div id="main">
    
    
        <div id="header">Заголовок</div>
    
                
        
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">ляляля</div>
    
            
        <div id="content">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        
        
        
            <div id="footer">Футер</div>
        </div>
    </div>
</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
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
body {
    background: url(../Materials/Photo/Livia/fon.png);
    background-repeat: repeat;
    background-size: 500px;
    background-attachment: fixed;
    
    
}
 
* {
    padding:0;
    margin:0;
}
 
 
 
#header {
 
    font-style: italic;
    height: 50px;
    padding: 20px;
    width: 90%;
    position: absolute;
    text-align: center;
    
    
 
 
}
 
 
 
 
#footer {
        
        margin-top: 500px;
        height: 100px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        }
        
 
 
/*Слои с композицией */
 
 
#fon {
 
    position: absolute;
    width: 800px;
    height: 1000px;
margin-top: 1px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/vodopad_fon_most_realwater_2_crop.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-2 {
position: absolute;
 
 
    width: 800px;
    height: 875px;
    margin-top: 430px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
    background: url(../Materials/Photo/Kuldiga/Shapka/domiki_1_11.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-3 {
 
    position: absolute;
    width: 800px;
    height: 2000px;
    margin-top: 675px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_1_2.png) no-repeat;
    background-size: 100%;
    
 
}
 
#zabor {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1790px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/derevo_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
#kanal_2 {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1660px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_2_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
 
.menu{
    
 
    left: 200px;
    float: left;
    
}
 
#doma-1 {
    z-index: 1;
}
 
#doma-2 {
    z-index: 2;
}
 
#doma-3 {
    z-index: 3;
}
 
#zabor {
    z-index: 5;
}
 
#kanal_2 {
    z-index: 4;
}

залить картинку на форум

2 этап:

2. Это первое что происходит после помещения композиции в родительский див с position: relative. Ширину и высоту задал в пикселях, с запасом. Сделал синюю обводку чтобы видеть границы родительского дива.

На этом этапе 2 вопроса:

а) Почему если задать родительскому диву ширину 100% он не растягивается на ширину окна а вообще не отображается?

б) Почему все уползло влево и похоже с захлестом и за край (синяя граница слева не видна)?

Вот изменения в коде:

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div id="main">
    
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">ляляля</div>
    
            </div>

CSS:

CSS
1
2
3
4
5
6
7
    #main {
        position: relative;
        outline: solid blue;
        width: 800px;
        height: 5000px;
        
    }

залить картинку на форум

Добавлено через 23 минуты
3 Этап:

Я задаю отступ слева для родительского дива через left: 200px. Композиция смещается вместе с дивом, но я не понимаю что происходит с контурами родительского дива (а значит и с его формой)?Вот в чем вопрос.

Изменения в коде:

CSS:

CSS
1
2
3
4
5
6
7
8
    
#main {
        position: relative;
        outline: solid blue;
        width: 800px;
        height: 5000px;
        left: 200px;
    }

фотохостинг бесплатно

image share

Добавлено через 3 минуты
Ну и на скринах видно что композиция ложится поверх дива с "ляляля" в котором будет меню, а мне нужно чтобы она упиралась в меню. Поэтому следующий вопрос после вышеперечисленных, как это сделать, после того как привести в порядок родительский див

Если можно подробнее, потому что я еще плохо разбираюсь, други, недавно начал изучать создание сайтов.

@Fedor92 · 03.12.2014, 11:34

MaxRumata, а зачем Вы пишите большими буквами? Вроде всё итак неплохо видно...

На край есть масштабирование... Ну и начну с вопроса на засыпку, а где собственно свойства блока main и для чего Вы его вообще создаёте? Думаю вопрос на этапе 3 отпадёт сам собой...

Добавлено через 14 минут
Нет... Надо немного перефразировать вопрос, а то ничего не поймёте... Сразу отправлю на первоисточник Значение position:absolute - там всё изложено... Ну а дальше математика...

@MaxRumata · 04.12.2014, 23:14 **[ТС]**

Fedor92, Размер менял в качестве эксперимента

Извините, не совсем понял. Определение я читал, но перечитал на всякий случай

Блок main это и есть родительский див с position: relative, в который я хотел поместить композицию слоев с картинками (у которых position:absolute), в надежде что если я затем центрирую этот родительский див, а слева добавлю меню, при уменьшении окна браузера он не будет наезжать на меню.

Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь!

Добавлено через 5 минут
Свойства блока main (Вы имеете в виду стиль css?) Описаны в моем посте выше.

@Fedor92 · 04.12.2014, 23:24

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

Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь!

Вообще сразу бросается Ваш подход к вёрстке, а точнее стили css... К примеру у Вас почти везде присутствует(даже не почти, а везде) position:absolute... Данное явление само по себе не очень хорошо отражается на вёрстке... И лучше стараться не прибегать к использованию данного свойства... ИМХО, лучше располагать блоки с помощью float:left - данное свойство помогает выравнивать блоки относительно родительских элементов при этом они не выпадают из потока... И при выкладывании на хостинг сайта у Вас не возникнет проблем с отступами или каким-то разнобоем... Второе, что хочется отметить - это использование Вами отступов от границ окна, что тоже не есть хорошо... Третье - Вы всем блокам задаёте позишн, хотя это совсем не обязательно... Пока у Вас хромает понимание свойств позишн и выравнивания флоат, но всё можно подтянуть... Попробуйте пока просто потренироваться в расположении блоков без контента с очерченными границами, посмотрите, как ведут себя блоки при изменеии того или иного свойства css, чтобы у Вас было чёткое понимание, что к чему... На выхах у меня будет время, выкладывайте контент или пишите в личку все пожелания по вёрстке - я наверстаю простенький макет, а потом разберём, что к чему или я комменты пропишу на худой конец... Пока поступим так...

@MaxRumata · 04.12.2014, 23:35 **[ТС]**

Fedor92, Спасибо Вам огромное! Мне очень важна критика, так как я еще только учусь

Position absolute я использую потому что использую эффект параллакса, если есть другой способ без абсолютного позиционирвоания - буду рад ему научиться!
Отступы (margin-top использую потому что если использовать top, по непонятной мне причине при начале прокрутки происходит скачек, я создавал об этом тему на форуме, но мы так и не нашли причину, и margin стал временным решением (с ним скачка нет). Если бы получилос разобраться и с этим, было бы круто!
Да, я тоже думал о float...
Еще раз спасибо Вам за терпение и попощь!

В личку кину архив,завтра напишу подробнее как себе представляю сайт. Я на маке, поэтому в виндоусе могут быть видны лишние системные файлы, думаю их можно просто удалить. Стартовый файл сайта index.html.

@Fedor92 · 04.12.2014, 23:39

Договорились... Вы слишком зациклены на паралаксе... Это не Вы должны плясать вокруг паралакса...

Либо завтра вечером - либо в субботу вечером я Вам отвечу или в вск, короче как получится...

@MaxRumata · 05.12.2014, 00:05 **[ТС]**

Fedor92, Ок, договорились!

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74

	Как сделать, чтобы меню было всегда слева от центрированного div с position: absolute? 02.12.2014, 01:06. Показов 3410. Ответов 13 Метки нет (Все метки) Доброго времени суток! Я экспериментирую с эффектом параллакс, и у меня есть центрировання многослойная композиция, в которой у всех дивов position: absolute. Как мне сделать слева от этих дивов боковое меню так, чтобы при уменьшении окна браузера композиция "упиралась" в меню и дальше не сдвигалась? Потому что сейчас она наезжает на меню при уменьшении окна. Ведь, насколько я понимаю, абсолютные дивы невозможно поместить в див, и поэтому вариант с float не сработает? И еще: хотел сделать чтобы меню при прокрутке "пиклеивалось" к верхней границе окна, поэтому оно должно будет менять позиционирование с relative (или любого другого, которое посоветуете) на fixed. И хотелось чтобы при этом оно по-прежнему было слева от композиции. Как это сделать? Может возможно как-то задать минимальный отступ слева для композиции? Но она уже центрирована... Использовать таблицы?.. кажется так уже не делают, может есть другое решение? Или если все же таблицы то подскажите, как лучше сделать? В общем задача! Заранее большое спасибо! 0

@Justff 48 / 87 / 11 Регистрация: 12.08.2013 Сообщений: 474
	02.12.2014, 01:23
	это просто поток ваших мыслей и размышления? если хотите помощи, выкладывайте код 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.12.2014, 01:35
	Если я правильно понимаю, то в статике Вам нужен position:relative, а при прокрутке fixed... Приклеить меню легко... Для того, чтобы оно было сверху достаточно задать свойство top:0, а чтобы было слева left:0... Если хотите немного подвинуть тогда применяем правило (например top:20px, что соответствует отступу слева) ИМХО, всё остальное делается с помощью js... На событие onscroll Вам необходимо повесить изменение css свойств меню... Как-то так... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	02.12.2014, 13:26 [ТС]
	Fedor92, Да я как раз пытался обернуть их в блок с другим позиционированием, но, насколько я понимаю, блоки с абсолютным позиционированием нельзя поместить в другой блок, ведь они не меняют его высоту, верно? Я еще не пробовал задать высоту вручную, но мне кажется что все рвано блок-родитель не будет влиять на вложенные... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.12.2014, 11:34
	MaxRumata, а зачем Вы пишите большими буквами? Вроде всё итак неплохо видно... На край есть масштабирование... Ну и начну с вопроса на засыпку, а где собственно свойства блока main и для чего Вы его вообще создаёте? Думаю вопрос на этапе 3 отпадёт сам собой... Добавлено через 14 минут Нет... Надо немного перефразировать вопрос, а то ничего не поймёте... Сразу отправлю на первоисточник Значение position:absolute - там всё изложено... Ну а дальше математика... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	04.12.2014, 23:14 [ТС]
	Fedor92, Размер менял в качестве эксперимента Извините, не совсем понял. Определение я читал, но перечитал на всякий случай Блок main это и есть родительский див с position: relative, в который я хотел поместить композицию слоев с картинками (у которых position:absolute), в надежде что если я затем центрирую этот родительский див, а слева добавлю меню, при уменьшении окна браузера он не будет наезжать на меню. Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь! Добавлено через 5 минут Свойства блока main (Вы имеете в виду стиль css?) Описаны в моем посте выше. 0

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	04.12.2014, 23:35 [ТС]
	Fedor92, Спасибо Вам огромное! Мне очень важна критика, так как я еще только учусь Position absolute я использую потому что использую эффект параллакса, если есть другой способ без абсолютного позиционирвоания - буду рад ему научиться! Отступы (margin-top использую потому что если использовать top, по непонятной мне причине при начале прокрутки происходит скачек, я создавал об этом тему на форуме, но мы так и не нашли причину, и margin стал временным решением (с ним скачка нет). Если бы получилос разобраться и с этим, было бы круто! Да, я тоже думал о float... Еще раз спасибо Вам за терпение и попощь! В личку кину архив,завтра напишу подробнее как себе представляю сайт. Я на маке, поэтому в виндоусе могут быть видны лишние системные файлы, думаю их можно просто удалить. Стартовый файл сайта index.html. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.12.2014, 23:39
	Договорились... Вы слишком зациклены на паралаксе... Это не Вы должны плясать вокруг паралакса... Либо завтра вечером - либо в субботу вечером я Вам отвечу или в вск, короче как получится... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	05.12.2014, 00:05 [ТС]
	Fedor92, Ок, договорились! 0