Margin: 0 auto; не помогает?! Сайт уезжает при масштабе 33%!

@a4t_ech · Регистрация: 10.08.2015

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

Моцк кипит, а ошибка не найдена! Пожалуйста помогите! Собственно вот "тонны" кода!

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
<!DOCTYPE html>
<html>
    <head>
        <title>My site</title>
        <meta charset = "utf-8"/>
        <link href = "css.css" rel = "stylesheet" type = "text/css">
    </head>
    <body>
        <div id = "super">
            <div id = "main" class = "radius">
                <div id = "header">
                    <div id = "header_menu">
                        <ul>
                            <li><a href = "#">Главная</a></li>
                            <li><a href = "#">Новости</a></li>
                            <li><a href = "#">Услуги</a></li>
                            <li><a href = "#">Профиль</a></li>
                            <li><a href = "#">Поиск</a></li>
                            <li><a href = "#">Правила</a></li>
                            <li><a href = "#">Контакты</a></li>
                        </ul>
                        <form method = "" action = "">
                            <a href = "#">
                            <img src = "images/magnifier-medium-left_2519.png" class = "serch"/>
                            </a>
                            <input type = "text" name = "serch" placeholder = "Что ищем?" class = "radius">
                        </form>
                    </div>
                    <h1><span style = "color: gold">Web</span> site</h1>
                    <div id = "header_profile">
                        <div id = "user"></div>
                        <div id = "buttons">
                            <ul id = "buttons_ul">
                                <li><a href = "#">Правила сайта</a></li>
                                <li><a href = "#">Создать тему</a></li>
                            </ul>
                        </div>      
                    </div>
                </div>
                <div id = "sidebar">
                    <div class = "sb_nav"><img src = "images/settings.png" class = "img"/>Настройки</div>
                    <div class = "sb_menu">
                        <ul>
                            <li><a href = "#" class = "sb_li">Изменить аватар</a></li>
                            <li><a href = "#" class = "sb_li">Редактировать профиль</a></li>
                            <li><a href = "#" class = "sb_li">Опции</a></li>
                            <li><a href = "#" class = "sb_li">Список игнорирования</a></li>
                        </ul>
                    </div>  
                    <div class = "sb_nav"><img src = "images/messages.png" class = "img"/>Сообщения</div>
                    <div class = "sb_menu">
                        <ul>
                            <li><a href = "#" class = "sb_li">Список сообщений</a></li>
                            <li><a href = "#" class = "sb_li">Новое сообщение</a></li>
                            <li><a href = "#" class = "sb_li">Поиск</a></li>
                            <li><a href = "#" class = "sb_li">Папки</a></li>
                        </ul>
                    </div>  
                    <div class = "sb_nav"><img src = "images/contacts.png" id = "cont_img" class = "img"/>Контакты</div>
                    <div class = "sb_menu">
                        <ul>
                            <li><a href = "#" class = "sb_li">Мои друзья</a></li>
                            <li><a href = "#" class = "sb_li">Добавить друга</a></li>
                            <li><a href = "#" class = "sb_li">Социальные группы</a></li>
                        </ul>
                    </div>
                </div>
                <div id = "left_c">
                    <div class = "cl_menu">
                        <h2>Как добавить картинку на веб-страницу?</h2>
                    </div>
                    <div class = "menu_text">
                        <p class = "cl_menu_text">Для добавления изображения в документ применяется<br>
                            тег <span class = "spec_blue"><img></span>, его атрибут <span class = "spec_red">src</span> определяет путь к графическому 
                            файлу, который должен быть в формате GIF, PNG или JPEG. 
                            Также для тега <span class = "spec_blue"><img></span> необходимо указать обязательный атрибут 
                            <span class = "spec_red">alt</span>, он описывает альтернативный текст видимый в процессе 
                            загрузки изображения или при отключении картинок в браузере.</p>
                        <div>
                            <a href = "#" class = "href">Читать далее ---->>></a>
                        </div>
                    </div>
                    <hr class= "hr"/>
                    <div class = "cl_menu">
                        <h2>Как открыть ссылку в новом окне?</h2>
                    </div>
                    <div class = "menu_text">
                        <p class = "cl_menu_text">По умолчанию ссылки открываются в том же окне, где они расположены. 
                        Чтобы любая ссылка открывалась в новом окне, к тегу <span class = "spec_blue"><a></span> следует добавить 
                        атрибут <span class = "spec_red">target</span> со значением <span class = "spec_blue">_blank</span>.</p>
                        <div>
                            <a href = "#" class = "href">Читать далее ---->>></a>
                        </div>
                    </div>
                    <hr class= "hr"/>
                    <div class = "cl_menu">
                        <h2>Как сделать обтекание картинки текстом?</h2>
                    </div>
                    <div class = "menu_text">
                        <p class = "cl_menu_text">Обтекание картинки текстом обычно используется для компактного размещения материала 
                        и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства <span class = "spec_red">float</span>, 
                        добавляемого к селектору <span class = "spec_blue">IMG</span>. Значение <span style = "color: green;">left</span> выравнивает изображение по левому краю, 
                        <span style = "color: green;">right</span> — по правому. 
                        Обтекание при этом происходит по другим, свободным сторонам.</p>
                        <div>
                            <a href = "#" class = "href">Читать далее ---->>></a>
                        </div>
                    </div>
                    <hr class= "hr"/>
                    <div class = "cl_menu">
                        <h2>Как добавить рамку к изображению?</h2>
                    </div>
                    <div class = "menu_text">
                        <p class = "cl_menu_text">Для добавления рамки вокруг картинки применяется стилевое свойство border, которое следует 
                        добавить к селектору IMG. В качестве значения одновременно указывается толщина границы, её стиль и цвет. Например, 
                        для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать <span style = "text-style: italic">img {border: 2px solid #ff0000;}</span>.</p>
                        <div>
                            <a href = "#" class = "href">Читать далее ---->>></a>
                        </div>
                    </div>
                </div>  
                <div id = "right_c">
                    <div id = "right_top">
                        <div class = "video_name">
                            <h2>Как создать свой сайт</h2>
                        </div>  
                        <div id = "video_menu">
                            <ul>
                                <li>Просмотров</li>
                                <li>Комментарии</li>
                                <li>Автор</li>
                            </ul>
                        </div>
                    </div>
                    <div><img src = "images/bodybg.jpeg"/ class = "r_img"/></div>
                    <div id = "discription">
                        <p class = "discription">
                            Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) 
                            называется набор параметров форматирования, который применяется к 
                            элементам документа, чтобы изменить их внешний вид. Возможность 
                            работы со стилями издавна включают в развитые издательские системы
                            и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать
                            тексту заданный, заранее установленный вид. Теперь это доступно и 
                            создателям сайта, когда цвет, размеры текста и другие параметры хранятся
                            в определенном месте и легко «прикручиваются» к любому тегу. 
                        </p>
                    </div>
                    
                    <div id = "right_bottom">
                        <div class = "video_name">
                            <h2>Как создать свой сайт</h2>
                        </div>
                        <div id = "video_menu">
                            <ul>
                                <li>Просмотров</li>
                                <li>Комментарии</li>
                                <li>Автор</li>
                            </ul>
                        </div>
                    </div>
                    <div><img src = "images/bodybg.jpeg"/ class = "r_img"/></div>
                    <div>
                        <p class = "discription">
                            Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) 
                            называется набор параметров форматирования, который применяется к 
                            элементам документа, чтобы изменить их внешний вид. Возможность 
                            работы со стилями издавна включают в развитые издательские системы
                            и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать
                            тексту заданный, заранее установленный вид. Теперь это доступно и 
                            создателям сайта, когда цвет, размеры текста и другие параметры хранятся
                            в определенном месте и легко «прикручиваются» к любому тегу. 
                        </p>
                    </div>
                </div>
                <div class = "clr"></div>
                <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
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
*{
    margin: 0;
    padding: 0;
    outline: none;
}
 
a{
    text-decoration: none;
}
.radius, .cl_menu{
    border-radius: 5px;
}
body{
    background: black;
    
}
#super{
    margin: 0 auto;
}
#main{
    width: 1000px;
    margin: 35px auto;
    overflow: hidden;
}
#header{
    height: 100px;
    border-bottom:  solid 3px gold;
    background: #808080;
    
}
#header_menu{
    height: 50px;
    border-bottom:  solid 1px gold;
}
#header_menu ul{
    list-style: none;
    
}
#header_menu ul li{
    float: left;
    border-right: solid 1px gold;
    
}
#header_menu ul li:last-child{
    border-right: none;
}
#header_menu ul li a{
    color: white;
    display: block;
    line-height: 50px;
    padding: 0 10px;
}
#header_menu ul li a:hover{
    background: white;
    color: black;   
}
input[name=serch]{
    float: right;
    margin-top: 12px;
    margin-right: 5px;
    height: 25px;
    border: none;
    width: 200px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    background: white;
    padding: 0 5px; 
}
.serch{
    float: right;
    width: 25px;
    height: 25px;
    margin-top: 12px;
    margin-right: 10px;
}
h1{
    padding-left: 10px;
    padding-top: 10px;
    color: white;
    font-size: 25px;
    float: left;
}
#header_profile{
    width: 600px;
    height: 47px;
    //outline: 1px solid black;
    float: right;
    margin-top: 1px;
    margin-right: 5px;
}
#buttons{
    width: 300px;
    height: 47px;
    float: right;
    
}
#buttons_ul{
    list-style: none;
    margin-top: 8px;
}
#buttons_ul li{
    float: right;
    border-radius: 3px;
    background: #2F4F4F;
    margin-right: 10px; 
}
#buttons_ul li a{
    color: white;
    display: block;
    padding: 8px;
    padding-left: 20px; 
    padding-right: 20px;
}
#buttons_ul li a:hover{
    color: black;
    background: white;
    border-radius: 3px;
}
#sidebar{
    width: 192px;
    float: left;
    background: #808080;
    height: 828px;
    
}
.sb_nav{
    background: #2F4F4F;
    color: white;
    font-size: 20px;
    line-height: 39px;
    border-bottom: 3px solid gold;
    
}
.img{
    width: 30px;
    height: 20px;
    float: left;
    margin-left: 25px;
    margin-top: 9px;
    padding-right: 5px;
}
 
#cont_img{
    width: 35px;
    height: 25px;
    margin-top: 8px;
}
.sb_menu{
    text-align: center;
    line-height: 30px;
    font-size: 15px;    
}
.sb_li{
    background: #A9A9A9;
    color: white;
    display: block;
    border-bottom: 1px solid gold;  
}
.sb_li:hover{
    color: black;
    background: gold;
    border-color: gold;
    border-radius: 15px;
}
#left_c{
    width: 350px;
    background: #FFFAFA;
    color: #A9A9A9;
    padding-left: 5px;
    float: left;
    height: 828px;
    border-left: 3px solid gold;
    border-right: 2px solid gray;
}
.clr{
    clear: both;
}
.cl_menu{
    background: grey;
    width: 300px;
    margin-left: 10px;
    margin-top: 10px;
    height: 35px;
    line-height: 35px;
    font-size: 10px;
    padding-left: 20px;
    text-align: left;
    color: white;
}
.cl_menu_text{
    color: black;
    font-size: 13px;
    margin-left: 8px;
    margin-right: none;
    margin-top: 10px;
    width: 320px;
    word-break: break-all;
    
    
}
.hr{
    margin-right: 15px;
    margin-left: 7px;
    margin-top: 15px;
    width: 325px;
}
.spec_blue{
    color: blue;
}
.spec_red{
    color: red;
}
.menu_text{
    width: 350px;
}
p { 
    text-indent: 1em; /* Отступ первой строки */
    text-align: left; /* Выравнивание по ширине */
    /*word-break: break-all;*/
}
.href{
    font-size: 10px;
    float: right;
    margin-bottom: 5px;
    padding-right: 25px;
    color: blue;
}
#right_c{
    background: #FFFAFA;
    float: right;
    height: 828px;
    width: 448px;
}
.video_name{
    color: gray;
    height: 25px;
    line-height: 25px;
    text-align: left;
    font-size: 13px;
    padding: 6px 0 9px 45px;
    text-align: center; 
    border-bottom: 1px solid gray;
    
}
#video_menu{
    width: 448px;
}
#video_menu ul{
    list-style: none; 
}
#video_menu ul li{
    display: block;
    float: left;
    width: 149px;
    text-align: center;
    color: #4682B4;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid gray;
}
.r_img{
    width: 400px;
    height: 200px;
    margin: 10px 0;
    margin-left: 25px;
}
#discription{
    border-bottom: 5px solid #2F4F4F;
}
.discription{
    color: black;
    font-size: 12px;
    padding: 0 5px 10px 5px;
    
}
#footer{
    background: #696969;
    height: 100px;
    width: 1000px;
}

@SF · 15.08.2015, 22:02

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

а ошибка не найдена!

a4t_ech,Ошибку создает border-right

CSS
1
2
3
#left_c {
   border-right: 2px solid gray;
}

@a4t_ech · 15.08.2015, 22:40 **[ТС]**

Вы правы! Исправил и все заработало! Как искать подобные ошибки в коде?

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	15.08.2015, 22:40 [ТС]
	Вы правы! Исправил и все заработало! Как искать подобные ошибки в коде? 0