ПНГ кнопка тянущаяся по содержимому

[psywalker]

Ребят, снова нужна ваша помощь, перед нами встала новая задача, вобщем нужно сделать кнопку с закруглёнными углами именно на ПНГ24, и с Ховер эффектом (обязательно!) что-бы эта вещь работала везде, особенно в ИЕ6! Вроде бы проблем нет, но дело в том, что нужно:

1) Кнопка НЕ должна быть фиксированного размера(фикс только Высота), а должна растягиваться именно по содержимому

2) Нужно что-бы в любой момент можно было выравнить эту кнопку по середине экрана, или что-бы легко можно было её прифлоатить влево или вправо при желании

3) Уголки и центр должны состоять из Одного Спрайта, один рисунок!

4) При наведении на кнопку в Любом месте!, вся она должна изменять цвет, вобщем Ховер эффект должен быть обязательно опятьже ПНГ24 (спрайт тот-же!)

5) Желательно сделать не тратя много элементов и вообще кода

6) Соответственно, если всё эта конструкция делается на одном спрайте, то можно использовать ПНГ-фиксы, csshover.htc и прочую лабуду

7) Решение в итоге должно быть полный кросс, включая ИЕ6

8) На худой конец можно прибегнуть к JS, но это если уже совсем безнадёга будет

9) Я делал кнопку на таблице, но считаю этот вариант неправильным, так так таблицы нужны для табличных данных

10) Нужно получить универсальный код и для ссылки и для кнопки(<input type="submit" /> <input type="button" />)

Я мучался целый день и максимум что мне удалось добится, это: http://psywalker.ru/Forum/png-button/main-2.html посмотрите эффект в ИЕ6, почти удалось побороть, но вот почему то ПНГ-ФИкс всё портит, если его ставить перед основными стилями, а если после, то тогда наоборот, ПНГ срабатыает, а Ховер эффект отключается, вобщем я замучался в конец и решил обратится к Гуру

Помогите пожалуйста решить задачку, заранее очень благодарен!

p.s. - Great Rash, к тебе просьба: Погоди писать решение сразу, дай другим подумать хоть пару часов

Edited September 14, 2009 by psywalker

[Verder]

Блоку #trk поставьте clear:both;

Не помогает.

Причем что странно, иногда картинку видно.

http://browsershots.org/screenshots/23999a...e431443efd267d/

[BassEast]

Извините, что не по теме, но лучше тут спрошу, чем новую тему создавать:

Вот тут - http://ovzor.ru/els/ - под меню, есть картинка (кабина фуры выезжающей из края экрана, потом будет во флэше выезжать) в обычном jpeg. Все браузеры ее видят, а в IE6 не отображается, просто пустое место. Что только не пробовал.

Уберите на время блок: <div id="clear"></div> после "maincontent"... посмотрите что происходит.

[mishka]

Тогда поставьте его после блока clier.

И скажите что нибудь по поводу кнопки!

А лучше занеси в блок mainmenu так логичнее.

[psywalker]

Блин, ну вот нахрена так делать. Вердер, впадлу было тему создать отдельную чтоли? Теперь ща тут будет беспредел не по сабжу.

Всё дело в абсолюте, это походу баг ИЕ6, попробуй убери абсолют, появится картинка? Боюсь, что придётся менять твои планы и верстать чуть подругому из-за этого говна. У тебя же есть уже слева колонка <div id="mainmenu">, вот в ней и делай, после меню сразу свою тему с грузовиком!

[Zippovich]

Код думаю тебе нужно написать самому. Принцип следующий:

кнопку делим на 3 части - углы и центр с текстом

в центре png-24 тянущийся, в углах статический, т.к. это png-24 спрайтами не получится, делаем 3 картинки.

Сделать input не получится, button можно такой сделать, но будут проблемы, div или a подобный сделать будет без проблем.

центрировать блок по центру не вижу проблемы:

<p style="text-align: center">
<a class="button-container" style="display: inline-block">...</a>
</p>

[BassEast]

psywalker, я вот одного не пойму, почему в моём примере, валидатор пропустил тот момент, что input вложен в тег a? Может быть всё-таки стандарты меняются?

[mishka]

style="display: inline-block"

А как же ие? Ведь ие6-ие7 непонимают этого.

Сделать input не получится, button можно такой сделать, но будут проблемы

Какие проблемы?

psywalker, я вот одного не пойму, почему в моём примере, валидатор пропустил тот момент, что input вложен в тег a? Может быть всё-таки стандарты меняются?

Странно как то все это...

[psywalker]

psywalker, я вот одного не пойму, почему в моём примере, валидатор пропустил тот момент, что input вложен в тег a? Может быть всё-таки стандарты меняются?

Вот и я не могу этого понять, как такое вообще возможно, но точно знаю, что это грубое нарушение семантики

mishka2

style="display: inline-block"

А как же ие? Ведь ие6-ие7 непонимают этого.

В ие6-7 можно заменить на "display: inline;"

[mishka]

style="display: inline-block"

А как же ие? Ведь ие6-ие7 непонимают этого.

Извините, все он оказывается понимает, только посвоему. Если это применить к блочным елементам, то в они в нормальных браузерах станут вряд, а в ие6-7 нет. А если это применить к инлайновым элементам, то они себя будут вести как блочные, и при этом будут стоять вряд.

[BassEast]

Вот и я не могу этого понять, как такое вообще возможно, но точно знаю, что это грубое нарушение семантики

пусть оно будет грубым.. всё уперается в W3C... нет возражений - можно использовать!

[psywalker]

пусть оно будет грубым.. всё уперается в W3C... нет возражений - можно использовать!

Это не разговор

[psywalker]

Ну что ребят, кто нибудь сможет найти решение?

[s0rr0w]

Ну что ребят, кто нибудь сможет найти решение?

А зачем?

Зачем искать решение для убогого браузера? Пусть там будут квадратные кнопки, а не с закруглениями.

[SelenIT]

Если это применить к блочным елементам, то в они в нормальных браузерах станут вряд, а в ие6-7 нет. А если это применить к инлайновым элементам, то они себя будут вести как блочные, и при этом будут стоять вряд.

Для изначально блочных элементов в старых IE есть хак: display:inline + что-либо, включающее hasLayout (по моему опыту, самое надежное — zoom: 1). Эта странноватая комбинация как раз дает поведение, ожидаемое от display: inline-block. Больше проблем с FF2, не знающим inline-block ни в каком виде (приходится юзать проприетарщину типа -moz-inline-stack, а внутрь вставлять блочную обертку, иначе содержимое блока "слипнется"). Но FF2 уже можно считать вымершим, имхо.

всё уперается в W3C... нет возражений - можно использовать!

Не совсем. DTD и основанные на нем валидаторы разметки умеют худо-бедно различать типы контента (сплошной текст, структурированный текст, вставка внешнего ресурса), но не имеют никакого представления о том, как этот контент должен взаимодействовать со всем прочим. Понятие "интерактивный контент", насколько мне известно, появилось лишь в HTML5, валидаторы прежних версий не догадывались, что к каким-то элементам у браузера особое отношение/дефолтная реакция, оно описывалось в других стандартах. Поэтому кнопка в ссылке приемлема для валидатора (строка в строке), но вызывает когнитивный диссонанс у браузера. Если, напр., ссылка ведет на Яндекс, а кнопка шлет форму на Гугл, то куда бедному браузеру деваться, когда юзер по ней кликнет — разорваться, что ли, как той мартышке из анекдота?

Поэтому валидатор валидатором, а здравый смысл выключать нельзя. А стандарты действительно меняются (напр., валидация по DTD отмирает — именно из-за неумения ловить такие грубые логические ляпы), новые стандарты (тот же HTML5) пытаются учесть больше таких вот факторов реальности...

Edited September 15, 2009 by SelenIT

[BassEast]

Поэтому кнопка в ссылке приемлема для валидатора (строка в строке), но вызывает когнитивный диссонанс у браузера. Если, напр., ссылка ведет на Яндекс, а кнопка шлет форму на Гугл, то куда бедному браузеру деваться, когда юзер по ней кликнет — разорваться, что ли, как той мартышке из анекдота?

согласен. Но никто не заставляет вас вешать 2 активные ссылки. Достаточно повесить на тэг а.

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

[mishka]

надо что-то глобальное уже осуществлять.

Забивать на ие6, выводить сообщение чтобы браузер обновили.

[psywalker]

А всё таки решения так пока и небыло найдено..эхх, а жаль...

[BassEast]

А всё таки решения так пока и небыло найдено..эхх, а жаль...

давайте не будем торопить время

не у всех есть время отслеживать за темой и пробовать фиксить данную задачу..

Edited September 16, 2009 by BassEast

[psywalker]

давайте не будем торопить время

не у всех есть время отслеживать за темой и пробовать фиксить данную задачу..

Конечно же друг, я всё понимаю, просто сегодня в отпуск ухожу и уезжаю на пару недель, получается без решения как бы, но да ладно, думаю приеду, тут уже будет кому ответить и поблагодорить

Edited September 16, 2009 by psywalker

[mishka]

Great Rash, ну хоть ты покажи как делать

[Skalpellion]

Есть такой вариант.Могу привести пример для меню,но принцип думаю будет понятен.

Такая структура:

<ul>
	 <li><a href="#"><span>Тут текст кнопки</span><em></em></a></li>
</ul>

Режем спрайт так:

Первый спрайт:

Левая длинная часть с левым углом.Снизу ховер состояние.

Верх 30px и низ(ховер состояние) 30px,к примеру.Общая высота спрайта 60px;

Второй спрайт:

Правый маленький угол.Снизу ховерное состояние.

Все элементы включая li флоатятся на лево.

Для li задается высота 30px и overflow:hidden;

Спану задается высота 60px и вешается основной спрайт с широкой полосой.

Аналогично задается emу.Вполне вероятно,что появится отступ в 1пх от спана до ема.Убираем его отрицательным маржином на ем.

На ховер делается отрицательный маржин на спан margin:-30px 0 0;

Аналогично на ем.

Что мы видим? Появилось ховерное состояние,но пропал текст.

Делаем на спан padding:30px 0 0;

Текст повился.Думаю доровнять дальше - не особая проблема.

Для Ie6 используем фильтр альфаканалов.

Не знаю почему,но если и пнг на спане и пнг на ем делать метод 'crop'.не срабатывает ховер.

Я ставил на спан метод crop,а на ем метод 'none'

Если ничего не забыл - все будет как положенно.

Edited September 16, 2009 by Skalpellion

[psywalker]

Есть такой вариант.Могу привести пример для меню,но принцип думаю будет понятен.

Такая структура:

<ul>
	 <li><a href="#"><span>Тут текст кнопки</span><em></em></a></li>
</ul>

Режем спрайт так:

Первый спрайт:

Левая длинная часть с левым углом.Снизу ховер состояние.

Верх 30px и низ(ховер состояние) 30px,к примеру.Общая высота спрайта 60px;

Второй спрайт:

Правый маленький угол.Снизу ховерное состояние.

Все элементы включая li флоатятся на лево.

Для li задается высота 30px и overflow:hidden;

Спану задается высота 60px и вешается основной спрайт с широкой полосой.

Аналогично задается emу.Вполне вероятно,что появится отступ в 1пх от спана до ема.Убираем его отрицательным маржином на ем.

На ховер делается отрицательный маржин на спан margin:-30px 0 0;

Аналогично на ем.

Что мы видим? Появилось ховерное состояние,но пропал текст.

Делаем на спан padding:30px 0 0;

Текст повился.Думаю доровнять дальше - не особая проблема.

Для Ie6 используем фильтр альфаканалов.

Не знаю почему,но если и пнг на спане и пнг на ем делать метод 'crop'.не срабатывает ховер.

Я ставил на спан метод crop,а на ем метод 'none'

Если ничего не забыл - все будет как положенно.

Спасибо дружище, щас к сожалению проверить не могу, минимум через полоторы недели тока, поэтому если тебе не сложно, замути сам решение, залей куда нибудь и кинь ссылку позырить

[BassEast]

Спасибо дружище, щас к сожалению проверить не могу, минимум через полоторы недели тока, поэтому если тебе не сложно, замути сам решение, залей куда нибудь и кинь ссылку позырить

это где это ты psywalker полторы недели, без редактора?

[psywalker]

это где это ты psywalker полторы недели, без редактора?

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

[BassEast]

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

хорошенько отдохнуть вам!