макет формы

[Lemming]

Доверстал наконец то пару страничек макета формы из недавнего конкурса..

Интересны косяки, которые вы найдете, надеюсь смогу решить их, и, конечно же, жду ваших советов по улучшению верстки, т.к. это мой второй макет, а в JS я вообще практически ноль

Парочку косяков уже нашел - в FF крестики удаления не отображаются, в IE8 required не срабатывает

смотреть

[Arinden]

Здравствуйте. Я тут недавно, что за конкурс и про что вы пишите - первый раз слышу, но вот открыл пощёлкать, хотел поделиться с вами. Прошу не принимать близко к сердцу если пишу бред, я не то лицо, к чьей критике следует прислушиваться и не тот, на знания которого можно положиться, так как сам новичок - новичком. Но всё же:

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

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

Если я добавляю альтернативное название, поле появляется, а вот знак + не исчезает и не меняется на -, что было бы на мой взгляд логично.

Кнопку Дальше, я бы заменил на Далее.

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

При добавлении ингредиентов, могу их добавить только из подсписка, скажем Джин 1, а вот выбрать Ликер или Текила не получится. Тоже самое и с украшениями.

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

Если добавить много ингредиентов, то отступ от общего бэкграунда сверху сохраняется, а вот снизу сводится на нет.

Кнопка дальше на втором шаге просто не работает.

В целом выглядит интересно.

Edited October 17, 2011 by Arinden

[Lemming]

Arinden

Вот конкурс - ссылка

Про описание - уведомление как раз по заданию должно быть справа, но я не знаю как так сделать, поэтому просто оставил required, который каждый браузер отображает снизу нужного поля. Но постараюсь сделать как надо.

Ресайз поля, это наверное в FF? Вот тоже незнаю как с этим справится

Про добавление альтернативного названия и кнопку "+" - это в соответствии с ТЗ/макетом, как и кнопка "Дальше".

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

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

Поиск не должен работать в соответствии с ТЗ/макетом, думаю это задача программиста, а не верстальщика.

Про отступ снизу - спасибо, исправлю.

Кнопка дальше на втором шаге - она не работает только потому, что две страницы сделал из всего макета пока что

[riXander]

1. При наведении на кнопку "Дальше" имхо лучше сделать cursor: pointer

2. Открыл выпадающее меню "Добавить украшение". При щелчке мыши в любом другом месте меню должно исчезать.

А вообще работа проделана большая, круто

[Arinden]

Arinden

Вот конкурс - ссылка

Про описание - уведомление как раз по заданию должно быть справа, но я не знаю как так сделать, поэтому просто оставил required, который каждый браузер отображает снизу нужного поля. Но постараюсь сделать как надо.

Ресайз поля, это наверное в FF? Вот тоже незнаю как с этим справится

Про добавление альтернативного названия и кнопку "+" - это в соответствии с ТЗ/макетом, как и кнопка "Дальше".

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

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

Поиск не должен работать в соответствии с ТЗ/макетом, думаю это задача программиста, а не верстальщика.

Про отступ снизу - спасибо, исправлю.

Кнопка дальше на втором шаге - она не работает только потому, что две страницы сделал из всего макета пока что

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

Ресайз у меня доступен в хроме и сафари. (фф у меня нет). А в IE я вообще могу перейти на второй шаг не заполняя ни одного поля. Плюс в IE появляется скрол бар в описании, а инпут поля по дефолту пустые.

[Lemming]

1. При наведении на кнопку "Дальше" имхо лучше сделать cursor: pointer

2. Открыл выпадающее меню "Добавить украшение". При щелчке мыши в любом другом месте меню должно исчезать.

А вообще работа проделана большая, круто

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

UPD: Переделал некоторые косяки.. Незнаю только, как избавиться от вышеописанных багов IE, может кто-нибудь подсказать, как с ними справится?

[Lemming]

Вроде бы все доделал, отпишите пожалуйста, возникли ли у вас какие-либо косяки на этих двух страничках.

[Arinden]

После добавления поля для альтернативного названия, поле с названием коктейля не хочет очищаться, когда ставим в него курсор.

Если в описание написать несколько строк, чтобы появился скрол - скрол можно подвигать на пол сантиметра влево и вправо.

Если добавить альтернативное название, перейти на шаг два и вспомнить, что забыл что-то в описании и вернуться на шаг один, то альтернативного названия уже не будет, хотя если нажать на + оно появится заполненное.

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

Если выбрать бокал и крутануть влево или вправо, то бокал перестанет быть выбранным.

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

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

Edited October 26, 2011 by Arinden

[Lemming]

После добавления поля для альтернативного названия, поле с названием коктейля не хочет очищаться, когда ставим в него курсор.

Вот тут без понятия в чем проблема, в FF почему то скрипты некорректно работают

Если в описание написать несколько строк, чтобы появился скрол - скрол можно подвигать на пол сантиметра влево и вправо.

Точно, всегда забываю про это, исправил.

Если добавить альтернативное название, перейти на шаг два и вспомнить, что забыл что-то в описании и вернуться на шаг один, то альтернативного названия уже не будет, хотя если нажать на + оно появится заполненное.

Блин, это у меня тоже только в FF, незнаю как исправить

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

Вот этот баг у меня только в FF, наверное как то JS там по-другому работает..

Если выбрать бокал и крутануть влево или вправо, то бокал перестанет быть выбранным.

Потестил со всех браузеров, установленных у меня на компе, ни в одном не встретил такого бага. Интересно даже, отчего это у вас возникает.

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

Да что ж такое то, мозг плавится!) Чем больше что то пытаюсь сделать, тем больше багов и тем яснее осознаю, что почти ничего не знаю(

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

Сделал чуть компактнее

[Arinden]

Выберите бокал, прокрутите полный цикл, затем выберите бокал рядом от выбранного, крутаните раз в сторону и вернитесь назад. Бокал не выбран.

А для картинок сделайте так...

<img src="glass/dlya_belogo_vina.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" onclick="checkthis(this, 'userch')" width="102px" height="146px">

И добавляем:

window.onload = function (e) {
    var evt = e || window.event,
        imgs,
        i;
    if (evt.preventDefault) {
        imgs = document.getElementsByTagName('img');
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onmousedown = disableDragging;
        }
    }
};
function disableDragging(e) {
    e.preventDefault();
}

Edited October 27, 2011 by Arinden

[Lemming]

Arinden

Не помогло..( Устал уже с этой формой возиться(

Спасибо вам за помощь!

[Arinden]

Не за что. Я вам только проблемы на вашу голову выискивал)...

[Lemming]

Не за что. Я вам только проблемы на вашу голову выискивал)...

Вообще есть за что, эти проблемы по идее должны меня настроить на то, чтобы их решить.

Но только я не понимаю, почему бокал после вышеописааных действий вновь становится невыбранным

[fragilewelldone]

В Chrome под кнопкой черная полоса

http://screencast.com/t/hrTymKJv

или так и надо?