Необходимо найти ошибку в коде html/css

@Ble3k · Регистрация: 10.06.2016

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

Всем добрый день.
Столкнулся с такой проблемой: есть сайт, на нем есть ссылки на разные страницы, когда я сжимаю размер окна и появляется ползунок, то появляется непонятный "пробел" (см. скрин "1"), при этом появляется не на всех страницах сайта. Когда я увеличиваю ширину окна, непонятный "пробел" (см. скрин "2") пропадает вместе с ползунком (ползунка нет = непонятного пробела тоже).
К сожалению я не могу понять, где искать проблему и что это может быть, чтобы исправить.

Не стал заливать весь код и html и css сюда, т.к это очень громоздко. Я с радостью залью сюда кусок кода, если пойму какой именно кусок нужно залить из html или css.

@aj17 · 10.06.2016, 13:24

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

Не стал заливать весь код и html и css сюда, т.к это очень громоздко.

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

@Ble3k · 10.06.2016, 13:28 **[ТС]**

Хорошо, заливаю архив, спасибо)

@aj17 · 10.06.2016, 13:47

Вам нужно открыть две страницы, проблемную и рабочую, и сравнить их. Проверьте внимательно закрытые не закрытые теги, и вложенность элементов. Даже без кода, видно, что, проблема с header)

@Xteda · 10.06.2016, 14:10

Кто вас научил такой шляпе?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
article {
    display:table;
    width:100%;
}
nav {
    display: table-cell;
    min-width:150px;
    max-width:150px;
    height:auto;
}
section {
    display: table-cell;
    width:auto;
    padding-bottom:45px;
}
aside {
    display:table-cell;
    min-width:150px; 
    max-width:150px;
    height:auto;
}

Уберите все table и table-cell и замените на float или display: inline-block

@Ble3k · 10.06.2016, 14:46 **[ТС]**

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

Вам нужно открыть две страницы, проблемную и рабочую, и сравнить их. Проверьте внимательно закрытые не закрытые теги, и вложенность элементов. Даже без кода, видно, что, проблема с header)

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

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

Кто вас научил такой шляпе?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
article {
    display:table;
    width:100%;
}
nav {
    display: table-cell;
    min-width:150px;
    max-width:150px;
    height:auto;
}
section {
    display: table-cell;
    width:auto;
    padding-bottom:45px;
}
aside {
    display:table-cell;
    min-width:150px; 
    max-width:150px;
    height:auto;
}

Уберите все table и table-cell и замените на float или display: inline-block

Попробовал поменять все table и table-cell на display: inline-block.
Ничего не вышло хорошего (результат на скрине "3")
Вот код CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
article {display:inline-block;
        width:100%
        }
nav    {display:inline-block;
        min-width:150px;
        max-width:150px;
        height:auto;
        box-shadow:1px 0px #848484;
        }
section {display:inline-block;
        width:100%;
        padding:10px 10px 45px 10px;
        }
aside { display:inline-block;
        min-width:150px;
        max-width:150px;
        height:auto;
        box-shadow:-1px 0px #848484;
        }

@Xteda · 10.06.2016, 14:55

Хм... Нельзя вот так просто поменять все table на display: inline-block и получить желаемый результат

Для article уберите inline-block, он тут не нужен. Для section стоит width:100%, поэтому неудивительно, что все попадало. Есть подозрение, что вам просто не хватает знаний. Задайте для блоков, которые должны стоять в строке, процентную ширину. У всех ваших блоков в сумме должно получиться 100%.
PS. Для родителя инлайн-блочных элементов нужно будет задать font-size: 0; иначе они все-равно в строку не станут. Не забудьте для дочерних элементов задать нормальный font-size, а-то, возможно, текста не увидите

@Ble3k · 10.06.2016, 16:15 **[ТС]**

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

Хм... Нельзя вот так просто поменять все table на display: inline-block и получить желаемый результат

Для article уберите inline-block, он тут не нужен. Для section стоит width:100%, поэтому неудивительно, что все попадало. Есть подозрение, что вам просто не хватает знаний. Задайте для блоков, которые должны стоять в строке, процентную ширину. У всех ваших блоков в сумме должно получиться 100%.
PS. Для родителя инлайн-блочных элементов нужно будет задать font-size: 0; иначе они все-равно в строку не станут. Не забудьте для дочерних элементов задать нормальный font-size, а-то, возможно, текста не увидите

Попробовал поставить все 3 блока в строчку, получилось следующее:
1) Для nav, section, aside - задал display:inline-block.
2) Если ставлю ширину 15/70/15 соотв. (что в сумме 100), то блок aside просто съезжает на след. строчку.
3) Если ставлю ширину например 15/68/15 соотв., то блок aside не съезжает на след. строчку в большом окне, но если окно сужается, то съезжает.
4) Если ставлю ширину например 15/65/15 соотв., то блок aside не съезжает вобще, но после блока aside пустое пространство.
5) Так же появилась проблема с высотой теперь, боковые блоки nav и aside не растягиваются по высоте среднего блока section.
6) font-size 0 для родителя инлайн-блочных элементов (в данном случае - article) просто меняет размер текста на 0 (но проблему не решает никак, по моим наблюдениям)

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
header, article, section, nav, aside, footer
{display:block}
#maket {
        width:100%;
        min-width:700px;
                }
header {background:#eee;
        height:100px;
        box-shadow:0px 1px #848484;
        }
article {
        width:100%
        }
nav    {display:inline-block;
        vertical-align:top;
        width:15%;
        height:auto;
        box-shadow:1px 0px #848484;
        }
section {display:inline-block;
        width:65%;
        padding:10px 10px 45px 10px;
        }
aside { border:1px solid black;
display:inline-block;
        vertical-align:top;
        width:15%;
        box-shadow:-1px 0px #848484;
        }
footer {clear:both;
                background:black;
                color:white;
                text-align:center;
                position:fixed;
                bottom:0;
                left:0;
                width:100%;
                height:25px;}           
}

@anttoshka · 10.06.2016, 16:48

Блок aside съезжает на следующую строчку потому что ширина блока рассчитывается так: width + border + padding. Чтобы этого избежать задайте для всех блоков:

CSS
1
2
3
*{
box-sizing: border-box;
}

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

@Ble3k · 10.06.2016, 17:02 **[ТС]**

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

Блок aside съезжает на следующую строчку потому что ширина блока рассчитывается так: width + border + padding. Чтобы этого избежать задайте для всех блоков:

CSS
1
2
3
*{
box-sizing: border-box;
}

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

Прописал данное свойство для всех блоков, но я все также не могу установить ширину 15/70/15:
1) Теперь если ставлю 15/69.5/15, то не съезжает.
2) Теперь если ставлю 15/69.5/15, то съезжает в уменьшенном окне.

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
header, article, section, nav, aside, footer
{
    display:block;
    box-sizing: border-box;
    }
#maket {
        width:100%;
        min-width:700px;
                }
header {background:#eee;
        height:100px;
        box-shadow:0px 1px #848484;
        }
article {
        width:100%
        }
nav    {display:inline-block;
        vertical-align:top;
        width:15%;
        height:auto;
        box-shadow:1px 0px #848484;
        }
section {display:inline-block;
        width:69.5%;
        padding:10px 10px 45px 10px;
        }
aside { border:1px solid black;
        display:inline-block;
        vertical-align:top;
        width:15%;
        height:auto;
        box-shadow:-1px 0px #848484;
        }
footer {clear:both;
                background:black;
                color:white;
                text-align:center;
                position:fixed;
                bottom:0;
                left:0;
                width:100%;
                height:25px;}           
}

@Xteda · 10.06.2016, 17:12

Вы мне не поверили про font-size: 0, а зря

@Ble3k · 10.06.2016, 17:20 **[ТС]**

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

Вы мне не поверили про font-size: 0, а зря

Я не не поверил, я попробовал, но не вышло. Просто текст стал невиден и все. Можете подробней рассказать?

@Xteda · 10.06.2016, 17:23

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

Можете подробней рассказать?

За меня это уже сделали https://css-tricks.com/fightin... -elements/

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	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 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Ble3k 0 / 0 / 0 Регистрация: 10.06.2016 Сообщений: 19

	Необходимо найти ошибку в коде html/css 10.06.2016, 13:03. Показов 1423. Ответов 12 Метки нет (Все метки) Всем добрый день. Столкнулся с такой проблемой: есть сайт, на нем есть ссылки на разные страницы, когда я сжимаю размер окна и появляется ползунок, то появляется непонятный "пробел" (см. скрин "1"), при этом появляется не на всех страницах сайта. Когда я увеличиваю ширину окна, непонятный "пробел" (см. скрин "2") пропадает вместе с ползунком (ползунка нет = непонятного пробела тоже). К сожалению я не могу понять, где искать проблему и что это может быть, чтобы исправить. Не стал заливать весь код и html и css сюда, т.к это очень громоздко. Я с радостью залью сюда кусок кода, если пойму какой именно кусок нужно залить из html или css. Миниатюры 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	10.06.2016, 13:47
	Вам нужно открыть две страницы, проблемную и рабочую, и сравнить их. Проверьте внимательно закрытые не закрытые теги, и вложенность элементов. Даже без кода, видно, что, проблема с header) 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	10.06.2016, 14:55
	Хм... Нельзя вот так просто поменять все table на display: inline-block и получить желаемый результат Для article уберите inline-block, он тут не нужен. Для section стоит width:100%, поэтому неудивительно, что все попадало. Есть подозрение, что вам просто не хватает знаний. Задайте для блоков, которые должны стоять в строке, процентную ширину. У всех ваших блоков в сумме должно получиться 100%. PS. Для родителя инлайн-блочных элементов нужно будет задать font-size: 0; иначе они все-равно в строку не станут. Не забудьте для дочерних элементов задать нормальный font-size, а-то, возможно, текста не увидите 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	10.06.2016, 17:12
	Вы мне не поверили про font-size: 0, а зря 0