Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
phpk
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

Шрифт прыгает при масштабировании

20.03.2015, 15:20. Просмотров 1553. Ответов 7
Метки нет (Все метки)

Имеется надпись "Wedding Photography Shoot" в одну строку, но при масштабировании слово "Shoot" иногда съезжает вниз. Почему так происходит?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style>
        @font-face {
            font-family: 'HelveticaNeueItalic';
            src: url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.eot');
            src: url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.eot') format('embedded-opentype'),
            url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.woff2') format('woff2'),
            url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.woff') format('woff'),
            url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.ttf') format('truetype'),
            url('fonts/HelveticaNeueItalic/HelveticaNeueItalic.svg#HelveticaNeueItalic') format('svg');
        }
        html, body, ul {
            margin: 0;
            padding: 0;
            border: 0;
        }
 
        .feat {
            width: 273px;
            height: 94px;
            position: absolute;
            top: 234px;
            left: 0;
        }
       
        .feat p {
            font: 18px HelveticaNeueItalic;
            color: #4c4c4c;
            padding: 11px 22px 13px 18px;
            background: yellow;
        }
        aside {
            position: absolute;
            height: 974px;
            left: 0;
        }
 
    </style>
</head>
<body>
 
<aside>
    <div class="feat">
        <p>Wedding Photography Shoot</p>
    </div>
</aside>
 
</body>
</html>
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.03.2015, 15:20
Ответы с готовыми решениями:

Сайт съезжает при масштабировании и при изменении размера браузера
Здравствуйте. Делал задание одно, все получилось, но в конце, когда начал проверять, что будет если...

Смещение при масштабировании
Всем привет! При вёрстке столкнулся с такой проблемой-при масштабировании некоторые элементы...

Выравнивание по центру при масштабировании
Есть страница http://www.xn--80acehcbpdd3ahh5bza8d0h.xn--p1ai/divany/ При масштабировании нужно...

Скачет верстка при масштабировании
Вечер добрый! делаю сайт, на футбольную тематику... Не могли бы помочь, а лучше объяснить что...

При масштабировании всё смещается
#footer{ height: 18px; background-image: url(../images/4.png); repeat-x; /* margin-top: 3%; */...

7
phpk
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
20.03.2015, 15:36  [ТС] 2
Шрифт прыгает при масштабировании

вот картинка из макета psd, которую я хочу сверстать.
Я указал правый отступ для соблюдения точного размера.
Подскажите пожалуйста, возможно я не правильно верстаю из макета?
Как нужно правильно сверстать?
0
phpk
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
20.03.2015, 15:38  [ТС] 3
И что я неправильно делаю, научите пожалуйста
0
Taatshi
Администратор
11746 / 5101 / 257
Регистрация: 05.04.2011
Сообщений: 13,845
Записей в блоге: 2
25.03.2015, 00:48 4
phpk, не задавайте отступов слева и справа, используйте text-align:center; для родительского блока
1
25.03.2015, 00:48
phpk
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
25.03.2015, 10:05  [ТС] 5
Цитата Сообщение от Taatshi Посмотреть сообщение
phpk, не задавайте отступов слева и справа, используйте text-align:center; для родительского блока
а если в макете текст выровнен не точно по центру, а немного влево!? Как нужно правильно сделать?

Добавлено через 12 минут
И ещё хотел уточнить: важно ли соблюдать точность до 1-го пикселя при вёрстке из макета при фиксированной вёрстке?
Т.е. если это не очень влияет на расположение и вид элементов, то можно ли допустить (неспециально) неточность в 1-2 пикселя? Ну допустим падинг установлен для всех блоков одинаково, а где-то граница у одного блока больше чем у других!
0
Taatshi
Администратор
11746 / 5101 / 257
Регистрация: 05.04.2011
Сообщений: 13,845
Записей в блоге: 2
25.03.2015, 10:40 6
Если немного влево - задайте для p display:block; и margin-right на сколько там смещение нужно. Паддинги убрать, выравнивание по центру

По точности - надо смотреть конкретно. Все зависит от ситуации. Выкрутиться можно почти всегда - кроме отображения шрифтов пожалуй, особенно нестандартных. Тут уж каждый браузер под себя пляшет - не подгонишь.
1
phpk
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
25.03.2015, 10:55  [ТС] 7
Цитата Сообщение от Taatshi Посмотреть сообщение
Если немного влево - задайте для p display:block; и margin-right на сколько там смещение нужно. Паддинги убрать, выравнивание по центру
Немного хотел уточнить
Вы говорите выравнивание по центру, это значит задать для тега p - margin: 0 auto ? Тогда куда вставить margin-right? Ведь у него уже стоит auto по горизонтали!
0
Taatshi
Администратор
11746 / 5101 / 257
Регистрация: 05.04.2011
Сообщений: 13,845
Записей в блоге: 2
25.03.2015, 11:11 8
нет)

CSS
1
2
3
4
5
p {
display:block; /*маргин тут не нужен - блок по умолчанию вытягивается на всю ширину родительского блока*/
margin-right:15px;/*этот маргин сдвинет блок влево - что и требовалось*/
text-align:center; /*выравниваем текст в сдвинутом блочном p по центру */
}
1
25.03.2015, 11:11
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.03.2015, 11:11

Сдвиг меню при масштабировании
При изменении масштаба, последний 6-ой переходит на следующую строку. То есть размеры #head,...

Меню трансформируется при масштабировании
Создал простое меню.При увеличении масштаба меню меняет свою форму. Спасибо за помощь. &lt;html&gt;...

Сдвиг div при масштабировании
Имеется страничка, на которой есть картинка с полями ввода, на эти поля ввода надо подогнать input,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.