Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
NNN7
8 / 8 / 3
Регистрация: 05.09.2013
Сообщений: 502
#1

Вложенные div-ы - HTML, CSS

05.08.2014, 22:19. Просмотров 1107. Ответов 7
Метки нет (Все метки)

Прошу помощи с div-ами .

Есть вот такая картинка(рис.)
Получается , что один блок вложен в другой . Я не могу разобраться как они себя ведут ? Мне нужно сдвинуть серый блок вниз на 50px.

Делаю так :

html:
HTML5
1
2
3
4
5
6
7
8
<div class="orange_head">
       <div class="menu">
       </div>
 </div>
 
       
        <div class="gray_block">
        </div>
css:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 .orange_head {
         width: 100%;
         height: 115px;
         background-color: #FFA500;
     }
 
    .gray_block {
 
        width: 100%;
        height: 1300px;
        background-color: #CFCFCF;
    }
 
    .menu {
        width: 900px;
        height: 50px;
        background-color:#D3D3D3;
        margin-top:50px;
        margin: auto;
       }
но margin-top:50px; никак не срабатывает

Подскажите, пожалуйста , что с этим можно сделать?
0
Миниатюры
Вложенные div-ы  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.08.2014, 22:19
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Вложенные div-ы (HTML, CSS):

Вложенные DIV. Размеры. - HTML, CSS
Есть два вложенных блока, размер внешнего зависит от размера окна браузера.. Внутренний за счет 100% размеров должен подгоняться под...

Вложенные div с разными background - HTML, CSS
Здравствуйте, подскажите пожалуйста решение вот такой проблемы. Есть один блок, #content внутри него есть другой блок #contentBox в 1 блоке...

CSS!? Div в div'e, как не потерять позиции css внутреннего div'a при изменении размера браузера? - HTML, CSS
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а контейнер изменяется? .container{ ...

<div> перекрывает 2 других <div>. Не отображается <div> - HTML, CSS
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt; &lt;html...

резиновый размер div'a, размер div'a в зависимости от расположения div'ов в нем - HTML, CSS
Надо чтобы div &quot;telo&quot; растягивался в зависимости от дивов которые находятся в нем. тоесть должен быть черный квадрат в котором по углам...

Показать второй div-sidebar перед первым div-content на CSS - HTML, CSS
Как в данном примере можно с помощью CSS показать блок сайдбара первым, перед блоком контента, не смотря на то, что в коде блок контента...

7
whiteapps
398 / 362 / 172
Регистрация: 18.07.2014
Сообщений: 1,236
05.08.2014, 22:32 #2
NNN7,

CSS
1
2
3
4
5
6
 .menu {
        width: 900px;
        height: 50px;
        background-color:#D3D3D3;
        margin: 50px auto;
       }
0
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
05.08.2014, 22:52 #3
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.orange_head {
         width: 100%;
         height: 115px;
         background-color: #FFA500;
        padding-top: 50px;
        box-sizing: border-box;
     }
 
.gray_block { 
      width: 100%;
      height: 1300px;
      background-color: #CFCFCF;
    }
 
.menu {
      width: 900px;
      height: 50px;
      background-color: #D3D3D3;        
      margin: auto;
    }
Добавлено через 12 минут
вариант #2

CSS
1
2
3
4
5
6
7
8
.menu {
  width: 900px;
  height: 50px;
  background-color: #D3D3D3;        
  margin: auto;
  position:relative;
  top:50px;
       }
1
NNN7
8 / 8 / 3
Регистрация: 05.09.2013
Сообщений: 502
05.08.2014, 22:54  [ТС] #4
Спасибо за Ваш ответ . Но не могу понять, почему padding-top: 50px для .orange_head даёт такой результат ? это же не margin и как с помощью его получается сделать отступ между блоками?
0
NNN7
8 / 8 / 3
Регистрация: 05.09.2013
Сообщений: 502
05.08.2014, 23:03  [ТС] #5
И ещё можно Вам вопрос , пожалуйста ?

Не могу понять на счёт div-ов .

Вот мне нужно , чтобы снизу серого блока шёл блок 300 на 400 пикс.

Вот пишу html:

HTML5
1
2
3
4
   
                <div class="white_block">
                    
                </div>
и css:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
   
 
 
    .white_block {
 
        width: 400px;
        height: 300px;
        margin-left: 225px;
        background-color: white;
        border: 1px solid black;
 
    }
Но получается , что этот блок влезает только до конца .orange_head .

Можете , пожалуйста , объяснить , что не так делаю?
0
Миниатюры
Вложенные div-ы  
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
05.08.2014, 23:17 #6
Но не могу понять, почему padding-top: 50px для .orange_head даёт такой результат ? это же не margin и как с помощью его получается сделать отступ между блоками?
Потому что серый блок находится внутри оранжевого, а padding - это отступы внутри блока.

Добавлено через 4 минуты
Цитата Сообщение от NNN7 Посмотреть сообщение
Но получается , что этот блок влезает только до конца .orange_head .
Можете , пожалуйста , объяснить , что не так делаю?
Потому что вы задали высоту .orange_head. Уберите ее и он автоматом растянется вниз.
1
NNN7
8 / 8 / 3
Регистрация: 05.09.2013
Сообщений: 502
05.08.2014, 23:23  [ТС] #7
Ну это понятно . А чтобы сохранить высоту .orange_head ?
0
Eugene-nsk
27 / 27 / 7
Регистрация: 27.07.2014
Сообщений: 184
05.08.2014, 23:31 #8
Вы не вгоните блок высотой 300px в блок высотой 115px
0
05.08.2014, 23:31
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.08.2014, 23:31
Привет! Вот еще темы с ответами:

тег div должен спускаться вниз с родным div, не получается, подскажите - HTML, CSS
есть два div-a, один родной а второй внутри его, мне нужно, чтобы при пополнений внутреннего div-a, родной div тоже спускался вместе с ним...

Как наложить один DIV на другой DIV (чтобы он был по центру) - HTML, CSS
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу). И так приступили, создаю &lt;div&gt; но...

Растянуть div в высоту на 100% или на занимаемое пространство вложенного div - HTML, CSS
Ситуация такая, есть див-1, в нем несколько дивов. Див-1 осуществляет роль фоновой картинки(т.е. тупо background color задает) В Див-1...

Растянуть div col-xs-4 во всю высоту div row (bootstrap) - HTML, CSS
Здравствуйте Как сделать &lt;div class=&quot;col-xs-4&quot;&gt; во всю высоту &lt;div class=&quot;row&quot;&gt;? &lt;div class=&quot;row&quot;&gt; &lt;div...


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

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

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