Перейти к содержимому

Сервис обмена электронных валют

Выбрать шаблон и создать сайт

  • Закрытая тема Тема закрыта

Непонятное поведение блоков div'ов

#1 pazzytives

pazzytives
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 23 Февраль 2010 - 20:11

Вопрос был выделен в отдельное производство из темы "Урок верстки"

Привет всем !!! Я тут новенький, потому просьба: сильно не пинайте. В общем я только учусь сайтостроению, но материала уже съел немало. Потому, по данному уроку вопросов нет и ничего нового он мне не открыл. В принципе по верстке вопросов возникает не так уж и много, но кое что меня ставит в тупик. Никак не могу понять логику поведения div-ов. Конкретный пример: Имеется два блока, один вложен в другой. Вот код CSS:
#background .bgheader {
	background:url(../images/hbackground.png) top repeat-x #6CF;
	}

#header {
	background-image:url(../images/header.png);
	height:279px;
	width:938px;
	margin:auto;
	}


Вот HTML :
<div class="bgheader">
<div id="header">
</div>
</div>


Вопрос такой: Почему когда я прописываю правило в CSS #background .bgheader без top, то рисунок ложится от левого верхнего угла окна браузера, и дальше повторяется по оси х. А если прописываю top, то рисунок ложится от правого верхнего угла контейнера header. На этом эффекте я в принципе добился того чего хотел, НО. Не догоняю логики поведения div-a. Может это просто глюк ? :) Профи, Объясните пожалуйста. А то надоело уже методом тыка добиваться того чего хочешь. Заранее благодарю за ответ.

З.Ы. просьба к администрации данного ресурса: не ругайтесь сильно, но я только зарегался и не могу пока создавать новых тем. посчитал эту самой подходящей.

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Февраль 2010 - 20:48

pazzytives,

А то надоело уже методом тыка добиваться того чего хочешь.

А зачем методом тыка? Идем и читаем спецификацию или лезем на спец. ресурс по данному вопросу, к примеру htmlbook.ru
Давайте посмотрим на атрибут background-position
Обязательно посмотрите в графу Значение по умолчанию и Аргументы
Мы конечно же используем background, но как становится понятным, этот атрибут включает все остальные.

Проверил сказанное вами:
1) Когда отсутствует top, повторение из верхнего левого угла.
2) Когда присутствует top, повторение начинается по центру вверху, как и должно быть

top = top center = center top = 50% 0% (по центру вверху)


А вообще, в background можно указать 2 позиции: от какого края по вертикали и от какого края по горизонтали мы хотели бы начать повторение фона.
elem
{
   background: url(../images/hbackground.png) [left|center|right] || [top|center|bottom];
}

  • 0

#3 pazzytives

pazzytives
    Topic Starter
  • Пользователь
  • 2 сообщений
  • Репутация: 0

Отправлено 23 Февраль 2010 - 20:57

М... Ясно теперь. Спасиба отдельное за оперативность. :) Ваш форум, как впрочем и htmlbook.ru теперь у меня в закладках.
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Февраль 2010 - 21:28

pazzytives, мы рады, тему закрываю.
  • 0


Оформление форума – IPBSkins.ru