Сделать валидную вёрстку 2 страниц: O9.5, IE6, FF3

Денис15 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
24.05.2012

Здравствуйте, коллеги!

Есть ИНТЕРЕСНАЯ ЗАДАЧА — сделать валидную верстку (HTML + CSS, без JS) с корректным отображение в следующих браузерах:

- Opera 9.5

- IE 6

- FireFox 3.

2 страницы — заглавная и второстепенная (совсем простая).

Для ознакомления, в приложении — JPEG-макеты с комментариями по требованиям к верстке.

Отдельно ДОБАВЛЮ по главной:

1. Кнопки прокрутки «вправо» и «влево» в панели с закладками должны быть «прозрачными» PNG, чтобы мы могли их в любой момент легко убрать через CSS.

И расположены в одном одном файле. Пример верстки похожих стрелок:

http://2012.russianinternetweek.ru/

http://2012.russianinternetweek.ru/bitrix/templates/riw2012/css/theme/bg_direction_nav.png

2. Эти кнопки, ярлыки закладок и нижние 2 кнопки («Задать вопрос» и «Оставить отзыв») имеют «подсвеченное» состояние, которое они примут при наведении мышки.

Это будет сделано через JavaScript, плавным появлением одного и исчезанием второго.

Это значит, они не должны друг друга «вытеснять», если у обоих будет display: block.

3. Ярлыки закладок, боковые кнопки со стрелками и эти нижние 2 кнопки должны быть расположены соответственно в 3 файлах.

В каждом из файле — все возможные состояния кнопки.

Я отметил, что закладки "резиновые" по горизонтали. Их лучше сделать так, как на сайте Apple - изначально максимально широкую (220px в нашем конкретном случае) нарисовать во всех состояних. PNG это хорошо сожмет:

http://images.apple.com/global/nav/images/globalnav.png

Тут кроме скорости есть ещё один момент. Доработать дизайн проще, если однотипные элементы в одном файле.

http://images.apple.com/global/nav/images/globalnav_text.svg - здесь у них, чтобы не копировать каждую вкладку и сохранить шрифт - текст в отдельный спрайт вынесен. И это довольно просто и эффективно реализовано. Отличное решение. Нам оно подходит для закладок.

ОТ ВАС:

1. 2 примера Ваших самых свежих работ по вёрстке.

2. Цена.

3. Сроки.

Заявки фрилансеров