Ergonomy optimization

Сен 30

Прижимаем подвал (footer) к низу экрана

CSS Комментариев (3) »

Не всегда страничка должна иметь много контента (например страничка с сообщением об ошибке 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. \\ теги: ,

мая 25

Ускоряем закрузку странички

CSS 1 комментарий »

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

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

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

мая 14

Текст в несколько колонок

CSS Комментариев (3) »

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

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

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