Index · Правила · Поиск· Группы · Регистрация · Личные сообщения· Вход

Список разделов Веб-строительство и интернет-проекты
 
 
 

Раздел: Веб-строительство и интернет-проекты Вопрос верстальщикам и просто знающим 

Создана: 06 Сентября 2011 Втр 1:29:38.
Раздел: "Веб-строительство и интернет-проекты"
Сообщений в теме: 6, просмотров: 2845

  1. 06 Сентября 2011 Втр 1:29:38
    Никогда не задумывался об отступах между элементами серьезно. Ну, конечно, margin от padding отличал, но вот недавно столкнулся с тем, что необходимо было перевести шаблон из PSD html\css с точностью до пикселя. "Раньше я делал как:" (с) Федор Лошадкин) - открываешь шаблон в фотошопе и выделяешь, к примеру, от верхней границы начертания символа (глифа) до нижней границы верхнего блока (каламбур, но см. рис.). На рисунке это зеленая линия (вроде по-умному это называется верхняя линия шрифта). Затем смотришь высоту выделения и вбиваешь ее в отступ. Браузеры же думают иначе (и логичнее), и любой текст обрамляется рамкой, откуда они и начинают высчитывать отступы (синия стрелка).
    В связи с этим вопрос - как с минимальными мучениями вычислять подобные отступы, ведь для каждого кегля такое расстояние (между красными стрелками) будет разным.
    Ну и напоследок вопрос - как в фотошопе сделать выделение текста цветом (как, например, в Ворде - выделяешь цветом и сразу понятно, где идет верхняя рамка. Так можно в принципе быстро вычислить отступ - выделил цветом и посчитал)

    Вот как-то так.
  2. Omi4Sem


    Частый гость


    Более 10 лет на форумеМуж.
    06 Сентября 2011 Втр 14:06:47
    Используют линейки, которые измеряют пиксели, их в интернете очень много.
    В фотошопе (если не ошибаюсь и правильно тебя понял), выделяешь слой с текстом(два раза кликаешь по нему) потом ctrl+a и будут видны рамки у текста. Есть ещё стили (css) которые задают границы отступа у текста(это можешь прочесть на сайте htmlbook).
  3. emitsun


    Частый гость


    Более 10 лет на форумеМуж.
    06 Сентября 2011 Втр 20:04:41
    Вспомни про line-height .
    Он устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.).
    Может поможет.
  4. 07 Сентября 2011 Срд 8:58:16
    emitsun писал : Вспомни про line-height .
    Он устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.).
    Может поможет.

    Про line-height помнил, но не совсем то.
    Про выделение текста это понятно. Только как сохранить это самое выделение после клика на другой области в фотошопе.

    Придется делать методом Подборского :)
  5. Omi4Sem


    Частый гость


    Более 10 лет на форумеМуж.
    07 Сентября 2011 Срд 11:01:39


    А рамка(border:1px solid #FFF) не катит ?)
    Поставил рамку, померил линейкой и всё тип-топ:)
    Только когда будешь позиционировать, не забудь про то что сама рамка ещё занимает 1 px!
  6. emitsun


    Частый гость


    Более 10 лет на форумеМуж.
    07 Сентября 2011 Срд 12:02:05
    Кстати, для ФФ есть отличный плагин MeasureIT - удобная линейка прямо в браузере.