Показать сообщение отдельно
  #1 (permalink)  
Старый 03.04.2012, 17:08
Интересующийся
Отправить личное сообщение для Natali_RnD Посмотреть профиль Найти все сообщения от Natali_RnD
 
Регистрация: 16.01.2012
Сообщений: 12

Как правильно сверстать интерфейс подбора рамок для фотографий
стала задача разработать интерфейс аналогичный вот этому http://www.mir-ramok.bel31.ru/bin-release/mirramok.html только без флеша и внутри должна находиться фотография,а не пустой белый квадрат. Получается у нас есть фото, вокруг него идет две рамки из текстуры(паспарту называется) и самая внешняя рамка это багет. Смысл интерфейса в том, что пользователь может менять как размеры всей конструкции так и отдельных её частей, может выбрать другую рамку или другую текстуру. Я изначально подумала что нужно сделать несколько вложенных перекрывающих друг друга блоков. Т.е. самый внутренний div это фото, он находится внутри текстурной рамки и самый верхний блок это багет. Пускай багет это слой1, текстурная рамка - слой2 и фото - слой3. По идее каждый следующий слой имеет возрастающий z-index, что обеспечивает перекрывание блоков. Тут встаёт вопрос как правильно спозиционировать блоки и заполнить изображением? слой1(багет) заполнить через background repeat скорее всего не получится, потому что это не однородная текстура, а рисунок рамки. как с ним быть, может быть можно собрать background из четырёх частей или нужно использовать готовый рисунок всей рамки в качестве фона? далее слой2(текстурная рамка) я подумала что её нужно делать через repeat и остаётся слой3(фото), которое тоже то ли надо в background поместить, то ли оставить в виде img. К тому же я вообще не знаю можно ли перекрывать по-разному заданные background'ы, они нормально друг на друга наложатся? Как сверстать так чтобы можно было: 1) увеличить/уменьшать размер всей конструкции в целом и ничего никуда не съезжало 2) изменять визуальную(т.е. ту часть которая видна) ширину слоя2 и слоя1?
Ответить с цитированием