Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/12: Рейтинг темы: голосов - 12, средняя оценка - 4.67
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
1

Не отображается background родительского div

01.03.2012, 22:03. Просмотров 2252. Ответов 13
Метки нет (Все метки)

Два блока, в которые помещаются изображения, должны разделяться вертикальной полосой, цвет которой задается в родительском div.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
 
<html>
    <head>
        <title> Два блока div </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            div.main {
            width: 402px;
            background-color: #CD5C5C;
            }
            
            div.leftBlock {
            width: 200px;
            float: left;
            }
            
            div.rightBlock {
            width: 200px;
            float: right;
            }
                        
        </style>
    </head>
    
    <body>
        <div class="main">
            <div class="leftBlock">
                <img src="image4.jpg">
            </div>
            <div class="rightBlock">
                <img src="image4.jpg">
            </div>
        </div>
    </body>
</html>
Почему не отображается цвет div.main ?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.03.2012, 22:03
Ответы с готовыми решениями:

Не отображается background-image у div
Не отображается background-image у div c классом nav-item. Все изображения...

Растянуть элемент Div на всю высоту родительского div
Как сделать что бы элемент Div растягивался на всю высоту следующего элемента?...

Прикрепить вложенный div к верху, родительского элемента div
Здравствуйте! Делаю все так, как показано в видеоуроке......

Дочерний блок принимает background родительского
Как сделать чтобы дочерний блок не принимал background который установлен...

<div> перекрывает 2 других <div>. Не отображается <div>
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;...

13
allukard
155 / 155 / 50
Регистрация: 08.11.2010
Сообщений: 1,358
01.03.2012, 22:08 2
CSS
1
2
3
4
5
6
div.main {
                        width: 402px;
                        background-color: #f00;
                    
                        height:200px;
                        }
1
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
01.03.2012, 22:12  [ТС] 3
Аа, высоту задать надо было, понятно, спасибо! )
0
allukard
155 / 155 / 50
Регистрация: 08.11.2010
Сообщений: 1,358
01.03.2012, 22:13 4
HTML5
1
2
3
4
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <title> Два блока div </title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
          <style type="text/css">
                        #main {
                        width: 400px;
                        background-color: #f00;
                  
                        }
                        
                        #leftBlock {
                    background-color: #f00;
                        width: 200px;
                        float: right;
                        }
                        
                        #rightBlock {
                    background-color: #f00;
                        width: 200px;
                        float: right;
                        }
                                                
                </style>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
        </head>
        
        <body>
                <div id="main">
                        <div id="leftBlock">
                                <img src="http://www.cyberforum.ru/customavatars/avatar201483_1.gif">
                        </div>
                        <div id="rightBlock">
                                <img src="http://www.cyberforum.ru/customavatars/avatar201483_1.gif">
                        </div>
                </div>
        </body>
</html>
0
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
01.03.2012, 22:40  [ТС] 5
Макc, получается не то. Для моего примера с изображениями 200х267 и стилями
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
                        #main {
                        width: 402px;
                background-color: #f00;
                  
                        }
                        
                        #leftBlock {
                background-color: #f00;
                        width: 200px;
                        float: right;
                        }
                        
                        #rightBlock {
                    background-color: #f00;
                        width: 200px;
                        float: right;
                        }
                                                
                </style>
полоска получается не между изображениями, а снизу.
0
Миниатюры
Не отображается background родительского div  
allukard
155 / 155 / 50
Регистрация: 08.11.2010
Сообщений: 1,358
02.03.2012, 07:46 6
CSS
1
2
3
4
5
#rightBlock {
                        width: 200px;
                        float: right;
                        border-right:2px solid #000;
                        }
0
Серёга Кольт
5 / 5 / 2
Регистрация: 02.03.2012
Сообщений: 11
02.03.2012, 08:44 7
Цитата Сообщение от Heidel Посмотреть сообщение
полоска получается не между изображениями, а снизу.
Все потому, что вы задали обтекание для двух блоков с картинками, вот main их и обтекает
Лечится довольно просто:

В стилях прописываешь дополнительно:
CSS
1
.clear{clear:both;}
А уже в html вставляешь:
HTML5
1
<div class="clear"></div>
Вставлять его надо перед закрывающим </div> блока main!!!
1
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
02.03.2012, 09:35  [ТС] 8
Вот так, верно?
HTML5
1
2
3
4
5
6
7
8
<div class="main clear">
        <div class="leftBlock">
            <img src="image4.jpg">
        </div>
        <div class="rightBlock">
            <img src="image4.jpg">
        </div>
    </div>
Но высоту main все равно приходится задавать, иначе не отображает границу между картинками.
0
Серёга Кольт
5 / 5 / 2
Регистрация: 02.03.2012
Сообщений: 11
02.03.2012, 09:39 9
Нет не верно, я же сказал:
Перед закрывающим тегом </div> блока main.

И высоту не надо будет указывать!
HTML5
1
2
3
4
5
6
7
8
9
<div class="main">
                        <div class="leftBlock">
                                <img src="image4.jpg">
                        </div>
                        <div class="rightBlock">
                                <img src="image4.jpg">
                        </div>
                        <div class="clear"></div>
                </div>
Добавлено через 36 секунд
Главное в стилях не забудь указать класс clear
1
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
02.03.2012, 09:52  [ТС] 10
Высоту все равно приходится указывать, иначе полоска цвета появляется не только между изображениями, но и под ними.
0
Миниатюры
Не отображается background родительского div  
Серёга Кольт
5 / 5 / 2
Регистрация: 02.03.2012
Сообщений: 11
02.03.2012, 10:01 11
Значит есть какие то отступы или поля, которые увеличивают размер.
Есть ли онлайн версия странички?
0
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
02.03.2012, 10:11  [ТС] 12
Серёга Кольт, нет, нету, это по учёбе. Если интересно, то во вложении можешь поглядеть.
0
Вложения
Тип файла: rar Page.rar (42.2 Кб, 3 просмотров)
Серёга Кольт
5 / 5 / 2
Регистрация: 02.03.2012
Сообщений: 11
02.03.2012, 10:30 13
Лучший ответ Сообщение было отмечено mrtoxas как решение

Решение

Хе хе
Все из за того, что прописывался line-height

Здесь либо заключать картинки в дополнительный блок и прописывать ему в стилях line-height:0;
Либо вообще блоков не использовать, например вот так:

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> Два блока div </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            div.main {
            width: 402px;
            background-color: #7B68EE;
            }
            
            .leftBlock {
            width: 200px;
            float: left;
            padding: 0;
            }
            
            .rightBlock {
            width: 200px;
            float: right;
            }
            .clear{clear:both;}     
        </style>
    </head>
    
    <body>
        <div class="main">
                <img class="leftBlock" src="image4.jpg">
                <img class="rightBlock" src="image4.jpg">
            <div class="clear"></div>
        </div>
Добавлено через 2 минуты
Еще обязательным атрибутом для картинок является alt, если его не будет - валидатор будет ругаться.

Это я тебе на будущее говорю
1
Heidel
112 / 112 / 39
Регистрация: 11.10.2011
Сообщений: 647
03.03.2012, 11:41  [ТС] 14
Серёга Кольт, понятно, большое спасибо!
0
03.03.2012, 11:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.03.2012, 11:41

Схлопывание родительского div-а
Разные способы перепробывал, но что-то не получается решить проблему...

Float родительского div по содержимому
Доброго. Нужно растянуть родительский div по-вертикале, конструкция такая...

Не отображается background
Помогите выяснить причину, почему не появляется background ? У класса .cmenu...


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

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru