Помогите разобраться в чем проблема с PerfectPixel

[Super_Saimon]

Добрый день! Воюю с позиционированием по центру экрана, вернее, блока wrapper-a. Решал задачу через свойство "position". Задал wrapper-y relative, а дочернему блоку, который и нужно отцентрировать, само-собой, absolute.Задал отступы слева, сверху по 50% и margin -top, -left по отрицательной половине высоты  и ширины дочернего блока.  И тут возникает проблема-открыв шаблон и свою верстку в PerfectPixel увидел несоответствие по отступам сверху и слева. А ширина и высота самих блоков целиком совпадают. Отступы у родительских блоков(внешние и внутренние) у меня убраны. И попытка поиграться со значениями успеха не дает. 

[DevChristmas]

2 часа назад, Super_Saimon сказал:

Добрый день! Воюю с позиционированием по центру экрана, вернее, блока wrapper-a. Решал задачу через свойство "position". Задал wrapper-y relative, а дочернему блоку, который и нужно отцентрировать, само-собой, absolute.Задал отступы слева, сверху по 50% и margin -top, -left по отрицательной половине высоты  и ширины дочернего блока.  И тут возникает проблема-открыв шаблон и свою верстку в PerfectPixel увидел несоответствие по отступам сверху и слева. А ширина и высота самих блоков целиком совпадают. Отступы у родительских блоков(внешние и внутренние) у меня убраны. И попытка поиграться со значениями успеха не дает. 

Вместо абсолютного позиционирования лучше использовать FlexBox : 
 

//Задать ширину wrapper далее 
body{
  disply:flex;
  align-items:center;
  justify-content:center;
}

 

[Svetlana_P]

Похоже, вы перепутали отступ сверху и отступ слева между собой. Если ширина блока 300, то margin-left должен быть -150, разве нет? А сейчас 115. То же самое с верхним отступом.

[DevChristmas]

5 минут назад, DevChristmas сказал:

Вместо абсолютного позиционирования лучше использовать FlexBox : 
 

// ТАК
body{
  disply:flex;
  align-items:center;
  justify-content:center;
}

//ИЛИ ТАК
body{display:flex;}
.wrwapper{width:300px;margin:auto;}

 

 

[Super_Saimon]

 

1 час назад, Svetlana_P сказал:

Похоже, вы перепутали отступ сверху и отступ слева между собой. Если ширина блока 300, то margin-left должен быть -150, разве нет? А сейчас 115. То же самое с верхним отступом.

Та нет, это я скрин некорректный сделал. На этом скрине я уже просто игрался, пытался угадать marginom. А так имея width: 300px;
    height: 230px;  я задавал margin-left: -150px; margin-top: -115px; С шириной совпало, но вот с высотой все равно мой блок ниже. Я уже угадывать задолбался. Прекрасно понимаю что это выход-наугад числа ставить, но чет в тупик ситуация загнала меня. 

1 час назад, DevChristmas сказал:

 

Да я сразу хотел с flexa начать-там весь этот геморрой сразу отпадает. Но в задании про flex не упоминалось и я решил не "жульничать". Да и сначала  казалось плевым делом... 

Все таки угадал: margin-top: -125px на высоту самого блока в 230px. Но так и не понял с чем это  связано. Это, судя по теории, не корректный отступ сверху. При этом, опять же повторюсь, какие-либо "левые" отступы внешние, внутренние у body, html, wrapper убраны.  Я так и не понял в чем промах. 

[Svetlana_P]

37 минут назад, Super_Saimon сказал:

Все таки угадал: margin-top: -125px на высоту самого блока в 230px. Но так и не понял с чем это  связано. Это, судя по теории, не корректный отступ сверху. При этом, опять же повторюсь, какие-либо "левые" отступы внешние, внутренние у body, html, wrapper убраны.  Я так и не понял в чем промах. 

Прикрепите ваш код (полностью страницу) и макет-задание. С этого стоило начинать

[Super_Saimon]

Сразу извиняюсь за непонятные названия-это я пробовал по БЭМ-у.

[DevChristmas]

5 часов назад, Super_Saimon сказал:

Добрый день! Воюю с позиционированием по центру экрана, вернее, блока wrapper-a. Решал задачу через свойство "position". Задал wrapper-y relative, а дочернему блоку, который и нужно отцентрировать, само-собой, absolute.Задал отступы слева, сверху по 50% и margin -top, -left по отрицательной половине высоты  и ширины дочернего блока.  И тут возникает проблема-открыв шаблон и свою верстку в PerfectPixel увидел несоответствие по отступам сверху и слева. А ширина и высота самих блоков целиком совпадают. Отступы у родительских блоков(внешние и внутренние) у меня убраны. И попытка поиграться со значениями успеха не дает. 

И еще можно для удобства вместо отрицательных margin делать так : 

.wrapper{
 top:calc( 50% - 115px );
}

 

[Super_Saimon]

Я в упор не пойму почему по вертикали нет выравнивания.  Я пробовал transform: traclate(50%,50%) вместо отрицательных внешних отступов, а результат с вертикальным выравниванием все равно не тот- мой блок на десяток пикселей ниже макетного. Как такое может быть?

[Super_Saimon]

Извиняюсь за надоедливость с элементарными вопросами, но пару нюансов касательно самого процесса верстки непонятны. 

Выравнивание с угадыванием(расчетом по пикселям, к примеру) позиционирования элементов на странице. Я имею ввиду как в моем примере - для совпадения макета и верстки я перебираю чуть-ли не попиксельно. Такое бывает в реальной верстке? Или у людей с "прямыми руками" таких ситуаций не возникает?  

И касательно самого приложения PixelPerfect: возможно ли что при использовании как экземпляра для сравнения в приложении не шаблона,а изображения с форматом jpeg, то размеры могут не совпадать на картинке с теми, что есть в шаблоне? Просто  я со всеми отступами просто угадывал. Все замеры из шаблона не совпали. И это не из разряда-на пару пикселей.  Пользоваться в фотошопе  инструментом "прямоугольная область" затруднений не вызывало))) 

Edited September 25, 2017 by Super_Saimon

[Tilonorrinco]

Super_Saimon,

1. В разметке выше -- очень плохой БЭМ. БЭМ-дерево -- двухуровневое: не бывает элементов у элементов (block__elem1__elem2 -- так писать нельзя). span и a в коде также являются элементами, а значит их класс должен содержать имя блока (если здесь, конечно, не используется миксование).

2. Может быть, проблема в том, что в Хроме по-умолчанию тэгу body прописан margin: 8px. Вы действительно обнулили все стили? В приведенном выше коде margin у body не обнулен

3. Простой способ вертикальной и горизонтальной центровки абсолютно позиционированного элемента с жестко заданной высотой и шириной. 

Цитата

Выравнивание с угадыванием(расчетом по пикселям, к примеру) позиционирования элементов на странице. Я имею ввиду как в моем примере - для совпадения макета и верстки я перебираю чуть-ли не попиксельно. Такое бывает в реальной верстке? Или у людей с "прямыми руками" таких ситуаций не возникает?  

Мне сложно говорить про реальную верстку, но я всегда подгоняю макет попиксельно, в т.ч. резиновые макеты. Полного соответствия добиться очень сложно из-за различий в рендеринге шрифтов различными браузерами, но этого и не нужно. Мне кажется, расхождения на 3-5 пикселей достаточно.

Цитата

И касательно самого приложения PixelPerfect: возможно ли что при использовании как экземпляра для сравнения в приложении не шаблона,а изображения с форматом jpeg, то размеры могут не совпадать на картинке с теми, что есть в шаблоне? Просто  я со всеми отступами просто угадывал. Все замеры из шаблона не совпали. И это не из разряда-на пару пикселей.  Пользоваться в фотошопе  инструментом "прямоугольная область" затруднений не вызывало)))

Если эти различия -- по-вертикали, то, скорее всего, неправильно расчитываются отступы (не учитывается высота строки). 

Если различия -- по-горизонтали, то, вероятнее всего, дело в рендеринге шрифтов (текст получается чуть шире/уже). 

Нет ничего плохого в том, чтобы сначала сделать на глазок (без сложных подсчетов, достаточно инструмента "прямоугольное выделение"), а потом подогнать под макет через pixel perfect.

Edited September 27, 2017 by Tilonorrinco

[Super_Saimon]

20 часов назад, Tilonorrinco сказал:

Super_Saimon,

1. В разметке выше -- очень плохой БЭМ. БЭМ-дерево -- двухуровневое: не бывает элементов у элементов (block__elem1__elem2 -- так писать нельзя). span и a в коде также являются элементами, а значит их класс должен содержать имя блока (если здесь, конечно, не используется миксование).

2. Может быть, проблема в том, что в Хроме по-умолчанию тэгу body прописан margin: 8px. Вы действительно обнулили все стили? В приведенном выше коде margin у body не обнулен

3. Простой способ вертикальной и горизонтальной центровки абсолютно позиционированного элемента с жестко заданной высотой и шириной. 

Мне сложно говорить про реальную верстку, но я всегда подгоняю макет попиксельно, в т.ч. резиновые макеты. Полного соответствия добиться очень сложно из-за различий в рендеринге шрифтов различными браузерами, но этого и не нужно. Мне кажется, расхождения на 3-5 пикселей достаточно.

Если эти различия -- по-вертикали, то, скорее всего, неправильно расчитываются отступы (не учитывается высота строки). 

Если различия -- по-горизонтали, то, вероятнее всего, дело в рендеринге шрифтов (текст получается чуть шире/уже). 

Нет ничего плохого в том, чтобы сначала сделать на глазок (без сложных подсчетов, достаточно инструмента "прямоугольное выделение"), а потом подогнать под макет через pixel perfect.

Огромное спасибо за ответы! Очень признателен.

[Димитрий]

- для чего height указывать, их вроде не нужно указывать или я что-то не знаю ?

нормалайз не убирает отступы по дефолту. Я думаю проблема где-то там.