Дизайнер или я криворукий?

[prowoke]

В общем у меня макет псд сайта. Нужно верстать и чтобы сайт был резиновым. Я копирую шапку, в псд макете она 900 пикселей в ширину. Потом вставляю в style.css ( #header { background-image: url (img/header.png); }) и шапка всё равно фиксированна, хотя в конструкторе хтмл шаблона указывал, чтобы сайт был резиновым. Если увеличивать ширину картинки в гимпе и потом вставлять, то всё равно же она фиксированна будет в браузере. Вопрос: какая ширина должна быть у сайта, когда он в псд, если сайт должен быть резиновым? Каким его должен делать дизайнер? Просто дизайнер мой друг и мы оба позорные дилетанты в сайтостроении, мы пока только 1 сделали и он был фиксированным, и впервые столкнулись с резиной. Или я что то должен изменить в стилях, чтобы шапка растягивалась?

[Vlad]

Картинку фиксированной ширины в резиновую так просто не превратить. Есть несколько вариантов:

1. Делается очень широкая картинка (допустим, 2000 пикселов), вставляется фоном по центру или по левому, правому краю. Это зависит от изображения.

2. Картинка разбивается на составные части, которые накладываются друг на друга наподобие слоев в Фотошопе. При этом отдельные изображения для создания эффекта ширины также выравнивают по левому, правому краю или центру.

3. Рисунок имеет фиксированную ширину (800-1000px) и выравнивается по центру.

Выбор варианта зависит, естественно, от макета и дизайнера.

[prowoke]

Картинку фиксированной ширины в резиновую так просто не превратить. Есть несколько вариантов:

1. Делается очень широкая картинка (допустим, 2000 пикселов), вставляется фоном по центру или по левому, правому краю. Это зависит от изображения.

2. Картинка разбивается на составные части, которые накладываются друг на друга наподобие слоев в Фотошопе. При этом отдельные изображения для создания эффекта ширины также выравнивают по левому, правому краю или центру.

3. Рисунок имеет фиксированную ширину (800-1000px) и выравнивается по центру.

Выбор варианта зависит, естественно, от макета и дизайнера.

Ничего себе, это целая проблема оказывается). А я думал резиновую легко делать.

3. Рисунок имеет фиксированную ширину (800-1000px) и выравнивается по центру.

Так, если рисунок будет иметь фиксированную ширину в 800 пх, то как же он растянется на весь браузер?

Edited September 29, 2010 by prowoke

[Vlad]

Рисунок и не растягивается, он остается фиксированного размера. В данном случае идет сочетание фиксированной и резиновой верстки. Рисунок в шапке заданного размера, остальное имеет плавающую ширину.

[rus]

2. Картинка разбивается на составные части, которые накладываются друг на друга наподобие слоев в Фотошопе. При этом отдельные изображения для создания эффекта ширины также выравнивают по левому, правому краю или центру.

эмм..., я бы сюда добавил так же что: вырезается из шапки та часть, которую можно размножить (повторить) по горизонтали, то есть либо монотонная, либо с одинаковым рисунком, который на стыках не сильно разнИлся. А в стилях это прописывается как: repeat-x ну или просто repeat.

[Int]

Или рисунок по краям должен переходить в один цвет, который и остаётся фоном в тех местах, где рисунок кончается.

[rus]

Или рисунок по краям должен переходить в один цвет, который и остаётся фоном в тех местах, где рисунок кончается.

тогда зёбра получится полосатая.

[Vlad]

Int, типа такого эффекта?

[Чебурашка]

тогда зёбра получится полосатая.

Ничего подобного. Вот пример такого исполнения

http://ruseller.com/

[Searcher]

Ну так думайте логически. В каждом изображении есть от одного до нескольких планов, слоев. Допустим взять, трактор на поле а позади лес. Какие планы? Передний - трактор. Второй план - поле. Третий - опушка леса позади от поля. Вот и разделяем макет на три слоя, понятно какие...

Опушку для возможности расширения/сужения можно либо размножать (это паршивенько), либо нарисовать очень длинной и срезать лишнее, либо разделить на 2 разных слоя, которые будут въезжать друг под друга и создавать дополнительный эффект перспективы. Это png-шками легко осуществить.

Второй слой - нива. Её можно по принципу предыдущего слоя реализовать.

Третий слой - сам трактор. Ну а его элементарно поверх всего этого безобразия позиционируем так, чтобы в перспективе все соответствовало реальности.

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

Ничего подобного. Вот пример такого исполнения

http://ruseller.com/

Это тупо все одной картинкой сделано, а фоном родителя является крайний правый цвет дочернего элемента с картинкой слева!

[rus]

Int, типа такого эффекта?

мож я че-то не так понял просто?

[Чебурашка]

Это тупо все одной картинкой сделано, а фоном родителя является крайний правый цвет дочернего элемента с картинкой слева!

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

[Searcher]

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

Согласен

[prowoke]

Согласен

От такая: http://sharepix.ru/request_original/uh4y31...mage90950ot.png

[prowoke]

От такая: http://sharepix.ru/request_original/uh4y31...mage90950ot.png

Ну так, посоветуйте, что мне с такой штукой делать?

[mishka]

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

[psywalker]

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

[prowoke]

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

Понятно, ну странно. Почему же нету способа растянуть шапка по всему браузеру, я думал существует проверенный способ это сделать для резиновой вёрстки. Оказывается вон как.

[psywalker]

Понятно, ну странно. Почему же нету способа растянуть шапка по всему браузеру, я думал существует проверенный способ это сделать для резиновой вёрстки. Оказывается вон как.

Но почему-же, именно растянуть, способ есть. А если ты хочешь, чтобы фон повторялся, тогда делай, как мы тебе говорим.

[mishka]

Понятно, ну странно. Почему же нету способа растянуть шапка по всему браузеру, я думал существует проверенный способ это сделать для резиновой вёрстки. Оказывается вон как.

Чем тебе репит не нравится?

Ты представляешь что значит растянуть картинку?

Это значит:

- либо потянуть по ширине, а по высоте оставить как есть - тогда она растянется не пропорционально и станет некрасивой.

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

Репит картинки в твоем случае и есть проверенный способ. Центрируешь по иксу 50% и репитишь по иксу.

[prowoke]

А если мне надо блок регистрации расместить например вверху справо, то мне надо в процентах задавать расположение да? Т.е.

#authorization {
margin: 0 0 0 70%;
}

Я верно мыслю?

[psywalker]

Я верно мыслю?

Нет. Пользуйся position: absolute; и координатами.

[prowoke]

Нет. Пользуйся position: absolute; и координатами.

А почему неверно? Вроде всё растягивается как надо. И ещё хочу спросить вот что. Как задать цвет фона у поля <input type="text">.

[prowoke]

Чёт я сделал так, как ты посоветовал, и при удалении в браузере, форма на месте остаётся. Вот код:

form {
	position: absolute;
	top: 200px;
	left: 1300px;
}

Edited September 30, 2010 by prowoke

[prowoke]

ну так... Помогите!

[Justnewone]

Ну так, раскройте же карты.

Скрины того как есть и как надо.

Фрагменты кода польностью, а еще лучше сразу ссылку.

А то ввиду череды утомительных уточняющих вопросов/ответов мне всегда хочется закрыть тему.