Добрый день! Верстаю небольшой сайтик, дизайнер нарисовал довольно интересные шапки для меню. Ширина меню соответственно может изменяться, а картинку шапки хотелось бы иметь одну, а не делать каждый раз новую.
Проблема в самом изображении (см. изображение)

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

Присоединённый файл ( Кол-во скачиваний: 20 )
 Menu_top.gif 3,60 Kb

предлагаю сделать так. белое пятно возьми отдельным слоем, навернео полупрозрачным пнг, тогда останется тупо кнопка. а её можно разделить на три части - левая и правая собственно края, и центральная тянущаяся. при этом в центральном блоке будет блок с фоном того белого пятна (которое выравнивается посередине).

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

Хочу заметить, что текст в шапке должен быть по вертикали по центру, т.е. перекрывать и  отблеск и саму шапку

а если это изображение сделать не как фон ячейки,  а как  фон строки(<tr>) ??? а в ячейках сам текст! так пробовали ?

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

Чтобы получился белый эллипс нужно взять опаситьный пнг (опасити уже зашита в альфа-канал), такой, про который говорил  Mavrun и тянуть его по горизонтали. Так, конечно будет пиксельно, но это уже нужно эмпирически проверять, и иначе уже никак. Иначе только генерить шапку PHP GD ж)

FortMax, все равно он не растягивается а копируется.


comcon1, вариант с половинами я делал, даже описал это корявыми словами в первом посте   
Тогда как быть, если у меня ширина меню например X, а длина заголовка (самого текста) меню как раз на всю ширину этой шапки?

С PHP GD я кстати не подумал, спасибо) Но это уж на крайняк, не думаю что хост будет настолько мощный)

P.S. т.к. я коряво излагаю то, что мне надо, выложу скрин...

Присоединённый файл ( Кол-во скачиваний: 7 )
 menu.jpg 12,42 Kb

а если вставить картинкой с width="100%", а сверху положить слой с текстом ?

Ну так тянешь просто по самому длинному элементу. Нужны детали, пиши подробнее.

PHP GD: мощный хост здесь ни при чем. Ты растягиваешь шапку согласно тексту? Тогда пока текст не меняется новую картинку для шапки не рендеришь.

Попробуй еще подумать над вариантом с растяжением png. Это может оказаться и не особо пиксельно. Я, бывало, использовал такие темы.

FortMax, в таком случае ведь придется использовать абсолютное положение слоя? Если так, то это тоже не особо подойдет, т.к. одно меню может находиться под другим, и их высота тоже может меняться.

Если я ошибаюсь - поправьте. Я не особо дружу со слоями, надо почитать соответствующую литературу.

comcon1, с png имеется ввиду вставить в ячейку изображение через <img... и растянуть? Мне нужно чтобы текст немного перекрывал этот самый эллипс.

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

Это сообщение отредактировал(а) XAKEPEHOK - 24.12.2009, 04:08

Ну тут много вариантов. Мне вот приходит в голову вставить изображение через такую закорюку:


Это сообщение отредактировал(а) comcon1 - 24.12.2009, 04:13

Ну сделай div абсолютом, один под другим, через z-index определи какой сверху, и в нижний картинку растяни обычным img

Всем большое спасибо! Сделал следующим образом



Что касается полупрозрачного эллипса... Здесь вполне можно взять не полупрозрачный png, а обычный gif вместе с фоном я тянуть его сверху. Но в моем случае такой вариант решения не подходит, т.к. приходится вставлять еще и нижнюю кайму меню (а тогда нет места для текста, а высоту шапки менять не хочу), да и сам фон шапки опять же горизонтально градиентный....