HTML верстка

Question

[Hint]

Являюсь программистом, а не верстальщиком, но тут заказчик решил сэкономить, поручил мне заодно сверстать макет.
Основное содержимое имеет фиксированную ширину и расположено по центру (по краям простой градиент). Очень много декоративной графики (одни графические элементы часто наплывают на другие). В итоге, надо иметь возможность вставлять слои поверх основного содержимого с жестко заданными координатами (относительно центрального блока). Подскажите, как это лучше реализовать? Как центрировать основной блок и как размещать наплывающие элементы?

Comments

[RuslanCC]

Если по краям действительно простой градиент рисунком, а центральный блок является самой страницей:
градиент дать фоном к body — background:url(bg.jpg) repeat-x;
блок фиксированной ширины по центру — div — margin:0 auto; width:...px
дальше в этом диве в порядке наложения создаются другие дивы с позиционированием, в которых и будут ваши графические элементы — postion: relative; top:...px; left:...px;
Да и все. Если нужно менять очередность наложения слоев — воспользуйтесь z-index

Answer 1

[girichev]

Пример для вашего случая

Comments

[Dm Po]

ух ты ж блин, клёвый сервис!
спасибо

Answer 2

[bigdogsru]

ИМХО, проще нанять верстальщика. На фрилансе, например. Просто поделиться частью оплаты за проект.

Answer 3

[Андрей]

для центрального блока в CSS
position:relative
для «наплывающего элемента»
.newlayer {position:absolute; left:Xpx; top:Ypx; z-index:999}
чем больше значение z-index тем выше элемент будет находится.
чтоб центрировать основной блок у него margin-left:auto и margin-right:auto
чтоб центрировать внутренний (плавающий) блок:
left:50%;
top:50%;
margin-left:-[1/2 ширины блока]px;
margin-top:-[1/2 высоты блока]px;

Comments

[bigdogsru]

ой, не стоит для всего основного блока position:relative. Может быть чревато. Лучше в тех местах, где действительно нужно абсолютное позиционирование, делать относительные обертки «по месту». Кроме того, надо видеть макет… уверена, что с большинством «наплывающих» (хи-хи!) элементов можно справиться простой парой фон-элемент.

[Hint]

Чем чревато relative для основного блока?

[ertaquo]

Насколько мне известно, только невозможностью правильно спозиционировать элемент внутри блока с relative относительно его (блока) родителя.
На мой взгляд, лучше сделать у центрального блока так:
html, body
{
margin: 0;
padding: 0;
}

#page-content
{
position: relative;

width: 900px; // нужная ширина центрального блока

margin: 0 auto;
}

В таком случае страница не будет всегда по центру (если ставить margin-left в половину ширины блока, то при размере окна меньше ширины блока блок будет вылезать за левый край), а дочерние элементы при position: absolute; будут позиционироваться относительно блока, а не страницы.