Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
2 / 2 / 1
Регистрация: 16.12.2013
Сообщений: 73
1

Div-ы цепляются друг за друга

22.11.2015, 19:28. Показов 989. Ответов 7
Метки нет (Все метки)

Здравствуйте. Подскажите пожалуйста почему когда допустим .positioner или .title задаешь margin-top, то смещается и .head, а margin-left and margin-right такого не происходит. Ведь по сути у .positioner and .title родительский элемент это .head, значит внешние отступы должны считаться относительно границы .head, а не окна браузера.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
 <title>Практика</title>
 <link rel="stylesheet" href="C:\Users\alel\Desktop\style.css">
</head>
<body>
<div class="box">
 <div class="head">
   <div class="positioner">
     <div class="title">Design Studios</div>
     <div class="menu"></div>
   </div>
 </div>
</div>
 
</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
head {
    margin: 0;
    padding: 0;
}
 
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
 
.head {
    width: 1100px;
    height: 113px;
    background: url("C:/Users/alel/Desktop/header.png");
    margin: auto;
}
 
.positioner {
    width: 900px;
    background-color: red;
    margin: auto;
}
 
.title {
    padding: 20px;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.11.2015, 19:28
Ответы с готовыми решениями:

div наползают друг на друга
Здравствуйте, скажите пожалуйста как решить проблему с наложением блоков друг на друга есть 2...

div блоки наезжают друг на друга
Здравствуйте ! Блоки наезжают друг на друга, как это можно исправить ? подскажите пожалуйста.

Div накладываются друг на друга, не могу их нормально поставить
На скриншоте видно что два дива одного блока прилипли друг другу, если это можно так назвать...

CSS. Границы двух блоков div заходят друг на друга
Друзья. Ниже есть скриншёт. САм код CSS:...

7
433 / 352 / 259
Регистрация: 29.11.2011
Сообщений: 628
22.11.2015, 19:40 2
execto, добавьте в .head {} свойство overflow: auto;
CSS
1
2
3
4
5
6
7
.head {
    width: 1100px;
    height: 113px;
    background: url("C:/Users/alel/Desktop/header.png");
    margin: auto;
    overflow: auto;
}
1
2 / 2 / 1
Регистрация: 16.12.2013
Сообщений: 73
22.11.2015, 20:00  [ТС] 3
Цитата Сообщение от Vadim_Lasso Посмотреть сообщение
execto, добавьте в .head {} свойство overflow: auto;
Спасибо, помогло. Но если не сложно можете объяснить логику отступов в моем случаи, почему так происходило.
И простым языком почему от overflow так происходит.
0
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
22.11.2015, 23:26 4
execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title?
0
2 / 2 / 1
Регистрация: 16.12.2013
Сообщений: 73
23.11.2015, 08:35  [ТС] 5
Цитата Сообщение от mrBobrillo Посмотреть сообщение
execto Поясните вашу логику, для чего вы задаете margin-top для элементов .positioner или .title?
изначально я только для .positioner хотел так сделать. ну чтоб отступ у блока был сверху, а не был прижатым.
0
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
23.11.2015, 10:09 6
Ну смотрите, если хотите чтоб сайт не был прижат к верхней части экрана, то это можно сделать 2мя способами, или задать вашему общему блоку не margin: auto, а margin: 20px auto 0 auto;
Т.е слева и справа будет авто, центрироваться по середине экрана, а сверху 20 пикселей, снизу 0, так как ничего не задаем.
Или же задать у общего блока сверху паддинг в 20 пикселей.
Это если я конечно правильно понял суть вашей мысли.
0
2 / 2 / 1
Регистрация: 16.12.2013
Сообщений: 73
23.11.2015, 11:44  [ТС] 7
mrBobrillo, не совсем правильно, сайт должен быть прижат, но .positioner, который находится внутри .head не должен прижиматься к верху блока .head
0
49 / 42 / 25
Регистрация: 18.11.2015
Сообщений: 279
23.11.2015, 11:46 8
Цитата Сообщение от mrBobrillo Посмотреть сообщение
Или же задать у общего блока сверху паддинг в 20 пикселей.
Делаете у class="box" так и никаких лишних движений не нужно
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.11.2015, 11:46

При уменьшении окна Div залезают друг на друга, автоматическое расширение высоты блока
Здравствуйте, делая сайт столкнулся с такой проблемой. Сделана страница с новостью какой-то, но...

Много блоков div. И они наезжают друг на друга при изменении размера окна
Ребят, помогите, уже кровь из носа скоро пойдет... Начал делать сайт: не могу найти решение...

Как в PHP отделить элементы друг от друга, чтобы не ругались друг на друга?
&lt;?php $chitat = fopen('yoo.txt', 'r'); if (!$chitat) { echo 'Ошибка при открытии файла...

Тестируем друг-друга
Тестируем друг-друга. Столкнулся с тем что куча людей называют себя программистами - являясь...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru