Проблема с абсолютными координатами картинок

[xenmayer]

Набросал в фотошопе шаблон и теперь моя задача сверстать его.

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

Делаю два класса стилей для картинок:

#logotype{
/* Стиль для логотипа */
position:absolute;
left: 0 px;
top: 0 px;
z-index: 2;
}
#dogs{
/* Стиль для собачек в шапках для лого */
position: absolute;
left: 0 px;
top: 100 px;
z-index: 1;
}

Как видно выше, верхний слой - логотип, нижний - собаки в шапках. Проблема в том, что браузер такой код отображает так:



Начал искать решение сей проблемы.

Первое, что попалось под руку было описание холивара между теми, кто борется за использование в разметке таблиц и тех, кто сражается за div разметку.

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

Получился такой код:

  <div id="logotype"><img src="img/logo.png" width="580" height="205" /></div>
  <div id="dogs"><img src="img/dogs.png" width="453" height="483" /></div>

Результат:



Собственно ничего не поменялось...

[MyLastHit]

xenmayer, а зачем здесь вообще нужно абсолютное позиционирование? Случится говнокод страшный.

[xenmayer]

Сообщение от MyLastHit

xenmayer, а зачем здесь вообще нужно абсолютное позиционирование? Случится говнокод страшный.

Дело в том, что я сейчас пытаюсь научится. Мне интересно абсолютное позиционирование, не знаю насколько это хорошо или плохо, достаточно мало литературы прочитал.
Именно эта задача заняла у меня уже неоправданно много времени, (шаблоном этот рисунок я зря назвал конечно, это скорее так - экспериментальный набросок).

Почему получится говнокод? Возможно у тебя есть ссылка на материал по данному вопросу, который можно почитать. Потому что запрос "абсолютное позиционирование css" выдает только справочники, из которых собственно черпнул аналог такой таблицы стилей.


p.s.

Абсолютное позиционирование хочу в дальнейшем применять в своей верстке. Оправдано ли это и правильно - пока не разбираюсь.

[MyLastHit]

Есть крайне редкие случаи, когда нужно использовать абсолютное позиционирование. Их можно пересчитать по пальцам и все эти задачи достаточно специфичные.
Вам будет трудно поддерживать сайт, сверстанный таким образом. Придется задавать абсолютные позиции всем элементам. Потом запутаетесь + верстка будет некорректно себя вести почти всегда.
Верстайте исключительно с помощью margin, padding, float и display.

[xenmayer]

Сообщение от MyLastHit

Есть крайне редкие случаи, когда нужно использовать абсолютное позиционирование. Их можно пересчитать по пальцам и все эти задачи достаточно специфичные.
Вам будет трудно поддерживать сайт, сверстанный таким образом. Придется задавать абсолютные позиции всем элементам. Потом запутаетесь + верстка будет некорректно себя вести почти всегда.
Верстайте исключительно с помощью margin, padding, float и display.

Ок. Спасибо за совет.

Сейчас почитаю об этом.
Результат скину в эту же тему.