gif и png

[QUOTE=Valiant]мне надо вставить картинку в ячейку пока делаю так:
<td colspan="2"><div><img src="pics/logo.png"></div></td>
но беда в опере фон прозрачный (мне это подходит), а вот в ослике хрен знает что рисует (а это соответственно не подходит)
есть ли возможность как нибудь это исправить ???
что то дико впадлу клипать два сайта для двух браузеров...[/QUOTE]
Вообще если тебе надо сделать прозрачность в осле, то попробуй такой хак, у меня все заработало

#logo - это div, в котором вставляется рисунок png, так вот в лисе и опере все вставляется нормально без описания в css, а для IE работает после хака. Если не получится напиши.

А что, GIF-ом разве воспользоваться нельзя? Там же есть альфа канал... и к тому же GIF все браузерами практически одинаково поддерживается.

Да, кстати, в таких случаях страницу сайта клепают из PSD шаблона нарезкой оного. ПРоблем с прозрачностью не возникает. Хоть полупрозрачность делай, всех браузерах корректно будет поддерживаться.

Ослик это не поддерживает. Сам уже нарывался. Создавалась png полупрозрачная и ослик её не понял.

[QUOTE=shaelf]Ослик это не поддерживает. Сам уже нарывался. Создавалась png полупрозрачная и ослик её не понял.[/QUOTE]
После хака ослик работает с png, проверял на нескольких сайтах, тем более, что хак и сделан специально для этого в Microsoft'е и уже давно встроен в IE.

[QUOTE=alekciy]А что, GIF-ом разве воспользоваться нельзя? Там же есть альфа канал... и к тому же GIF все браузерами практически одинаково поддерживается.[/QUOTE]
В gif, по моему, нет альфа канала.

[QUOTE=alekciy]Да, кстати, в таких случаях страницу сайта клепают из PSD шаблона нарезкой оного. ПРоблем с прозрачностью не возникает. Хоть полупрозрачность делай, всех браузерах корректно будет поддерживаться.[/QUOTE]
Да страницу нарезают из PSD, но представь: ты сводишь несколько слоев (полупрозрачных), получаешь нужный тебе gif или jpg (со всеми тенями, дымками и прозрачностями), режешь, верстаешь, а когда все собрано, заказчик говорит: "не, мне логотип не нравится, что - то не то, вот если бы было ..."; хотя макет, не только утвержден, но и вообще все уже собрано. Тут и спасает вариант слой с фоном из gif или jpg, а поверх него полупрозрачный png. Кстати, в примере, я оставил /images/logo3.png - поскольку, описанный выше случай почти из жизни.

[QUOTE=mike]Ни разу не встречал случаев, когда нельзя сверстать страницу без полупрозрачности. Если этот случай такой, то дизайнера в шею...[/QUOTE]
Ответ на цитату, конечно оффтоп :), но этот дизайнер делал макеты очень известных сайтов в runet'е.
А вообще с помощью полупрозрачных изображений можно получить классные эффекты, например можно ли без png сделать, так что бы на темном фоне, в шапке сайта, который не прокручивается (в смысле фон не прокручивается), положить полупрозрачную плашку с логотипом, которая должна быть строго по центру всегда, даже когда растягивают или сжимают окно браузера (фон очень большой картинка - 1000px (!!!), при этом в ней элименты хоть и мелкие, но они не повторяются ни как, (!!!!) такая была у дизайнера идея)? Это решается только если сделать эту плашку полупрозрачной и поставить по центру. Показать, о чем говорил пока не могу, сайт еще не выложен в сети (хотя очень скоро будет), но могу сказать, что предложенными выше способами, я бы это не решил.

[QUOTE=skywalker]Ответ на цитату, конечно оффтоп :), но этот дизайнер делал макеты очень известных сайтов в runet'е.
А вообще с помощью полупрозрачных изображений можно получить классные эффекты, например можно ли без png сделать, так что бы на темном фоне, в шапке сайта, который не прокручивается (в смысле фон не прокручивается), положить полупрозрачную плашку с логотипом, которая должна быть строго по центру всегда, даже когда растягивают или сжимают окно браузера (фон очень большой картинка - 1000px (!!!), при этом в ней элименты хоть и мелкие, но они не повторяются ни как, (!!!!) такая была у дизайнера идея)? Это решается только если сделать эту плашку полупрозрачной и поставить по центру. Показать, о чем говорил пока не могу, сайт еще не выложен в сети (хотя очень скоро будет), но могу сказать, что предложенными выше способами, я бы это не решил.[/QUOTE]
Пошел флуд :)

Что то я не врубаюсь о чем речь. Непрокручивающийся фон - уже показатель непродуманости дизайна. Правда мой подход чисто буржуйский - максимум пользы при минмуме затрат. Я призираю сайты-презентации.

[QUOTE=mike]Пошел флуд :)

Что то я не врубаюсь о чем речь. Непрокручивающийся фон - уже показатель непродуманости дизайна. Правда мой подход чисто буржуйский - максимум пользы при минмуме затрат. Я призираю сайты-презентации.[/QUOTE]
Ладно, наказывайте за флуд :) ..., надо было, что б, дизайн был навороченый и многоцветный, но при этом надо было, как-то связать с ночным городом, вот дизайнер и нарисовал такое :), шапка: вечерний город (картинка, на которой профили домов с горящими окнами, картинка размером 1000px в длинну, дома на протяжение картинки не повторяются), а в середине логотип, подсвеченный фонарями, что то в виде рекламного щита (при этом свет, полупрозрачная картинка, в виде лучей, от фонарей падает не только на щит, но и вокруг щита тоже, при этом освещая все ближайшее пространство), на мой вопрос как должен вести себя логотип при разном разрешении экрана и изменении размеров окна браузера, последовал ответ: всегда находится в середине, т.е. двигаться должен логотип, а вот дома должны всегда стоят на месте. Вообще надо видеть, если еще не пропадет интерес, то примерно через неделю - две, сайт должен быть выложен.
Кстати эффект освещенности, окружения щита можно добиться можно только при png, т.е. когда "луч" оказывается поверх черного дома, цвет области соприкосновения, становиться серым. С помощью gif этого сделать нельзя. А по теме топика - прозрачности png в осле я добился таким хаком. Лучше один раз увидеть, чем сто раз услышать

Понял. Зафиксируй фон по центру, с помощью background-position и не парься с прозрачностью.

Пусть пропадает не только правая часть силуэтов домов, но и левая. Главное чтобы щит со светом оставался по центру.

[QUOTE=mike]Понял. Зафиксируй фон по центру, с помощью background-position и не парься с прозрачностью.

Пусть пропадает не только правая часть силуэтов домов, но и левая. Главное чтобы щит со светом оставался по центру.[/QUOTE]
Тоже идея, но я уже собрал так: двигается щит, а дома стоят, кстати эффекта, когда по всей длине шапки можно двигать "подсветку" для фона, растягивая окно, я не видел на других сайтах, еще бы кто это оценил :) . А вообще, я и считаю png очень хорошей вещью, а полупрозрачностью можно делать классные эффекты. Жаль, что веб-мастера и дизайнеры привыкли к gif, а осел поддерживает png лишь с хаками. Все флудить закончил, больше не буду :) :).

блин придётся делать
две страницы ... а так не хотелось :)
а хотя ... всё равно надо определять браузер пользователя

2skywalker Я не говорю, что после него он не работает, скорее всего имел ввиду, что он по дефолту не работает. А вообще альфа каналы в интернете - это зло, т.к. я ещё не видел не одного файла который это юзает с нормальным весом). А вообще отчасти согласен с mike. Дизайн - это упрощение восприятия сайта, он должен способствовать этому, а не быть просто красивым. Для красоты - картинная галерея.

[QUOTE=Valiant]блин придётся делать
две страницы ... а так не хотелось :)
а хотя ... всё равно надо определять браузер пользователя[/QUOTE]
А что не заработало? Покажи свой код? А то пока лишь гадаю.
У меня, когда открываешь файл html, вылетает сообщение ослика, что страница пытается открыть ActiveX, и действительно ни чего не работает, а когда открываешь тот же документ через http://путь-к-файлу, то все нормально, (попробуй введи http://localhost/dir-name/file.html)
P.S. _http://muz-tv.ru/css/style.css - здесь работает, посмотри как делается прозрачность для png.
[QUOTE=shaelf]Дизайн - это упрощение восприятия сайта, он должен способствовать этому, а не быть просто красивым.[/QUOTE]
Если бы так думали заказчики (с их то мыслями) и дизайнеры (с их то креативностью и величайшим вдохновением, достойным художников "Эпохи Возрождения" :) :) )

[QUOTE=mike]Ни разу не встречал случаев, когда нельзя сверстать страницу без полупрозрачности. Если этот случай такой, то дизайнера в шею...[/QUOTE]

К примеру: на сайте есть несколько разделов -- у каждого раздела свой набор цветов. На мой взляд лучше для такого случая использовать полупрозрачный логотип. И обязательно png, т.к. у gif-а неизбежно будут "рваные" границы

[QUOTE=Carpus]К примеру: на сайте есть несколько разделов -- у каждого раздела свой набор цветов. На мой взляд лучше для такого случая использовать полупрозрачный логотип. И обязательно png, т.к. у gif-а неизбежно будут "рваные" границы[/QUOTE]
mike, должен нас был давно забанить за флуд :).
Согласен, png много лучше. При использовании gif нужно будет для каждого раздела, делать свой gif, т.е. вырезаешь в фотошопе, потом накладываешь на каждый фон, потом ставишь прозрачность для этого цвета фона, при сохранении файла gif, и в результате сколько разделов, столько и файлов (а если, потом будут добавляться разделы, и с новыми фонами???), а когда png, то будет просто один файл, для всех разделов.
Valiant, у тебя получилось сделать прозрачность или нет?
Если нет то покажи код html и правила css.

[QUOTE=skywalker]Если бы так думали заказчики (с их то мыслями) и дизайнеры (с их то креативностью и величайшим вдохновением, достойным художников "Эпохи Возрождения" :) :) )[/QUOTE]
Основная проблема многих дизайнеров в том, что они не видят отличия web дизайна, от полиграфии. Если такого дизайнера заставить правильно сверстать старничку, затем сделать пару редизайнов при помощи только CSS, оптимизировать для вывода на принтер - наладонник - проектор не применения JavaScript, ограничить разумными пределами размер и колличество картинок... Вот только тогда он поймёт отличие))

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

да тогда ещё вопрос как Опера и Мазила воспринимает все эти приблуды с прозрачностью ???

[QUOTE=Valiant]пока решил оставить дизайн и заняться
программингом странички (одному ёптить трудно)
разделение кода под браузеры это жопа

да тогда ещё вопрос как Опера и Мазила воспринимает все эти приблуды с прозрачностью ???[/QUOTE]
Mozilla нормальное воспринимает, опера Вроде тоже (последние версии).

[QUOTE=skywalker]mike, должен нас был давно забанить за флуд :).
Согласен, png много лучше. При использовании gif нужно будет для каждого раздела, делать свой gif, т.е. вырезаешь в фотошопе, потом накладываешь на каждый фон, потом ставишь прозрачность для этого цвета фона, при сохранении файла gif, и в результате сколько разделов, столько и файлов (а если, потом будут добавляться разделы, и с новыми фонами???), а когда png, то будет просто один файл, для всех разделов.
Valiant, у тебя получилось сделать прозрачность или нет?
Если нет то покажи код html и правила css.[/QUOTE]
Толи дело CodeNet - тут даже логотип - это не картинка. Правда есть минусы. Я привык зажать Alt и кликом мыши по логотипу открыть в новом окне главную страницы. А в Mozilla вообще не понятно что можно на него кликнуть.

Но это я вылечу как-нибудь.

(Главное что на любом фоне смотрится :D )

[QUOTE=mike]Толи дело CodeNet - тут даже логотип - это не картинка. Правда есть минусы. Я привык зажать Alt и кликом мыши по логотипу открыть в новом окне главную страницы. А в Mozilla вообще не понятно что можно на него кликнуть.

Но это я вылечу как-нибудь.

(Главное что на любом фоне смотрится :D )[/QUOTE]
mike, в css style="cursor:hand;" такого нет

не правилен, и, то что осел это понимает, так это его приблуды, попробуй так style="cursor: pointer;" :

Я знаю. Давно в туду. Нужно что-то другое придумать. Например, сделать <A> блоком.

[QUOTE=mike]Я знаю. Давно в туду. Нужно что-то другое придумать. Например, сделать <A> блоком.[/QUOTE]
Зачем? В html код, после сборки сайта, конечно лучше не лезть, но если надо... Еще вариант в css прописать

Осел этого не поймет, а вот мазилла прекрасно, но тут, по моему мнению, лучше в html залезть.

у меня тут возник ещё один вопрос
поле <input> пишу им одинаковый размер
в опере отображается нормально а вот в ослике коряво
поле <input type= password> меньше по рамеру чем другое например text как сделать что бы они были одного размера ???

[QUOTE=Valiant]у меня тут возник ещё один вопрос
поле <input> пишу им одинаковый размер
в опере отображается нормально а вот в ослике коряво
поле <input type= password> меньше по рамеру чем другое например text как сделать что бы они были одного размера ???[/QUOTE]
Покажи код html и правила css.

[QUOTE=skywalker]...и правила css.[/QUOTE]
мне кажется Valiant не стили юзает, а просто size указывает
[QUOTE=Valiant]поле <input type= password> меньше по рамеру чем другое например text как сделать что бы они были одного размера ???[/QUOTE]
у обоих инпутов пишем так: STYLE="width:[color=green]..[/color];"

о..... блин заработало :)
просто раньше, вот эти теги по разному отображались
<input name="login" type="text" size="10">
<input name="passw" type="password" size="10">
поле пассворд было меньше чем поле текст

Такие вещи надо выносить в css, например так:

[QUOTE=Valiant]о..... блин заработало :)
просто раньше, вот эти теги по разному отображались
<input name="login" type="text" size="10">
<input name="passw" type="password" size="10">
поле пассворд было меньше чем поле текст[/QUOTE]
А ты в спецификации внимательно посмотри size отвечает НЕ за размер полей. За габариты отвечает width (о чем уже skywalker) сказал.

[QUOTE=спеца]size = cdata [CN]
Сообщает пользовательскому агенту начальную ширину ЭУ. Ширина задаётся в пикселах, за исключением случаев, когда атрибут type имеет значение "text" или "password". В этом случае значение атрибута - (integer) целое число символов.[/QUOTE]

чё то у меня эта тема не работает...
может что то не так ???

даже так попробовал

[QUOTE=Valiant]
чё то у меня эта тема не работает...
может что то не так ???

даже так попробовал
[/QUOTE]
Последний вариант точно не правильный.
Укажи полный путь к файлу (со слешами)

и

Проверь, не блокирует ли браузер ActiveX, у осла есть такой глюк, когда открываешь такой файл локально ActiveX блокируется, а через _http://путь-к-файлу открывает нормально и последнее png ты сохраняешь в png-24 (поставь галочку Transparency). Я давал ссылку, на этом сайте все работает, попробуй скачать сам файл png и открой в фотошопе, посмотри свойства. Выложи сам png. Не получится пиши.

Вот как я сделал png прозрачность:
[_url]www.radiomegapolis.ru/[/_url]

ыыыы...
сделал без всяких хаков :)
открываем фотопопу и редактим там по всякому и сохраням для WEB
;)

[QUOTE=Valiant]ыыыы...
сделал без всяких хаков :)
открываем фотопопу и редактим там по всякому и сохраням для WEB
;)[/QUOTE]
по всякому - это как?

это я типа про прозрачность :D

[QUOTE=Valiant]это я типа про прозрачность :D[/QUOTE]
Это, ясно. Просто свести два рисунка, может каждый, а вот прозрачность для осла без хаков, да это достойно звания гуру веб-дизайна и прtклонения :). Все таки как ты cделал? Или это секрет фирмы? :).
PS B каком браузере смотришь (уж не в самом ли великом "ослик номер 7")

Нет ослик 6
полностью подготавливаешь картинку
сливаешь слои и отправляешь в ImageReady
там оптимизируешь под PNG-8 отправляешь в фотошоп
пора сохранять
открываешь меню
файл->Сохранить для WEB
самое главное использовать не PNG-24, а PNG-8
просто с PNG-24 пока не пробовал :D

попробую.

На сколько я знаю, ослик с png8 работает нормально, но там нету альфа каналов.

[QUOTE=shaelf]На сколько я знаю, ослик с png8 работает нормально, но там нету альфа каналов.[/QUOTE]
Он там может быть, только для сохранения данных о прозрачности используются ячейки палитры индексированного изображения - подробнее здесь.
[QUOTE=skywalker]попробую.[/QUOTE]
Я уже попробовал. Картинку готовил в PhtoshopCS (9). Что получилось, можно посмотреть тут.

Альф-канал для PNG-8 Photoshop не сохраняет, да и будет ли какой-либо браузер ее поддерживать неизвестно.
Битовая прозрачность ничем не отличается от GIF.
Для правильного отображения PNG-24 в IE5.5-6 приходится использовать хак.