При верстке сайта иногда сложно сразу оценить, на сколько нужно увеличить или уменьшить блок так, чтобы он занял нужную позицию. “Что там сложного? — скажете вы, — надо всего лишь просуммировать все отступы, размеры блоков и бордеров.”
Спасибо вам Гуру, за то, что вы читаете этот материал, но статья предназначена как раз для тех, кого напрягает всё это высчитывать. К тому же, кроме основных блоков, зачастую, необходимо точно расположить изображения, иконки или кнопки.
Поиск в интернете особой пользы не принес, а то, что находил, не облегчило решение этой задачи. Поэтому решил сделать линейку сам…
Итак, если вводная часть для вас показалась интересной, и вы хотите сократить свое время на верстку сайта, то эти 190 слов для вас:
Сразу отвечу на вопрос: “А как же система 960 Grid” — она хороша при построении структуры сайта, но к точному позиционированию элементов отношения не имеет.
Экспериментируя с линейкой, я понял, что слишком частый шаг мешает восприятию, а слишком большой — не эффективен. Остановился на шаге в 10 пикселей, а за счет деления пополам легко cчитается и 5-ти пиксельный отступ. Шкалы расставил так, чтобы они легко читались и не мешали восприятию макета в целом. Получился PNG-файл, где первая полоса из десяти пикселей прозрачная, следующая — полупрозрачная с меткой расстояния и так далее. Подключается линейка через background, а цветом подбирается нужный уровень восприятия.
Продолжая опыты над линейкой, стало понятно, что постоянно она не нужна, а подключать ее и отключать — это тоже потраченное впустую время. Пришел к выводу, что отобразить линейку в нужный момент проще всего через псевдокласс :hover. Т.е. чтобы подключить линейку, надо в таблице стилей выбрать нужные элементы и подключить к ним файл линейки. К примеру, это может быть так:
#header:hover,
#content:hover,
.sidebar:hover,
#footer:hover {
background: #808080 url(../images/ruler.png);
}
Когда структура макета выстроена, и все элементы заняли свои места, код линейки можно убрать или закомментировать.
Вот сам файл линейки: ruler.png и простой шаблон для теста.
Хотелось бы узнать ваше мнение по этому вопросу.