Факультет — новая литература нового поколения

Давно длится проект (с марта месяца 2009 года), для которого сверстал общий макет и несколько внутренних страниц. Особенностями проекта по верстке я бы назвал обилие закругленных уголков на различных, местами неоднородных, фонах. Макет тянущийся с прижатым к низу страницы футером. Да, чуть не забыл, ко всему прочему здесь еще и «кастомные контролы» присутствуют. Как ни убеждай дизанеров, что «кастомные контролы» — это зло, а клиент всегда прав.

макет главной страницы
макет главной страницы

типовая страница
типовая страница

личный кабинет
личный кабинет

книжная полка пользователя
книжная полка пользователя

Коротко о давнем

Упомяну несколько сайтов, которые можно отнести к категории «дела давно минувших дней».
Когда меня только взяли на нынешнее место работы, а это славная компания TRINET, мой опыт насчитывал 5 месяцев (1 месяц в компании ЛОЗА и 4 в широко известном ПРОДВИЖЕНИЕ). Но сразу мне досталось верстать сайт самой компании TRINET. Вот, так сказать, с корабля — на бал и началась моя первая серьезная работа в вебе. Почти сразу за этим последовали сайты larga.ru, tk-pik.ru, oslo.ru, marinsurance.ru, tkspb.ru. Да, да, это все я. И это далеко не все, что мне пришлось делать в TRINET. Далеко не всем я доволен, многое сейчас я сделал бы по-другому, но так ведь нет предела совершенству. За что мне по меньшей мере не стыдно, а кое в чем даже нравится, как сделано, это уже упомянутый сайт страхового общества «Скандинавия» и сайт консультационной компании IT Expert (Произошел редизайн на обоих проектах. Вряд ли теперь найду старую верстку). На IT Expert мне единственно не нравится «пепельница» на главной странице. По дизайну подразумевалось, что пункты выпадающего меню будут более многословными, а потому сделаны нетянущимися и такими широкими. А за некоторые страницы я даже удостоился отдельной, хотя и безличной) похвалы.

Параллельно началось мое сотрудничество с замечательным дизайнером, с которым приятно работать, хотя не все его дизайнерские ходы мне нравятся с точки зрения удобства и легкости. Иногда объем картинок для оформления зашкаливает ;) В моем портфеле много работ, выполненных по его заказу, в частности по сайту и справочной карте Геоинформационной Системы инвестора Санкт-Петербурга.

Агенство праздников Исполнители желаний

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

masterwish.ru

Апрель 2008

Есть у ИЕ6 такая особенность: если какому-либо блоку задать ширину, то ИЕ6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то ИЕ6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

Читать далее

Я бы сделал лучше-2

Забавно, что поводы для написательства мне дает студия Лебедева: выходом в свет нового сайта, или же, как в это раз, новым рецептом в Техногрете.

Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.

Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что же, хороший способ применения нечасто используемого свойства inline-block. Но…

Так это выглядит в браузере:
демонстрация выравнивания блоков с картинками по центру

Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.

Читать далее Я бы сделал лучше-2

Я бы сделал лучше

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Съешь еще этих мягких французских булок

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

Съешь еще этих мягких французских булок

И наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Съешь еще этих мягких французских булок

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для IЕ8, но понимает это свойство и без него.

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title