Ergonomy optimization

Дек 03

Обнаружил сегодня на просторах сети способ заставить IE6 делать рабочими ссылки, которые находятся над фоновым PNG.

Посмотреть. Скачать.

Теперь буду использовать этот способ во всех проекта, где необходима PNG-графика. Однозначно!

Читать в Яндекс.Ленте или Google Reader.

Сен 30

Не всегда страничка должна иметь много контента (например страничка с сообщением об ошибке 404), а красивый подвал посреди экрана выглядит как-то неуместно. Надо бы его прижать :)

Логический алгоритм следующий:

  1. Высоту странички body выставляем в 100% (минимум);
  2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
  3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
  4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
  5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему pading-bottom:60px; Читать полностью »

    Читать в Яндекс.Ленте или Google Reader. \\ теги: ,

Сен 30

Обманывать не хорошо, так в детстве мама говорила, но иногда без этого никак... В web-верстке тоже самое - нужен хак, и заказчик требует валидность, а еще и в портфолио потом работу выкладывать. Вот и приходится хитрить, хотя, по сути, верстка страничка всё равно невалидна, просто обманутый валидатор этого не замечает (да и не хочет он это замечать). Как бы не вопили противники хаков, от этого никуда не уйти.

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

Читать в Яндекс.Ленте или Google Reader. \\ теги: , , , ,

июля 01

Когда то я верстал сайты и (не бейте меня) даже не знал что такое валидация :). Да-да, именно не знал. Вернее я знал что она существует, знал что это круто, так как часто встречал это слово в сети, но что это такое я не знал. Так было до поры до времени, пока я не стал заниматься фрилансом. Вот там-то один из заказчиков и "ткнул меня носом"в баги, дав ссылку на результат обработки странички валидатором. Ошибок было немного, я быстро все поправил, но это задело меня, я стал разбираться в этой теме и много чего узнал такого, из-за чего мне стало немного стыдно за прежние работы.

С тех пор прошло много времени, накопилось немало опыта, и W3C стандарты стали для меня скорее законом нежели стандартами. ОЧЕНЬ редко я позволяю себе преступить этот закон, только при верстке самых экстремальных макетов. Бывает - наизнанку вывернешься, но сверстаешь "по правилам".

Недавно мне поступил заказ на верстку веб-странички. Вроде все как обычно: постояный заказчик, краткое ТЗ, приятный дизайн:

Но вот размеры макета оказались не совсем стандартны: Читать полностью »

Читать в Яндекс.Ленте или Google Reader. \\ теги: , , , ,

мая 27

Многие из нас уже настолько привыкли к чтению с монитора компьютера, что бумажные носители (книги в основном) уже воспринимаются как нечто устаревшее, неактуальное. Конечно, ведь в книге нельзя изменить размер шрифта, цвет фона, скопировать кусок текста одним движением мышки. И даже реклама там не мелькает. Но все же, согласитесь, приятно иногда подержать хорошую книгу в руках.

Читать полностью »

Читать в Яндекс.Ленте или Google Reader. \\ теги: ,

мая 25

Всем известно, что каждая картинка, прикрепленная к страничке (неважно, в html или css) – это обращение к серверу, на котором расположена эта страничка. Поэтому я в последнее время стараюсь сократить общее количество картинок, по возможности скомпоновав их.

Читать полностью »

Читать в Яндекс.Ленте или Google Reader. \\ теги: , , ,

мая 14

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

Читать полностью »

Читать в Яндекс.Ленте или Google Reader. \\ теги: ,

мая 13

У меня очень часто спрашивают - как сделать картинки формата PNG прозрачными в браузере Internet Explorer. Тема заезженная и не раз обсуждаемая. Но, судя по количеству спрашивающих, вопрос всё еще актуален.

Для решения этой проблемы я использую два способа. Один для прозрачности фоновой графики, другой для картинок img.

Читать полностью »

Читать в Яндекс.Ленте или Google Reader. \\ теги: , ,

мая 12

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

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

Читать полностью »

Читать в Яндекс.Ленте или Google Reader.