Как сверстать клавиатуру такую как на картинке (iPhone KeyBoard)?

[vvsh]

Здрасте, помогите плиз сверстать такую клавиатуру как на картинке, как сделать тени такие, поместить такие значки shift и backspace?

заранее спасибо

Edited June 8, 2010 by vvsh

[klierik]

обязательно верстать? а <map> <area> непокатит?

есси нет, то разве что PNG тут поможет:

- основа (градиент)

- кнопка (квадрат с тенью + сверху буква)

- шифт и прочее так же попросту кнопки

довольно таки просто

[vvsh]

а средствами css нельзя кнопочку такую сделать?

[DjTarik]

Кроссброузерно - нет...

[vvsh]

блин так кнопка тоже с градиентом

[psywalker]

Здрасте, помогите плиз сверстать такую клавиатуру как на картинке, как сделать тени такие, поместить такие значки shift и backspace?

заранее спасибо

Делаешь див, в нём списки четыре ряда UL LI, далее всё настраиваешь как надо, тёмно серым ячейкам нужные классы и фон да и всё.

Вот такую хрень я вообще сделал на таблицах http://psywalker.ru/Forum/JS/Primitive/cal.../calculat2.html

[d0ublezer0]

Вот такую хрень я вообще сделал на таблицах http://psywalker.ru/Forum/JS/Primitive/cal.../calculat2.html

Не оответствует гайдлайнам Apple

Edited June 9, 2010 by d0ublezer0

[klierik]

Вот такую хрень я вообще сделал на таблицах http://psywalker.ru/Forum/JS/Primitive/cal.../calculat2.html

неработает бекспейс кнопочка

[psywalker]

неработает бекспейс кнопочка

Всё отлично работает, если пользоваться правильно

[klierik]

12+12=

потом бекспейс - не работает

[psywalker]

12+12=

потом бекспейс - не работает

Всё верно, это сделано специально, потому что ответ не должен быть урезан.

[s0rr0w]

А в чем трудности с таким дизайном?

Главное сделать следующее:

1. Исследовать, отличаются ли по цвету градиент верхней кнопки от нижней. Если отличаются, то сделать все виды кнопок в одном файле.

2. Распологать все кнопки абсолютно отпозиционированно, с заданной шириной и высотой

3. Padding кнопки выставить минимальным, чтобы по вертикали и по горизонтали он был примерно одинаковым.

4. Текст внутри кнопки центрировать относительно блока кнопки

5. Картинки для конопок положить в виде фона для того же span'a

[sigma77]

12+12=

потом бекспейс - не работает

Он и не должен работать. Посмотри в любом калькуляторе., в том же виндусовском.

Edited June 9, 2010 by sigma77

[psywalker]

Он и не должен работать. Посмотри в любом калькуляторе., в том же виндусовском.

Вот я о том же и говорю.

[klierik]

о! точно )))

бывает