Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2012, 18:37
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

непонятки с margin-top
<!DOCTYPE html>
<html>
	<head>
		<title>Свойства блока - css</title>
	</head>
	<style type="text/css">
		.div1 {background-color:red;
				width:200px; height:200px;
			}
		.div2 {background-color:blue;
				border-style:solid;
				border-color:grey;
				margin-top:70px; margin-left:30px;}
	</style>
	<body>
		<div class="div1">
			<div class="div2">Текст внутри блока.</div>
		</div>
	</body>
</html>


margin-left:30px; у css класса div2 работает, как
и ожидалось - голубой блок(смотри рисунок во вложении)
смещается вправо относительно красного.
margin-top:70px; Я ожидал, что голубой блок(класс css div2) будет
смещаться относительно красного вниз на 70 пикселей.
А почемуто смещается красный относительно body
Непонятка какаято.
Изображения:
Тип файла: jpg css.jpg (6.8 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2012, 19:30
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

К примеру добавьте
overflow: hidden;
к .div1

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Обходим схлопывание margin
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 16.11.2012 в 19:47.
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2012, 17:35
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

torsar, потому что нужно задать абосютную позицию. Используйте лучше padding.
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2012, 14:21
Новичок на форуме
Отправить личное сообщение для ivan-klimov Посмотреть профиль Найти все сообщения от ivan-klimov
 
Регистрация: 13.11.2012
Сообщений: 8

Еще сработает добавление к .div2{float: left;}. Но тут есть подводный камешек: Если у .div1 НЕ задана высота, то он схлопнется. Это нужно учитывать.

Также сработает добавление к .div2{position: relative; top:70px;}. Соответственно убираем margin-top.

Лучше, чтоб Вы описали задачу подробнее(как должен работать блок, будет ли он пополняться контентом и т.д). Тогда Вам порекомендовали бы нужный способ
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2012, 15:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,127

Сообщение от ivan-klimov
Еще сработает добавление к .div2{float: left;}
...
Также сработает добавление к .div2{position: relative; top:70px;}
Оба варианта ущербны...
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2012, 14:20
Новичок на форуме
Отправить личное сообщение для ivan-klimov Посмотреть профиль Найти все сообщения от ivan-klimov
 
Регистрация: 13.11.2012
Сообщений: 8

Сообщение от ksa Посмотреть сообщение
Оба варианта ущербны...
Раз ущербны, жду Ваших аргументов!

Нельзя утвердждать, что какие либо варианты ущербны, все зависит от конкретной ситуации, нужно знать как предпологается использовать этот блок. В данном случае мы этого не знаем и предлагаем ТС различные варианты.

Все известные свойства в сочетании друг с другом делают верстку устойчивой, универсальной. А рубить сплеча мол это свойство учщербное, не используйте его - ЭТО бред.

Последний раз редактировалось ivan-klimov, 20.11.2012 в 14:23.
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2012, 14:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,127

Сообщение от ivan-klimov
жду Ваших аргументов
Ответ уже дал walik...
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2012, 15:56
Новичок на форуме
Отправить личное сообщение для ivan-klimov Посмотреть профиль Найти все сообщения от ivan-klimov
 
Регистрация: 13.11.2012
Сообщений: 8

Сообщение от ksa Посмотреть сообщение
Ответ уже дал walik...
А Вы читали ссылки которые он указал? Видимо нет! Так как первая ссылка на спецификацию, где описывается проблема и пути решения, а вторая также на сайт где рассматривается эта же проблема, так вот в конце подведены итоги, где пишут, что каждый случай индивидуален. Все зависит от конкретной задачи.

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

По этому считаю Ваш пост об отдельно выбранных ущербных свойствах, бредом.
Ответить с цитированием
  #9 (permalink)  
Старый 20.11.2012, 20:47
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

а тут с красивыми рисуночками http://softwaremaniacs.org/blog/2005...-flow-margins/
__________________
.ня
Ответить с цитированием
  #10 (permalink)  
Старый 21.11.2012, 08:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,127

Сообщение от ivan-klimov
По этому считаю Ваш пост об отдельно выбранных ущербных свойствах, бредом.
Дело твое...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение style.left и top через document.getElementById Jekel Javascript под браузер 7 09.11.2018 17:24
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
Водяной знак на fancybox bobrina Общие вопросы Javascript 1 03.06.2011 21:11
Каруселька в форме буквы Maximor17 Элементы интерфейса 0 24.05.2011 11:36