И снова колонки одинаковой высоты

Необычное, даже, наверное, странное решение извечной проблемы нескольких div'ов  одинаковой высоты без таблиц. Не особо кроссбраузерное (к сожалению, только IE8+), тем не менее, во многих случаях очень полезное.

Колонки на самом деле получаются разной высоты, но при помощи отрицательного margin-bottom и блока-обертки с overflow: hidden; это искусно скрывается и создается впечатление, что они одинаковой высоты.

scrollTwo — jQuery-плагин для плавной прокрутки

На основе решения для плавной прокрутки соорудился маленький jquery-плагинчик, код которого вот:

// Непосредственно сам плагин
(function($){
      $.fn.scrollTwo = function(speed) {
        return $(this).on("click",function(){
         var top_offset = $($(this).attr("href")).offset().top;
         $('html,body').animate({scrollTop: top_offset}, speed || 500);  
         return false;       
        });
      };
})(jQuery);

// Применение
$(".scrolltwo").scrollTwo(200);

Может принимать параметр speed — это скорость прокрутки в миллисекундах. Значение параметра по умолчанию: 500 мс. Умеет прокручивать только по нажатию на якорь, то есть отрабатывает только, если внутристраничная ссылка указывает на id какого-либо элемента на странице.

А вот  плагинчик в работе:

Решение для плавной прокрутки при нажатии на ссылке

Небольшой jquery-снипет, реализующий плавную прокрутку при нажатии на якорь  <a href="#id">якорь</a> к элементу указанному в атрибуте якоря. В общем уплавнение стандартного внутристраничного якоря.

Интересные CSS решения

Собралось тут немного интересных решений различных ситуаций на css и не только.

Размещение нескольких блоков по ширине контейнера. Может пригодиться, например, для горизонтального меню или еще чего-то подобного

Стандартное прибивание футера к низу страницы.

Простенький jquery-плагинчик для табов с примером разметки и стилей:

Плавающие блоки разной высоты, например, для списка товаров в интернет-магазине:

Вертикальное выравнивание блока или блок по центру страницы (ie6+):

Очень классное решение стилизации флажков (checkbox) и радиокнопок (radio) без javascript.

Но к сожалению основан на использовании псевдоклассов из css3-спецификации, поэтому не работает в старых браузерах.

И замечательный пример использования псевдокласса :checked для изменения содержимого тега label на лету без javascript

Хостинг сайта на собственном компьютере с помощью Dropbox

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

Для этого нужно создать в Dropboxe в папочке Public (только в этой папке можно скопировать Public Link) любую папку например с названием вашего сайта. Или с именем "dropbox" (это я что бы запутать вас слегка, а то уже слишком все просто).
И скопировать в нее все файлы вашего сайта.

А затем нажимаем на главном файле вашего сайта (index.html) правой мышкой и выбираем Dropbox >> Copy Public Link

Все! Теперь смело можно открывать аську, скайп или что там еще и нажимать заветную комбинацию клавиш CTRL+V , чтобы вставить только что полученную ссылку в окно чата и разослать ее всем-всем-всем.

Вот кстати моя: http://dl.dropbox.com/u/8262960/dropbox/index.html

Ссылка конечно не очень красивая, но ее во-первых можно сократить в какой-нибудь сокращалке ссылок, а во-вторых, ну не фэйсбук же мы хостить собрались на домашнем компе. Правильно?

Набор веб-разработчика "5 плюсов". FF + FB + XR + N++ (Zc)

Или "Web-dev Kit FivePlus with Zen-coding" (Набор веб-разработчика "Пять плюсов")
Очень удобная связка программ для верстальщика веб-сайтов (веб-мастера): FireFox, Notepad++ (Zen Coding include), FireBug, XRefrsher.
В этой статье пойдет речь о том как собрать и настроить эту связку для удобной работы.







Как и следует из второй "иллюстрации" редактирование кода в Notepad++ будет "налету" отображаться в Firefox.

То есть не нужно будет постоянно прыгать туда-сюда для обновления страницы и редактирования кода.
Понадобится нам для этого вот что: FireFox, Notepad++, FireBug, XRefrsher, Zen Coding.  
Установка ФФ, я думаю, не должна вызвать особых вопросов.  
FireBug качаем по ссылке и устанавливаем как плагин к фаерфоксу, тоже ничего сложного. И уберем из виду "Панель меню" (Меню Вид > Панели Инструментов > [-] Панель меню). Вызвать ее в дальнейшем можно будет по нажатию "Alt".

Notepad++ аналогично скачиваем с официального сайта, устанавливаем и настраиваем под свои нужды. Настоятельно рекомендую установить плагин Zen Coding для Notepad++ разработанный известнейшими веб-разработчиками нашей необъятной: Сергеем Чикуенком, Вадимом Макеевым и Александром Макаровым. Только устанавливайте тот, что можно найти с помощью Plugin Manager из самого N++.
Делает этот плагин приблизительно следующее:

То есть значительно упрощает жизнь верстальщика. И на изображении показана лишь единственная функция, которой хорош плагин. Подробнее обо всех его свойствах и достоинствах ищите в интернетах, обязательно находите, изучайте — и жить станет легче. Разделение вкладок в N++ делается кликом "правой мышки" на вкладке и выбором пункта меню "В другое окно", подробнее об этом уже написано ранее. Также давайте уберем лишние панели: панель инструментов и панель меню, которую чуть-что можно вызвать по нажатию "Alt", в N++, поставив соответствующие галочки в "Опции > Настройки > Общие".

А теперь установим программу которая и свяжет всю скачено-установлено-настроенную ерунду воедино. Называется она XRefresh. Качать необходимо как плагин для Firefox так и XRefresh Window Monitor для Windows. Именно эта программа будет проверять наличие изменений в наших source-файлах и при их наличии обновлять страницу автоматически в фоне через аддон в браузере. Установка плагина к браузеру не должна вызвать затруднений. Разберемся только с его активизацией. После установки плагина и перезагрузки лисы необходимо открыть FireBug, перейти на вновь образовавшуюся вкладку XRefresh и включить панель используя ссылку.

Далее устанавливаем XRefresh Window Monitor для Windows и назначаем в настройках папку проекта (достаточно указать папку всего проекта, либо в которой лежат изменяемые .css и .html файлы).

Теперь осталось подогнать высоты Файерфокса Файербага и Ноутпада++ для комфортной работы. Я бы рекомендовал подогнать высоту Firebug равной высоте Notepad++, а само окно Firefox развернуть. По счастливому стечению обстоятельств у меня при нахождении Ноутпада++ в фокусе и при наведении мыши (без передачи фокуса) на Фаерфокс в Фаерфоксе работает скролл (прокрутка страницы), но за это на всех компьютерах не ручаюсь, возможно дело в дровах для тачпада.

Это был #web-dev.kit +*5 with zen-coding
Спасибо.

Редактор HTML/CSS Удобная фича notepad++

Оказывается в самом лучшем html-css-редакоре Notepad++ можно очень удобно разместить окна редактируемых в данный момент HTML и CSS файлов.

  

Делается это очень просто. Открываются два файла, правой мышкой кликается по вкладке одного из файлов и выбирается пункт "В другое окно". Получается очень удобно и функционально. Переключение между окнами как и прежде осуществляется по CTRL + TAB.