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

15

Digidie

24 июля 2012, 07:31

984

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

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

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

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

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

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

75

Я_Рожден_В_СССР

24 июля 2012, 08:06

#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

15

Digidie

24 июля 2012, 08:33

#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>

</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 то снизу остается пустое место. И когда масштабирую сайт в браузере, бэкграунд контента начинает тянуться по вертикали, вниз-вниз. И вообще надо ли учитывать что продукции может и не быть? И вот хотелось бы услышать мнение касающееся именно контента. Спасибо!

Оптимизация плавающих фреймов для Как можно наказать за Кэширование в браузерах и

675

vandamme

24 июля 2012, 08:39

#3

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

D

15

Digidie

24 июля 2012, 08:49

#4

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

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

Яндекс дал практические рекомендации Проектная документация: что нужно ВКонтакте открывает конкурс мини-приложений

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи

Маркетинг для шоколадной фабрики. На 34% выше средний чек