Приятно было работать с этим проектом: из-за дизайна. В общем и целом ничего сложного: прозрачная тень под выпадающим меню да повсюду закругленные уголки. Немного поюзал jQuery.
Единственная особенность: разметка одна — вариантов дизайна два (летний и зимний).
А так верстка фиксированная по ширине и растянутая по высоте.
Выполнено в декабре 2008.
P.S. Макеты потеряны, ссылки убраны.
Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:
Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для �?Е)
button {padding: 2px 1px !important}
Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в �?нтернет Експлорере.
Поясню в чем дело. �?нтернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:
Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:
Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.
�? что же делать? Как привести в чувство этот загадочный �?Е? Читать далее
Есть у �?Е6 такая особенность: если какому-либо блоку задать ширину, то �?Е6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то �?Е6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).
Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:
margin: 0 auto.text-align: center