Как верстать макеты с точностью до пикселя? -

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

Когда я сам начинал учить html-вёрстку, я придумал примитивнейшее решение, которым пользуюсь до сих пор.

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

Для этого в коде страницы мы прописываем следующий css-код:

<style type="text/css">
body {
background: url(/maket.jpg) no-repeat /*не повторяем бэкграунд*/ 50% 0 /*размещаем по центру если нужно*/
}
</style>

В корне сайта размещаем верстаемый макет в формате jpg. Теперь при вёрстке можно позиционировать все элементы с максимальной точностью.

Теги: css tricks вёрстка