Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
1

Контент пропадает сбоку

07.12.2014, 17:42. Показов 873. Ответов 10
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Привет. Делаю страницу, и столкнулся с такой проблемой. Вообщем контент имеет своиство уменьшаться по ширене до 800px. Дальше появляется горизонтальный скроллинг. Бред в том что если я начинаю скролить, по горизонтали, то вижу чёрную полосу. Я конечно могу решить эту проблему, вообще заблокировав скролл, и сделать сайт полностью адаптивным. Но это очень долго. В чём может быть проблема?

Скрин без скроллинга:



Скрин с включенным скролом при движении вправо:



Добавлено через 4 минуты
Кстати сейчас заметил что черный фон идет от html (цвет я указывал в css). Значит body тоже подрезается. Что за фигня такая.

Добавлено через 5 минут
Ещё заметил что текст не исчезает. Получается что в чёрный фон уходит только background. Как сделать чтобы он был виден всегда?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.12.2014, 17:42
Ответы с готовыми решениями:

Как вставить полосу прокрутки? (контент пропадает на малой ширине)
http://arhicentr.com/company/ Подскажите, как вставить полосу прокрутки? Контент пропадает на...

Заголовок сбоку от текста
Добрый день, уважаемые форумчане! Помогите пожалуйста мне разобраться с CSS-настройкой Div. У...

Размещение изображений сбоку от логотипа
Доброго времени, cyberforum'чане. Довелось мне начинать писать сайт. И тут дошел до одного момента....

Фиксированное меню сбоку на css
смотрел уроки... до такого сам додумался. во всех уроках сводится к тому что надо просто указать...

10
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,709
07.12.2014, 18:54 2
Сейчас таро достану, погодите.
0
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
09.12.2014, 16:52  [ТС] 3
Mr Coder, а если серьёзно? Что вообще никак такое не исправить?
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
09.12.2014, 17:33 4
Код - Альфа,
HTML5
1
2
3
4
5
<div class="block1"><!-- Блок 1 -->
    <div class="block_one">
     ...
    </div>
</div><!-- .Блок 1 -->
CSS
1
2
3
4
5
6
7
8
9
10
.block1 {
    background: url('/img/tr/block1.jpg') repeat-x;
    height: 500px;
    min-width: 960px; /* Добавите ширину род. кон. */
}
.block_one {
    margin: 0 auto;
    height: 500px;
    width: 960px;
}
1
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
09.12.2014, 20:36  [ТС] 5
SF, к сожалению не то. Всё равно пропадает любой фон.
0
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,709
09.12.2014, 21:13 6
Цитата Сообщение от Код - Альфа Посмотреть сообщение
Mr Coder, а если серьёзно? Что вообще никак такое не исправить?
А если серьезно, код покажите.
0
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
10.12.2014, 11:48  [ТС] 7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="page-1-bg"></div>        // фон картинки
<div class="page-1-bg"></div>
    <div id="page-1">
        <div class="content">
            <p></p>
            <h3>Услуги</h3>
 
            <p>Контент</p>
 
        </div>
    </div>
    <div class="page-1-bg-1"></div> // фон картинки 1

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
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
 
ol, ul {
  list-style: none;
}
 
 
 
 
html{ background-color:#000; }
 
body{ width:100%; }
 
body {
    margin: 0;
    padding: 0;
    font: 18px 'aeromatics_di', Verdana, arial, sans-serif;
    color: #D1D1D1;
    font-style: normal;
    line-height: 1.3;
    font-variant: normal;
    background-color: #080808;
    background-image: url(../img/bg_gen1.jpg);
    background-repeat: no-repeat;
    background-position: center top;
 
}
 
 
 
 
 
 
p {
    padding:10px 0;
}
 
.content{
    position:relative;
    min-width: 960px;
    max-width: 1200px;
    margin: 0px auto;
    padding:0 100px;
    z-index:2;
 
 
 
 
 
}
 
 
 
#page-1{
 
 
        background:#021527;
 
 
 
 
}
.page-1-bg,.page-1-bg-1 {
 
    min-width: 100%;
 
    background-position: 50% 50%;
    background-repeat:repeat-x;
 
}
.page-1-bg {
 
 
    position: absolute;
    z-index:20;
    bottom:0;
    height:221px;
 
    height: 221px;
    background-image: url(../img/page-1-bg-border.png);
}
.page-1-bg-1 {
    position: relative;
    margin:0;
 
    height: 221px;
    background-image: url(../img/page-1-bg-border-1.png);
}
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
10.12.2014, 13:26 8
Если
CSS
1
2
min-width: 960px;
    max-width: 1200px;
задавать не контенту, а html, то черной полосы справа не будет.

Ну а фоновая картинка обрезается, вероятно, потому, что она не масштабируется. Т.е. при каком-то масштабе сам блок оказывается меньше картинки.
1
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
10.12.2014, 19:06  [ТС] 9
ludmila-sv, вообще ничего не помогает. Фоновой картинке я автоматическое масштабирование задать не могу, так как при этом поломается весь дизайн.

Видимо придётся делать сайт полностью адаптивным, чтобы горизонтальный scroll вообще не появлялся.
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
10.12.2014, 21:17 10
Забудьте эти position

Блоки накладываются друг на друга
0
11 / 11 / 6
Регистрация: 27.04.2013
Сообщений: 138
11.12.2014, 12:02  [ТС] 11
Цитата Сообщение от SF Посмотреть сообщение
Забудьте эти position
Без них никак. Тогда я не смогу задавать z-index. Да и вообще, даже если их убрать, то проблема не решится.

Кстати я заметил что такой косяк с чёрной полосой на многих сайтах в рунете. Действительно наверное исправить эту проблему поможет только 100% адаптивность но горизонтали.
0
11.12.2014, 12:02
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.12.2014, 12:02
Помогаю со студенческими работами здесь

Серые полосы справа и сбоку страницы
На страницы из-за двух прозрачных панелек появились серые участки справа и внизу страницы. ...

Как сделать прозрачный фрейм сбоку???
Вот код сверху сделала, а как слева сделать??? &lt;html&gt; &lt;head&gt; &lt;style type=&quot;text/css&quot;&gt; iframe {...

Нижняя строка наезжает сбоку на верхнюю
Дорогие форумчане! Верхняя строка — ul список с li float: left. Какой атрибут добавить для ul,...

Горизонтальная линия по центру сбоку заголовка
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru