Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
5 / 5 / 3
Регистрация: 20.01.2012
Сообщений: 218
1

Шрифты на резиновом шаблоне

06.03.2017, 00:03. Показов 2110. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Добрый вечер.
Верстаю резиновый шаблон и возникли неожиданные трудности с шрифтами. А именно, то что все уезжает из-за размером шрифтом при уменьшении экрана.
Вот сам макет -
Шрифты на резиновом шаблоне



Может можно как-то сделать так, чтобы шрифты уменьшались с размером экрана? Хотя бы чтобы до 1024px все было резиновое, дальше адаптивом сделаю.

Шрифты на резиновом шаблоне


Шрифты на резиновом шаблоне
0
Лучшие ответы (1)
Сообщение: #10183134
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 06.03.2017, 00:03
Ответы с готовыми решениями:

Шрифты в шаблоне флеш
Здраствуйте, Вы немоголи бы уделить мне время и помочь внедрить шрифты русского языка в мной...

Нужно заменить шрифты на шрифты которые поддерживают кириллицу
Есть swf файл который прошел обфускацию (декомпиляция, и новая сборка - не поможет) в нем нужно...

Автопозицианирование объектов в резиновом контейнере
Сабж, интересует как реализовать сие? Допустим в див элементе у меня есть еще 3 див блока, как их...

Есть Ехсеl файл со строками почти 2000 и написано старыми шрифтами. Нам нужно заменить все эти шрифты на новые шрифты.
Есть Ехсеl файл со строками почти 2000 и написано старыми шрифтами. Нам нужно заменить все эти...

9
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
06.03.2017, 00:26 2
пример кода где все сьезжает ?
0
5 / 5 / 3
Регистрация: 20.01.2012
Сообщений: 218
06.03.2017, 00:34  [ТС] 3
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Объекты</a></li>
                <li><a href="#">Наши работы</a></li>
                <li><a href="#">Монтаж</a></li>
                <li><a href="#">Металоконструкции</a></li>
                <li><a href="#">Статьи</a></li>
                <li><a href="#">Расчёт стоимости</a></li>
                <li><a href="#">Оплата и доставка</a></li>
                <li><a href="#">Отзывы</a></li>
            </ul>
        </div>
 
        <div class="contacts">
            <div class="phone">
                +7 (928) 412-00-09
            </div>
            <div class="mail">
                stroyproekt.11@mail.ru
            </div>
        </div>
 
        <div class="logo">
            <a href="#"><img src="images/logo.png" alt="logo" /></a>
            <p>ГК  МегаСтройПроект</p>
        </div>
 
        <p class="slogan1">
            МЕТАЛЛОКОНСТРУКЦИИ ЛЮБОЙ СЛОЖНОСТИ
            ОТ 1700 р за м2
        </p>
        <p class="slogan2">строительство холодильных складов
            поставка холодильного оборудования</p>
 
        <a class="calculate_btn" href="#">Расчет вашего проекта</a>
        <div class="company-info">
            <div class="info">
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block spaces">
                    <p class="number-info">
                        14
                    </p>
                    <p class="text-info ">
                        <span>000</span>м2
                        ПРОИЗВОДСТВЕННЫХ
                        ПЛОЩАДЕЙ<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
            </div>
        </div>
    </header>
</body>
</html>
CSS
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

@import "reset.css";
 
 
html {
    font-family: 'Roboto Condensed', sans-serif;
}
 
.header {
    height: 1222px;
    background: url("../images/header_bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
}
 
    .header .menu {
        height: 72px;
        line-height: 72px;
        background-color: rgba(0, 0, 0, 0.3);
    }
 
        .header .menu ul {
            margin-left: 29px;
        }
 
        .header .menu li {
            float: left;
            font-weight: 300;
            text-transform: uppercase;
            font-size: 27px;
            margin-left: 30px;
        }
 
 
            .header .menu li a {
                color: #fff;
                text-decoration: none;
            }
 
            .header .menu li a:hover {
                text-decoration: underline;
            }
 
    .header .contacts {
        position: absolute;
        right: 42px;
        top: 110px;
        font-size: 33px;
        color: #fff;
    }
 
        .header .contacts .phone {
            height: 33px;
            line-height: 33px;
            background: url("../images/phone.png") left center no-repeat;
            padding-left: 45px;
            margin-bottom: 20px;
        }
 
        .header .contacts .mail {
            height: 25px;
            line-height: 25px;
            background: url("../images/mail.png") left center no-repeat;
            padding-left: 48px;
        }
 
    .header .logo {
        width: 370px;
        text-align: center;
        margin: 80px  auto;
    }
 
        .header .logo p {
            color: #fff;
            font-size: 41px;
            font-weight: 700;
            margin-top: 10px;
        }
 
    .header .slogan1 {
        width: 65%;
        color: #fff;
        margin-top: 90px;
        margin: auto;
        font-size: 62px;
        text-align: center;
    }
 
    .header .slogan2 {
        width: 40%;
        color: #fff;
        margin-top: 10px;
        margin: auto;
        text-align: center;
        font-size: 50px;
    }
 
    .header .calculate_btn {
        background-color: rgba(255,255,255,0.2);
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        width: 400px;
        border: 4px solid #fff;
        height: 70px;
        line-height: 70px;
        margin: auto;
        font-size: 33px;
        text-align: center;
        margin-top: 51px;
    }
 
    .header .company-info {
        position: absolute;
        width: 100%;
        height: 150px;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        font-weight: 700;
    }
 
        .header .company-info .info {
            width: 85%;
            margin: auto;
            vertical-align: text-top;
        }
 
            .header .company-info .info .info-block {
                width: 290px;
                display: inline-block;
                opacity: 0.5;
 
            }
 
                .header .company-info .info .info-block .number-info {
                    float: left;
                    font-size: 122px;
                    margin-top: 15px;
                    margin-right: 10px;
                    box-sizing: border-box;
                }
 
                .header .company-info .info .info-block .text-info {
                    font-size: 24px;
                    margin-top: 28px;
                }
 
            .spaces {
                        width: 360px !important;
                    }
 
                    .header .company-info .info .info-block .text-info span {
                        font-size: 43px;
                    }
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
06.03.2017, 01:09 4
Лучший ответ Сообщение было отмечено Konark как решение

Решение

песочница: http://codepen.io/evgeniyprowe... itors=1100

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="menu">
            <ul class="clearfix">
                <li><a href="#">Главная</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Объекты</a></li>
                <li><a href="#">Наши работы</a></li>
                <li><a href="#">Монтаж</a></li>
                <li><a href="#">Металоконструкции</a></li>
                <li><a href="#">Статьи</a></li>
                <li><a href="#">Расчёт стоимости</a></li>
                <li><a href="#">Оплата и доставка</a></li>
                <li><a href="#">Отзывы</a></li>
            </ul>
        </div>
 
        <div class="contacts">
            <div class="phone">
                +7 (928) 412-00-09
            </div>
            <div class="mail">
                stroyproekt.11@mail.ru
            </div>
        </div>
 
        <div class="logo">
            <a href="#"><img src="images/logo.png" alt="logo" /></a>
            <p>ГК  МегаСтройПроект</p>
        </div>
 
        <p class="slogan1">
            МЕТАЛЛОКОНСТРУКЦИИ ЛЮБОЙ СЛОЖНОСТИ
            ОТ 1700 р за м2
        </p>
        <p class="slogan2">строительство холодильных складов
            поставка холодильного оборудования</p>
 
        <a class="calculate_btn" href="#">Расчет вашего проекта</a>
        <div class="company-info">
            <div class="info">
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block spaces">
                    <p class="number-info">
                        14
                    </p>
                    <p class="text-info ">
                        <span>000</span>м2
                        ПРОИЗВОДСТВЕННЫХ
                        ПЛОЩАДЕЙ<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
 
                <div class="info-block">
                    <p class="number-info">
                        13
                    </p>
                    <p class="text-info">
                        <span>000</span> тонн конструкций<br/>
                        в году
                    </p>
                </div>
            </div>
        </div>
    </header>
</body>
</html>
CSS
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

* {
    box-sizing: border-box;
}
 
html {
    font-family: 'Roboto Condensed', sans-serif;
}
 .clearfix:after {
     content: "";
     display: table;
     clear: both;
}
.header {
    height: 1222px;
    background: url("../images/header_bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
}
 
.header .menu {
    //height: 72px;
    //line-height: 72px;
    background-color: rgba(0, 0, 0, 0.3);
}
 
.header .menu ul {
    margin: 0 0 0 29px;
    padding: 10px 0 0;
}
 
.header .menu li {
    float: left;
    padding: 0 0 10px;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 27px;
    margin-left: 30px;
}
 
 
.header .menu li a {
    color: #fff;
    text-decoration: none;
}
 
.header .menu li a:hover {
    text-decoration: underline;
}
 
.header .contacts {
    position: absolute;
    right: 42px;
    top: 110px;
    font-size: 33px;
    color: #fff;
}
 
.header .contacts .phone {
    height: 33px;
    line-height: 33px;
    background: url("../images/phone.png") left center no-repeat;
    padding-left: 45px;
    margin-bottom: 20px;
}
 
.header .contacts .mail {
    height: 25px;
    line-height: 25px;
    background: url("../images/mail.png") left center no-repeat;
    padding-left: 48px;
}
 
.header .logo {
    width: 370px;
    text-align: center;
    margin: 80px  auto;
}
 
.header .logo p {
    color: #fff;
    font-size: 41px;
    font-weight: 700;
    margin-top: 10px;
}
 
.header .slogan1 {
    width: 65%;
    color: #fff;
    margin-top: 90px;
    margin: auto;
    font-size: 62px;
    text-align: center;
}
 
.header .slogan2 {
    width: 40%;
    color: #fff;
    margin-top: 10px;
    margin: auto;
    text-align: center;
    font-size: 50px;
}
 
.header .calculate_btn {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    width: 400px;
    border: 4px solid #fff;
    height: 70px;
    line-height: 70px;
    margin: auto;
    font-size: 33px;
    text-align: center;
    margin-top: 51px;
}
 
.header .company-info {
    position: absolute;
    width: 100%;
    height: 150px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 700;
}
 
.header .company-info .info {
    width: 85%;
    margin: auto;
    vertical-align: text-top;
}
 
.header .company-info .info .info-block {
    width: 290px;
    display: inline-block;
    opacity: 0.5;
 
}
 
.header .company-info .info .info-block .number-info {
    float: left;
    font-size: 122px;
    margin-top: 15px;
    margin-right: 10px;
    box-sizing: border-box;
}
 
.header .company-info .info .info-block .text-info {
    font-size: 24px;
    margin-top: 28px;
}
 
.spaces {
    width: 360px !important;
}
 
.header .company-info .info .info-block .text-info span {
    font-size: 43px;
}
Добавлено через 6 минут
контакты попробуйте через float: right, и добавьте в html к классу .contacts рядом .clearfix, это если с ними проблема будет, поскольку при их позиционировании проблема есть
1
5 / 5 / 3
Регистрация: 20.01.2012
Сообщений: 218
06.03.2017, 01:10  [ТС] 5
Разница только в .clearfix:after?
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
06.03.2017, 01:15 6
почти, поскольку float он выбивается из потока и нужно делать распорку, т.е. родитель не видит зафлоаченные элементы и схлопывается, и у вас указана фикс высота в меню 72px, элементы меню когда не помещаются - переносятся на новую строку, а поскольку высота шрифта суммарно больше 72px когда в два ряда, то оно вылазит из серого фона, лучше не задавать фикс высоту в этом случае ИМХО, а если интересует уменьшение букв при уменьшении окна браузера, то полистайте подобное этому http://stackoverflow.com/questions/40560293/font-size-calc-to-make-font-responsive-is-it-a-good-idea
0
5 / 5 / 3
Регистрация: 20.01.2012
Сообщений: 218
06.03.2017, 01:19  [ТС] 7
Про распорку понял, но не очистил потоки, потому что не увидел никаких проблем с потоками.

Но, меню просто как бы сдвигается вниз. А так чтобы оно всегда оставалось в одну строку, это нужно использовать тот способ который по ссылке, уменьшая шрифт?
Тем более с нижней информацией проблема не решилась
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
06.03.2017, 01:31 8
да, что то подобное как в ссылке, месяца 2 назад где то делали подобное, уже не помню что прописывалось, точно помню что calc() был, можно так еще чтобы не переносилось вместо float

CSS
1
2

ul {display:flex;}
li {flex: 1;}
Добавлено через 6 минут
CSS
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

* {
    box-sizing: border-box;
}
 
html {
    font-family: 'Roboto Condensed', sans-serif;
}
 
.clearfix:after {
     content: "";
     display: table;
     clear: both;
}
 
.header {
    height: 1222px;
    background: url("../images/header_bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
}
 
.header .menu {
    //height: 72px;
    //line-height: 72px;
    background-color: rgba(0, 0, 0, 0.3);
}
 
.header .menu ul {
    margin: 0 0 0 29px;
    padding: 10px 0 0;
    display: flex;
    justify-content: center;
}
 
.header .menu li {
    //float: left;
    padding: 0 0 10px;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 27px;
    margin-left: 30px;
}
 
 
.header .menu li a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
 
.header .menu li a:hover {
    text-decoration: underline;
}
 
.header .contacts {
    position: absolute;
    right: 42px;
    top: 110px;
    font-size: 33px;
    color: #fff;
}
 
.header .contacts .phone {
    height: 33px;
    line-height: 33px;
    background: url("../images/phone.png") left center no-repeat;
    padding-left: 45px;
    margin-bottom: 20px;
}
 
.header .contacts .mail {
    height: 25px;
    line-height: 25px;
    background: url("../images/mail.png") left center no-repeat;
    padding-left: 48px;
}
 
.header .logo {
    width: 370px;
    text-align: center;
    margin: 80px  auto;
}
 
.header .logo p {
    color: #fff;
    font-size: 41px;
    font-weight: 700;
    margin-top: 10px;
}
 
.header .slogan1 {
    width: 65%;
    color: #fff;
    margin-top: 90px;
    margin: auto;
    font-size: 62px;
    text-align: center;
}
 
.header .slogan2 {
    width: 40%;
    color: #fff;
    margin-top: 10px;
    margin: auto;
    text-align: center;
    font-size: 50px;
}
 
.header .calculate_btn {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    width: 400px;
    border: 4px solid #fff;
    height: 70px;
    line-height: 70px;
    margin: auto;
    font-size: 33px;
    text-align: center;
    margin-top: 51px;
}
 
.header .company-info {
    position: absolute;
    width: 100%;
    height: 150px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 700;
}
 
.header .company-info .info {
    width: 85%;
    margin: auto;
    vertical-align: text-top;
}
 
.header .company-info .info .info-block {
    width: 290px;
    display: inline-block;
    opacity: 0.5;
 
}
 
.header .company-info .info .info-block .number-info {
    float: left;
    font-size: 122px;
    margin-top: 15px;
    margin-right: 10px;
    box-sizing: border-box;
}
 
.header .company-info .info .info-block .text-info {
    font-size: 24px;
    margin-top: 28px;
}
 
.spaces {
    width: 360px !important;
}
 
.header .company-info .info .info-block .text-info span {
    font-size: 43px;
}
Добавлено через 40 секунд
и через медиа запросы можете уменьшать шрифт
0
5 / 5 / 3
Регистрация: 20.01.2012
Сообщений: 218
06.03.2017, 01:40  [ТС] 9
Цитата Сообщение от Evgeniy55 Посмотреть сообщение
и через медиа запросы можете уменьшать шрифт
То есть сделать много медиа запросов для определенного диапазона экранов?

Добавлено через 4 минуты
А может еще использовать vh и vw?
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
06.03.2017, 01:56 10
Да, под определенный экран разный шрифт,

касательно vh, vw, vmin в calc() как они используются с размером шрифта я особо не разбирался, мне напарник обьяснял его суть, но с первого раза я не вьехал )) да и делать надо было всего 1 раз, почитай в инете за это все, может как раз и хороший вариант будет в этом случае, а так обычно я через медиа запросы меняю

Добавлено через 2 минуты
если на флекс не нравится, можно таблицей через dispay:table
0
06.03.2017, 01:56
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 06.03.2017, 01:56
Помогаю со студенческими работами здесь

Свойство min-width в резиновом макете
Добрый вечер. Вобщем, есть простой 3-колоночный макет. Средняя колонка - резиновая. Нужно, чтобы...

Вертикальное центрирование ссылки в резиновом блоке
Доброго всем дня! Делаю резиновый шаблон для сайта, в нем есть вертикальное меню из 3х блоков,...

Некорректный отступ в меню в резиновом макете
Добрый день, в пункте меню слева и справа от текста должен быть одинаковый отступ (задан 34%), но...

Ошибка при выпадающем резиновом меню
Здрасте, есть такое меню горизонт, абсолютно резиновое, резиновость сохр. при добавлении новых...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru