Верстка по макету

@STRL7 · Регистрация: 03.11.2018

Студворк — интернет-сервис помощи студентам

Не пойму как отцтентрировать значок языка и задать фон кнопке "Вход". Может кто объяснить?

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <nav class="site-nav">
                <div class="logo">
                    <a href="index.html">
                        <img src="logo.png" alt="">
                    </a>
                </div>
                    <ul>
                        <li class="study">Обучение</li>
                        <li class="FAQ">F.A.Q</li>
                        <li class="BTC">ЗАРАБОТАТЬ BTC</li>
                        <li class="enter">ВХОД</li>
                        <li class="reg">РЕГИСТРАЦИЯ</li>
                        <li class="lang"><img src="lang.png" alt=""></li>
                    </ul>
            </nav>
        </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
* {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Open Sans', sans-serif;
}
            /*HEADER BEGIN*/
.container {
    width: 1200px;
    margin: 0 auto;
}
 
.site-header{
    background-image: url(BG.png);
    width: 100%;
    height: 72px;
}
li {
    list-style: none;
    text-decoration: none;
    font-size: 13px;
}
.logo {
    float: left;
}
ul {
    text-align: center;
    height: 72px;
    margin-right: 190px;
}
nav li{
    display:inline-block;
    margin: 15px 10px;
    color: #fff;
}
 
.BTC, .reg{
    border: 1px solid #006d64;
    padding: 5px 15px;
    border-radius: 4px; 
}
.enter {
    background: url(enter1.png.gif) repeat-x 0 0; 
    padding: 10px 29px;
    color: #011624;
    border: 1px solid #fff;
}
.lang {
    top: 50%;
}
 
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
    }
    ul {
        margin-right: 0;
    }
}
 
            /*HEADER ENDS*/

Вот код: https://codepen.io/STRL7/pen/EOxXRr

Как есть: [del]

И как должно быть: [del]

@iCortezik · 09.11.2018, 10:09

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <nav class="site-nav">
                <div class="logo">
                    <a href="index.html">
                        <img src="logo.png" alt="">
                    </a>
                </div>
                    <ul>
                        <li class="">Обучение</li>
                        <li class="">F.A.Q</li>
                        <li class="knopka">ЗАРАБОТАТЬ BTC</li>
                        <li class="enter">ВХОД</li>
                        <li class="knopka">РЕГИСТРАЦИЯ</li>
                        <li class="lang"><img src="lang.png" alt=""></li>
                    </ul>
            </nav>
        </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
* {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Open Sans', sans-serif;
}
            /*HEADER BEGIN*/
.container {
    width: 1200px;
    margin: 0 auto;
}
 
.site-header{
    background-color: #005b5c;
    width: 100%;
    height: 72px;
}
li {
    list-style: none;
    text-decoration: none;
    font-size: 13px;
}
.logo {
    float: left;
}
ul {
    text-align: center;
    height: 72px;
    margin-right: 190px;
}
nav li{
    display:inline-block;
    margin: 15px 10px;
    color: #fff;
}
 
.knopka{
    border: 1px solid #006d64;
    padding: 5px 15px;
    border-radius: 4px; 
}
.enter {
    background-color:#37fb8a; 
    padding: 10px 29px;
    color: #011624;
    padding: 5px 25px;
    border-radius: 4px;
}
.lang {
    top: 50%;
}
 
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
    }
    ul {
        margin-right: 0;
    }
}
 
            /*HEADER ENDS*/

Кнопки по макету. С "языком" картинка нужна исходная

@STRL7 · 11.11.2018, 17:18 **[ТС]**

Могли бы вы проверить мой код, работать, то он работает, но правильно ли я все сделал?

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <nav class="site-nav">
                <div class="logo">
                    <a href="index.html">
                        <img src="logo.png" alt="">
                    </a>
                </div>
                    <ul>
                        <li class="study">Обучение</li>
                        <li class="FAQ">F.A.Q</li>
                        <li class="BTC">ЗАРАБОТАТЬ BTC</li>
                        <li class="enter">ВХОД</li>
                        <li class="reg">РЕГИСТРАЦИЯ</li>
                        <li class="lang"><img src="lang.png" alt=""></li>
                    </ul>
            </nav>
        </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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <nav class="site-nav">
                <div class="logo">
                    <a href="index.html">
                        <img src="logo.png" alt="">
                    </a>
                </div>
                    <ul>
                        <li class="study">Обучение</li>
                        <li class="FAQ">F.A.Q</li>
                        <li class="BTC">ЗАРАБОТАТЬ BTC</li>
                        <li class="enter">ВХОД</li>
                        <li class="reg">РЕГИСТРАЦИЯ</li>
                        <li class="lang"><img src="lang.png" alt=""></li>
                    </ul>
            </nav>
        </div>
    </header>
</body>
</html>

@iCortezik · 12.11.2018, 06:27

Вы CSS забыли вставить ваш, 2 html кода

@STRL7 · 13.11.2018, 18:31 **[ТС]**

Прошу прощения

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
* {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Open Sans', sans-serif;
}
            /*HEADER BEGIN*/
.container {
    width: 1200px;
    margin: 0 auto;
}
 
.site-menu{
    background-image: url(BG.png);
    width: 100%;
    height: 72px;
    background-repeat: no-repeat;
}
li {
    list-style: none;
    text-decoration: none;
    font-size: 13px;
}
.logo {
    float: left;
}
ul {
    text-align: center;
    height: 72px;
    margin-right: 148px;
}
nav li{
    display:inline-block;
    color: #fff;
}
 
.BTC, .reg {
    border: 1px solid #006d64;
    padding: 4px 15px 5px;
    border-radius: 4px; 
}
.BTC {
    position: relative;
    left: 1%;
}
.reg {
    position: relative;
    left: -0.5%;
}
.study, .FAQ {
    margin: 0px 10px;
    position: relative;
    left: 0.5%;
}
.enter {
    background: url(enterf.png);
    width: 125px;
    height: 5px;
    text-align: center;
    background-repeat: no-repeat;
    padding: 22px 0px;
    color: #011624;
}
.lang {
    position: relative;
    top: 7%;
    left: 1.5%;
}
.header-video {
    background: url(video.png);
    width: 100%; 
    height: 740px;
    background-repeat: no-repeat;
}
 
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
    }
    ul {
        margin-right: 0;
    }
}
 
 
            /*HEADER ENDS*/

@iCortezik · 14.11.2018, 06:20

Если картинка с кнопки .enter как у меня фон в css. То скорее всего да.

А зачем к каждому из меню <li> новый класс? Оптимальнее было бы сделать один код для всех, а потом дополнить. Получается "заработать" и "регистрация" имеют один стиль. А "обучение" и "FAQ" вообще дополнительного ничего не имеют

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@iCortezik 2 / 2 / 0 Регистрация: 29.07.2015 Сообщений: 46
	12.11.2018, 06:27
	Вы CSS забыли вставить ваш, 2 html кода 0

@iCortezik 2 / 2 / 0 Регистрация: 29.07.2015 Сообщений: 46
	14.11.2018, 06:20
	Если картинка с кнопки .enter как у меня фон в css. То скорее всего да. А зачем к каждому из меню <li> новый класс? Оптимальнее было бы сделать один код для всех, а потом дополнить. Получается "заработать" и "регистрация" имеют один стиль. А "обучение" и "FAQ" вообще дополнительного ничего не имеют 0