Форум Сайтостроение Веб-строительство

Необычная верстка

D
На сайте с 09.10.2011
Offline
15
Digidie
981

Приветствую! Нужна помощь. Есть необычная верстка(необычная для меня, т.к. я с такой не сталкивался). Дизайн по типу смахивает на игровой. Но вот как этот дизайн выполнен(технически)! В общем вот скрин оригинала:

Нормальный(ссори за такой кривой скрин, самому такой дали)

Проблема собственно в том что, элементы которые должны быть разобраны на слои(чуть ли не по миниатюрам), они объединены в один слой, и как верстать совершенно непонятно. Я сверстал, но косячно. Ниже еще один скрин обрисованный где какие слои объединены -

Обрисованный

Красным - обозначен слой, который внутренний. Стрелки показывают что он под колпаком в общем:crazy:

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

Я_Рожден_В_СССР
На сайте с 21.08.2010
Offline
75
Я_Рожден_В_СССР
#1

Вы об этом? 


<div id="first">	/* весь зелёный блок

   <div id="header"></div>	/* то, что выше красного блока

   <div id="shapka"></div>	/* красный блок

   <div id="title"></div>	/*зелёный внутренный блок

</div>

<div id="second"></div>	/* продукция

<div id="footer"></div>
D
На сайте с 09.10.2011
Offline
15
Digidie
#2
Я_Рожден_В_СССР:
Вы об этом? 


<div id="first">	/* весь зелёный блок

   <div id="header"></div>	/* то, что выше красного блока

   <div id="shapka"></div>	/* красный блок

   <div id="title"></div>	/*зелёный внутренный блок

</div>

<div id="second"></div>	/* продукция

<div id="footer"></div>

Все это конечно заманчиво, но как я это все правильно нарежу, если слои объединены. Я пробовал так:

<div id="wrapper">

<div id="header">

<div id="in_header"></div>

</div>

<div id="content"></div>

<div id="footer"></div>

</div>

#wrapper{

min-width: 1024px;

max-width: 1920px;

margin: 0 auto;

}

#header{

width: 100%;

height: 630px;

background: url(../images/header_bg.png) no-repeat top center; /*png потому что теней много*/

position: absolute;

left: 0;

top: 0;

}

#in_header{

width: 100%;

height: 400px;

background: url(../images/in_header.png) no-repeat top center; /*опять же тени*/

position: absolute;

left: 0;

top: 0;

z-index: -1000; /*ie7 этого не понял*/

}

/*и тут начинаются сложности, можно считать что половина контента уже занята зеленым блоком*/

#content{

width: 946px;

background: url(../images/cont-bg.png) repeat-x top center;

}

дальше футер.

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

vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#3

убейте этот дизайн, нарисуйте новый, я бы на таком сайте ничего покупать не стал

D
На сайте с 09.10.2011
Offline
15
Digidie
#4
vandamme:
убейте этот дизайн, нарисуйте новый, я бы на таком сайте ничего покупать не стал

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий