Подскажите, как правильно сделать.

[slo_nik]

Добрый вечер.

Нарисовал первый свой дизайн для личной странички, нарезал в фотошопе, вёрстка делалась автоматом при сохранении картинок.

Получилось, что дизайн фиксированый, надо переделать под резиновый.

Попробовал сделать, но возникли вопросы, прошу подсказать правильное решение.

Вот начальный вариант, а вот это то, что я пытаюсь сделать(переделать).

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

Второй вопрос о двух вертикальных полосах, слева и с права от текстовой области. Формируются они двумя дивами, с задаными border-left и border-right, нижний див обозначен красной полосой(верхняя граница). Можно ли сделать это всё одним дивом, или какие ещё есть варианты сделать эти две полосы?

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

Четвёртый вопрос о тени под блоками меню и текстовой области. Как лучше сделать, слоями или вырезать это в фотошопе и вставить просто рисунком в соответствующий див?

И последний вопрос о шрифте. Данный шрифт MTCORSVA.TTF, отображается нормально в Opera 10.10, Safari 4.0.3, Mozilla FireFox 3.5.1, Google Chrome 5.0.307.1 и в IE 7,8. Как конвертировать ttf шрифт в eot для IE я нашёл, но не смог найти как конвертировать этот же шрифт в SVG для предыдущих версий Google Chrome и в формат OTF для предыдущих версий браузеров Opera, Safari и Mozilla FireFox. Поделитесь, пожалуйста ссылками. И насколько вообще подходит этот шрифт в данном случае?

Вот пока всё, заранее благодарю откликнувшихся.

[Энди]

На 1.Попробуй overflow задай для фона.

На 3.сделай float:right и padding-left:100%; или width:100%;

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

[slo_nik]

На 1.Попробуй overflow задай для фона.

На 3.сделай float:right и padding-left:100%; или width:100%;

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

1) у меня в стилях прописан overflow:hidden;, но это не решает проблему. фоновый рисунок имеет ширину 1px и высоту 1500px, градиент находится только в верхней части, нижний градиет это вторая часть фонового рисунка и расположена она в отдельном диве. При увеличении высоты текстовой области, нижняя часть фонового рисунка смещается вниз. Меня интересует, можно ли как то сделать, что бы фоновый рисунок был одним целым, градиент находился вверху и внизу, но при увеличении текстовой области фоновый рисунок тянулся на всю высоту странички?

3)Если бы можно было так сделать, я бы давно сделал. дело в том, что веточку надо расположить в нескольких дивах по частям. текстовая область это первый див, от левой вертикальной полосы до правой это второй див, за правой вертикальной полосой это третий див, нижнее меню это четвёртый див. Причём в текстовой области веточка является фоновым рисунком, когда текст попадает на неё, она его не перекрывате и текст нормально виден. это можно посмотреть если зайти в начальном варианте сюда. тем более, что в начальном варианте дизайн фиксированый. если делать отдельный слой, то при увеличении текстовой области по высоте, слой не смещается вниз. Можно ли как то сделать, что бы слой смещался вниз если высота текстовой области увеличивается?

4) я говорил только о тенях под тестовой областью и меню.... текст естественно будет текстом

Четвёртый вопрос о тени под блоками меню и текстовой области. Как лучше сделать, слоями или вырезать это в фотошопе и вставить просто рисунком в соответствующий див?

Edited February 26, 2010 by slo_nik

[Энди]

ну ты или намудрил там,или расказуеш так))))может лучше код покажешь)

а в 4 я бы кинул в div)

Edited February 26, 2010 by Энди

[slo_nik]

ну ты или намудрил там,или расказуеш так))))может лучше код покажешь)

а в 4 я бы кинул в div)

в первом топике есть две ссылки на начальный вариант и на то, что я пытаюсь переделать.

Начальный вариант сделан таблицей, переделать на дивы хочу.

Edited February 26, 2010 by slo_nik

[slo_nik]

немного подправил вёрстку, но появилась новая проблема.

рисунок веточки я совместил из двух частей, пока в текстовой области мало текста, рисунок совмещён нормально, но только стоит текстовой области растянуться под объём текста, как две части рисунка смещаются относительно друг друга.

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

Подскажите, пожалуйста, как это исправить?

[Int]

Сделай у content margin не 14, а 18

Edited February 28, 2010 by Int

[slo_nik]

Сделай у content margin не 14, а 18

блин!!! как всё просто оказалось.... :-) Благодарю.

но вот эти два вопроса ещё пока актуальны

Четвёртый вопрос о тени под блоками меню и текстовой области. Как лучше сделать, слоями или вырезать это в фотошопе и вставить просто рисунком в соответствующий див?

И последний вопрос о шрифте. Данный шрифт MTCORSVA.TTF, отображается нормально в Opera 10.10, Safari 4.0.3, Mozilla FireFox 3.5.1, Google Chrome 5.0.307.1 и в IE 7,8. Как конвертировать ttf шрифт в eot для IE я нашёл, но не смог найти как конвертировать этот же шрифт в SVG для предыдущих версий Google Chrome и в формат OTF для предыдущих версий браузеров Opera, Safari и Mozilla FireFox. Поделитесь, пожалуйста ссылками. И насколько вообще подходит этот шрифт в данном случае?