Шапка сайта, сочетание с фоном.

[propzors]

Проблема такая, есть Шапка сайта Тоесть прямоугольник сделаный в фотошопе. К нему применен стиль. На этом Прямоугольнике написан текст и оформление.... Все простенько и понятно.
Как я вставляю это на сайте.. создаю два дива, в главном диве полоска вертикальная толщиной один пиксель, задаю ей репит х... фон готов. В вложеный див вставляю саму картинку с текстом. задаю марджином отцентровку.
И вот проблема. На стыке Картинки и фона полоска, тоетсь виден стык =(
Пробовал вырезал по разному ничего не получилось. Подскажите как правильно делать хедер что бы без СТЫКА этого?

[errante]

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

Короче говоря участки кода CSS и HTML в студию!

[propzors]

Вообщем я сейчас учусь делать Хедеры ) А так я новичок...
И мне очень кажется что тут проблема с вырезанием в фотошопе...
бордер ноль писал не помогло.
Весь остальной код в хтмл и цсс файлах удалял.. края (полоски) не из за этого...остаются..
Залил проблему на фрихостинг:
http://proges.h18.ru/sp.html


CSS код:
#header { это див с фоновым цветом(полоской)
border: none;
background-image:url(img/bghead.jpg);
background-repeat:repeat-x;
height:215px;
width:100%;

}
#text это див с картинкой (вложен в предыдущий див)
{
background-image: url(img/head.jpg);
background-repeat:no-repeat;
height:215px;
margin:0px auto;
width:1152px;

}


http://proges.h18.ru/index.html по этой ссылке решение проблемы но другим способом (((
#text
{
background-image:url(img/texthd.gif); Надпись на картинке с прозрачностью... сделано позиционированием
background-repeat:no-repeat;
background-position:top center;
height:215px;
}

[errante]

Какой-то страшный код
приблизительно пишится так
CSS

#head {margin:0; padding:0; background: url(bg.gif) repeat-x; height: 130px;}
#logo {margin: 0 auto; padding:0; width: 1000px; height: 100px; background: url(logo.jpg) no-repeat;}

и соответственно HTML

<div id="head">
<div id="logo"></div>
</div>

[propzors]

ну так, а как полосочки то убирать? )
Или как вырезать в фотошопе чтоб их не было.... стыков

[errante]

А что за рисунок в фотошопе, а то неизвестно что и как ты там вырезаешь и делаешь?
Для тебя наверное самым простум будет так:

http://s51.radikal.ru/i134/1102/b7/9220c5c6bad4.jpg

1. Выбираем инструмент (см. рис)
2. Выбираем фиксированный размер
3. Устанавливаем длину и ширину
4. Выделяем необходимую область, точнее она сама выделится достаточно щелкнуть мышкой по твоему рисунку в нужном месте
5. Жмем Shift+Ctrl+C
6. Жмем Ctrl+N
7. В новом окне жмем Ctrl+V
8. Увиличиваем изо, смотрим на края, если все в норме то сохраняем

[propzors]

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

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

[errante]

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

[propzors]

Точно ) Поместив свой будущий хеддер на новый, более большей слой, сразу становиться видны его бордеры и тени. И естественно именно они отображаются в готовом HTML документе )
Кстати - конкретно моя проблема решилась Снятием галочки "обводка" в настройках стиля )