ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div + css простой вопрос
14 сообщений из 14, страница 1 из 1
div + css простой вопрос
    #37817610
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
элементарная верстка из 3х блоков ведет себя не так как нужно
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
#background {
	margin:0 auto;
	padding:0;
	width:1024px;
	background:#FFF;
}

#header {
	margin:0;
	padding:0;
	width:1024px;;
	height:125px;
	background:green;
}

#header0 {
	margin:0;
	margin-top:20px;
	background:red;
	height:10px;
	width:1024px;
}



Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<body>
  <div id="background">
     <div id="header">
        <div id="header0">
        </div><!---header0-->
     </div><!--header-->
  </div> <!--background-->  
</body>


так вот margin-top:20px дива header0 двигает основной блок background а мне нужно чтобы он сдвигался относительно блока header на 20 пикс вниз. Что я нек так делаю? просветите плиз темного.
...
Рейтинг: 0 / 0
30.05.2012, 11:09:47
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817646
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
йцуу,

margin хитрая штука, лучше заменить его паддингом у #header
...
Рейтинг: 0 / 0
30.05.2012, 11:30:50
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817651
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
Яростный Мечйцуу,

margin хитрая штука, лучше заменить его паддингом у #headerТа пробовал, таже ерунда только в профиль. Впрочем покопавшись нашел решение: position:absolute для #header0 . Ток не знаю насколько "правильное" оно.
...
Рейтинг: 0 / 0
30.05.2012, 11:36:09
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817656
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Код: 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.
body { margin: 0; padding: 0; }
	
#background {
    margin:0 auto;
    padding:0;
    width:1024px;
    background:#FFF;
}

#header {
    margin:0;
    padding:0;
    padding-top:20px;
    width:1024px;;
    height:125px;
    background:green;
}

#header0 {
    margin:0;
    background:red;
    height:10px;
    width:1024px;
}
...
Рейтинг: 0 / 0
30.05.2012, 11:41:15
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817676
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
Яростный Меч
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
body { margin: 0; padding: 0; }
	
#header {
    margin:0;
    padding:0;
    padding-top:20px;
    width:1024px;;
    height:125px;
    background:green;
}

гм, работает... пасиб.

Яростный Мечmargin хитрая штука, лучше заменить его паддингом у #header
а вчем хитрость то? если можно в 2х словах или ссылку. я то думал разница только в бекграундах...
...
Рейтинг: 0 / 0
30.05.2012, 11:50:25
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817680
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
йцууа вчем хитрость то? если можно в 2х словах или ссылку http://htmlbook.ru/css/margin
в общем, поэкспериментируй.
...
Рейтинг: 0 / 0
30.05.2012, 11:53:25
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817681
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
а если мне после header0 нужно разместить еще header1 (на том же header) с отступом в 20 пикселей как быть?
...
Рейтинг: 0 / 0
30.05.2012, 11:53:49
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817686
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
йцуу,

header1 будет расположен под header0
или у тебя для них предусмотрен float:left ?
...
Рейтинг: 0 / 0
30.05.2012, 11:56:30
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817703
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
Яростный Мечйцуу,

header1 будет расположен под header0
или у тебя для них предусмотрен float:left ?header1 под под header 0 c зазором, оба блока на всю ширину header - 1024пикс.
...
Рейтинг: 0 / 0
30.05.2012, 12:02:08
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817711
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
йцуу,

а, понял.
для header1 выстави margin-top, в этом случае должно быть без сюрпризов.
...
Рейтинг: 0 / 0
30.05.2012, 12:06:51
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817750
йцуу
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
йцуу
Гость
Яростный Мечйцуу,

а, понял.
для header1 выстави margin-top, в этом случае должно быть без сюрпризов.работает! ещебы понять почему так происходит. Почему для первого блока нужен обязательно паддинг а для второго и маргины работают?
...
Рейтинг: 0 / 0
30.05.2012, 12:21:00
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817759
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
йцуу,

для первого блока маргин сдвигает родительские элементы. почитай по ссылке, возможно, там по подробнее расписано.
...
Рейтинг: 0 / 0
30.05.2012, 12:24:50
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37817897
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
А если position: relative; top: 20px;
...
Рейтинг: 0 / 0
30.05.2012, 13:29:19
| Ответить | Цитировать | Написать  
div + css простой вопрос
    #37818025
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Странно что этого никто не сказал, но данное поведение называется схлопыванием отступов... гугль весь пропитан данной темой :)
как вариант решение проблемы/особенности отступов (чаще всего прибегаю к данному методу) можно у элемента-родителя выставить padding отличный от 0 (ну то есть 1px например) и всё станет на свои места.

так-же можно задать child'у "float" отличный от "none" или как уже было упомянуто, родителю задать position: absolute . помню были ещё какие-то, ща не вспомню уже наверное :)
...
Рейтинг: 0 / 0
30.05.2012, 14:30:04
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div + css простой вопрос
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37817680&tid=1449756]:
 0ms
get settings:
 6ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 57ms
get topic data:
 5ms
get forum data:
 1ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 190ms
total:  301ms
созд. / загр.: 301ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]