Как убрать полоску под картинкой?

@Kazer · Регистрация: 03.02.2018

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

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/index0.css">
</head>
<body>
    <div id="page-wrap">
        <div id="wrapper">
            <div id="left-coll">
                <span class="contact"><a href="index0.html" title="Главная страница" >Главная страница</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Обо мне" >Обо мне</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Обратная связь" >Обратная связь</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Сотрудничество" >Сотрудничество</a></span>
                <br />
            </div>
 
        </div>
 
    
 
</div>
<footer>
    
</footer>
 
</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
*{
    margin: 0;
    padding: 0;
}
 
html{
    width: 100%;
    height: 100%;
 
}
 
body{
    width: 100%;
    height: 100%;
 
        background:url("road3.jpg") 100% 100% no-repeat;
    background-size: cover;
}
#page-wrap{
    min-height: 94%;
    margin-bottom: -10px;
 
    
    
}
#page-wrap:after{
    content: "";
    display: block;
}
 
#left-coll{
    width: 20%;
    margin: 20% 20% 20% 20%;
}
 
footer, #page-wrap:after{height: 10%;}
 
.contact{
    border: 2px solid red;
}
 
footer{
    width: 100%;
    margin-top: 10px;
    border-top: solid  1px black;
    background-color: black;
    height: 10%;
}

когда делаешь маргин 20 20 20 20 и сдвигаешь его вниз то тогда почему то под картинкой и между футером образуется такой же размер проблема на который сдвинули... почему ?как исправить. заранее спасибо

@Academik · 29.08.2018, 21:59

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

когда делаешь маргин 20 20 20 20

К чему вы применяете margin?

@Kazer · 29.08.2018, 22:00 **[ТС]**

Сообщение от Mr Coder

К чему вы применяете margin?

CSS
1
2
3
4
#left-coll{
    width: 20%;
    margin: 20% 20% 20% 20%;
}

@Academik · 29.08.2018, 22:03

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

то под картинкой и между футером образуется такой же размер проблема на который сдвинули... почему ?

Если я правильно вас понял, то все логично, вы применили внешний отступ и получили его.

@Kazer · 29.08.2018, 22:07 **[ТС]**

Сообщение от Mr Coder

Если я правильно вас понял, то все логично, вы применили внешний отступ и получили его.

просто хочется чтоб сзади был фон , а слева по середине менюшка , а внизу к этой картинке не ОТРЫВАЯ был футтер

@Kazer · 29.08.2018, 22:11 **[ТС]**

Сообщение от Mr Coder

Если я правильно вас понял, то все логично, вы применили внешний отступ и получили его.

тип так

@Kazer · 29.08.2018, 22:13 **[ТС]**

тип картинка это и есть задний фон

@скороход · 31.08.2018, 14:14

Если я правильно понял, то попробуй использовать background без color-а .

@Kazer · 01.09.2018, 11:06 **[ТС]**

Сообщение от скороход

Если я правильно понял, то попробуй использовать background без color-а .

Вот тут такая проблема ...увеличиваю и появляется внизу полоска...

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/index0.css">
</head>
<body>
    <div id="page-wrap">
        <div id="wrapper">
            <div id="left-coll">
                <span class="contact"><a href="index0.html" title="Главная страница" id="glavnoe">Главная страница</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Обо мне" id="about" >Обо мне</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Обратная связь" id="feedback" >Обратная связь</a></span>
                <br />
                <span class="contact"><a href="index0.html" title="Сотрудничество" id="contactt" >Сотрудничество</a></span>
                <br />
            </div>
 
        </div>
 
    
 
</div>
 
<footer>
    
</footer>
 
</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
*{
    margin: 0;
    padding: 0;
}
 
html{
    width: 100%;
    height: 100%;
 
}
 
body{
    width: 100%;
    height: 100%;
 
        
 
}
#page-wrap{
    min-height: 94%;
    margin-bottom: -10px;
 
background:url("road3.jpg") 100% 100% no-repeat;
    background-size: cover;
 
    
    
}
#page-wrap:after{
    content: "";
    display: block;
}
 
#left-coll{
    position: absolute;
    top: 20%;
}
 
.contact{
    line-height: 3;
    border: 2px solid yellow;
    font-size: 1.5em;
 
}
 
footer, #page-wrap:after{height: 10%;}
 
 
 
footer{
    width: 100%;
    background-color: black;
    height: 10%;
}

@скороход · 03.09.2018, 09:15

Что то трудно понять суть проблемы. Если вы используете margin то у вас по любому будет полоска.
Или хотите чтобы footer был без фон-картинки?
Если хотите чтобы "в плотную" тогда зачем вам margin?

@Kazer · 03.09.2018, 15:01 **[ТС]**

Сообщение от скороход

Что то трудно понять суть проблемы. Если вы используете margin то у вас по любому будет полоска.
Или хотите чтобы footer был без фон-картинки?
Если хотите чтобы "в плотную" тогда зачем вам margin?

видите, что , когда экран браузера 100% то все нормально , а когда экран >175% то тогда , вся инфа что в page-wrap переходит на футер , а при дальнейшем увеличении уже на белый фон ...я хочу чтоб инфа(левая колонна) так и осталась в приделах page-wrap , чтоб она не прыгала на футер и ниже его

@Kraken73 · 04.09.2018, 12:55

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

хочу чтоб инфа(левая колонна) так и осталась в приделах page-wrap , чтоб она не прыгала на футер и ниже его

тут по сути идет неправильная верстка, с указанием жестких height и абсолютами, что не адаптивно

@скороход · 04.09.2018, 13:53

похоже у тебя проблема в позиционировании элементов див. если поставить в #left-coll позицию fixed то этой полоски не будет, значит проблема не в margin'e. может я и ошибаюсь. попробуй в body прописать background картинки и плесать от этого. больше не знаю чем помочь.

@Kazer · 04.09.2018, 20:23 **[ТС]**

Сообщение от скороход

похоже у тебя проблема в позиционировании элементов див. если поставить в #left-coll позицию fixed то этой полоски не будет, значит проблема не в margin'e. может я и ошибаюсь. попробуй в body прописать background картинки и плесать от этого. больше не знаю чем помочь.

Ок , спасибо и за это бро )

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@Kazer 0 / 0 / 0 Регистрация: 03.02.2018 Сообщений: 285
	29.08.2018, 22:13 [ТС]
	тип картинка это и есть задний фон 0

@скороход 2 / 2 / 0 Регистрация: 10.12.2017 Сообщений: 43
	31.08.2018, 14:14
	Если я правильно понял, то попробуй использовать background без color-а . 1

@скороход 2 / 2 / 0 Регистрация: 10.12.2017 Сообщений: 43
	03.09.2018, 09:15
	Что то трудно понять суть проблемы. Если вы используете margin то у вас по любому будет полоска. Или хотите чтобы footer был без фон-картинки? Если хотите чтобы "в плотную" тогда зачем вам margin? 0

@скороход 2 / 2 / 0 Регистрация: 10.12.2017 Сообщений: 43
	04.09.2018, 13:53
	похоже у тебя проблема в позиционировании элементов див. если поставить в #left-coll позицию fixed то этой полоски не будет, значит проблема не в margin'e. может я и ошибаюсь. попробуй в body прописать background картинки и плесать от этого. больше не знаю чем помочь. 1