Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
1

Почему начало прыгать всплывающее окно, flexbox

03.05.2017, 16:25. Показов 1117. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день всем!
Подскажите пожалуйста, почему начало прыгать всплывающее окно и как его корректно сделать!
Картинки над ними начинают слепливатся друг к другу, короче ХАОС одним словом!!!

БЛАГОДАРЕН ТОМУ КТО ОТКЛИКНЕТСЯ!!!!

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
<article>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="style_normalize_font/normalize.css">
    <link rel="stylesheet" href="style_normalize_font/font.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|
    Roboto|Signika:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="style_normalize_font/style.css">
</head>
<body>
    <div class="about">
        <h2>About</h2>
        <ul>
            <li>&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
        <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</h3>
        <div class="sides">
            <p class="left-side">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                sed diam nonummy nibh<br> euismod tincidunt ut laoreet dolore magna aliquam.
                Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                aliquip ex ea commodo<br> consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                sed diam<br> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
                Ut wisi enim ad<br> minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                aliquip ex<br> ea commodo consequat. </p>
            <p class="right-side">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                sed diam nonummy nibh<br> euismod tincidunt ut laoreet dolore magna aliquam.
                Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                aliquip ex ea commodo<br> consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                sed diam<br> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
                Ut wisi enim ad<br> minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                aliquip ex<br> ea commodo consequat.</p>
        </div>
        <div class="team">
            <div class="men">
                <img src="img/team/reiss.png" alt="reiss">
                <div class="title">
                    <div class="name"><b>&frasl;</b>&nbsp;<b>&frasl;</b>&nbsp;&nbsp;&nbsp;&nbsp;REISS SOMERS&nbsp;&nbsp;&nbsp;&nbsp;<b>&frasl;</b>&nbsp;<b>&frasl;</b></div>
                    <div class="profession">Founder</div>
                    <div class="text">
                        Lorem ipsum par de late ddolor sit amet,
                        consectetuer adipiscing fe elit, sed diam Lorem ipsum dolor ret tes ople sit amet,
                        consectetuer adipiscing elit, sed diam nonummy nibh euis
                    </div>
                </div>
            </div>
            <div class="men">
                <img src="img/team/chris.png" alt="chris">
                <div class="title">
                    <div class="name"><b>&frasl;</b>&nbsp;<b>&frasl;</b>&nbsp;&nbsp;&nbsp;&nbsp;CHRIS DOE&nbsp;&nbsp;&nbsp;&nbsp;<b>&frasl;</b>&nbsp;<b>&frasl;</b></div>
                    <div class="profession">Designer</div>
                    <div class="text">
                        Lorem ipsum par de late ddolor sit amet,
                        consectetuer adipiscing fe elit, sed diam Lorem ipsum dolor ret tes ople sit amet,
                        consectetuer adipiscing elit, sed diam nonummy nibh euis
                    </div>
                </div>
            </div>
            <div class="men">
                <img src="img/team/josh.png" alt="josh">
                <div class="title">
                    <div class="name"><b>&frasl;</b>&nbsp;<b>&frasl;</b>&nbsp;&nbsp;&nbsp;&nbsp;JOSH SOMERS&nbsp;&nbsp;&nbsp;&nbsp;<b>&frasl;</b>&nbsp;<b>&frasl;</b></div>
                    <div class="profession">Developer</div>
                    <div class="text">
                        Lorem ipsum par de late ddolor sit amet,
                        consectetuer adipiscing fe elit, sed diam Lorem ipsum dolor ret tes ople sit amet,
                        consectetuer adipiscing elit, sed diam nonummy nibh euis
                    </div>
                </div>
            </div>
            <div class="men">
                <img src="img/team/henry.png" alt="henry">
                <div class="title">
                    <div class="name"><b>&frasl;</b>&nbsp;<b>&frasl;</b>&nbsp;&nbsp;&nbsp;&nbsp;HENRY DOE&nbsp;&nbsp;&nbsp;&nbsp;<b>&frasl;</b>&nbsp;<b>&frasl;</b></div>
                    <div class="profession">Project Manager</div>
                    <div class="text">
                        Lorem ipsum par de late ddolor sit amet,
                        consectetuer adipiscing fe elit, sed diam Lorem ipsum dolor ret tes ople sit amet,
                        consectetuer adipiscing elit, sed diam nonummy nibh euis
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
</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
article {
    max-width: 1921px;
    margin: 0 auto;
    background-color: #ecfffc;
}
.about {
    max-width: 1401px;
    padding: 105px 0 195px 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.about h2 {
    text-transform: uppercase;
    font-family: "Signika-Semibold", sans-serif;
    font-size: 48px;
    color: #140e1d;
    text-align: center;
}
ul {
    text-align: center;
    padding-bottom: 26px;
}
ul li {
    display: inline-block;
    color: #000;
    list-style-type: none;
    font-size: 48px;
}
.about h3 {
    text-transform: uppercase;
    font-family: "Signika-Regular", sans-serif;
    font-size: 16px;
    color: #000000;
    text-align: center;
}
.sides {
    padding: 66px 0 110px 0;
    display: flex;
    justify-content: space-between;
}
.left-side {
    font-family: "OpenSans-Semibold", sans-serif;
    font-size: 14px;
    color: #000000;
    padding-left: 26px;
    line-height: 30px;
}
.right-side {
    font-family: "OpenSans-Semibold", sans-serif;
    font-size: 14px;
    color: #000000;
    padding: 0 17px 0 106px;
    line-height: 30px;
}
.team {
    display: flex;
    justify-content: space-between;
}
.men:hover {
    width: 270px;
    height: 536px;
    background: #00a388 top center no-repeat;
}
.name {
    text-align: center;
    padding: 28px 0;
    color: #000;
    font-family: "Signika-Regular", sans-serif;
    font-size: 18px;
}
.profession {
    color: #000;
    font-family: "Signika-Regular", sans-serif;
    font-size: 16px;
    text-align: center;
}
.text {
    font-family: "OpenSans-Regular", sans-serif;
    font-size: 12px;
    color: #ffffff;
    padding: 31px 0 35px 0;
    line-height: 21px;
}
Миниатюры
Почему начало прыгать всплывающее окно, flexbox  
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.05.2017, 16:25
Ответы с готовыми решениями:

Всплывающее окно при входе на сайт (windows окно)
Как сделать чтобы при переходе на страницу появлялось такое же всплывающее окно как здесь? ...

Всплывающее окно перекрывает окно отчёта
Доброго времени суток форумчане! Помогите пожалуйста победит всплывающию окошку, сделать так чтобы...

Почему не могу поставить высоту на flexbox в процентах?
Почему не могу поставить высоту на flexbox в процентах??? &lt;div class=&quot;wrapper_two&quot;&gt; &lt;div...

Всплывающее окно
Вот что хочется сделать. Есть табличка. В ее ячейках картинки, но не в этом суть. Нужно чтобы по...

5
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
03.05.2017, 16:31  [ТС] 2
Вот что получается
Миниатюры
Почему начало прыгать всплывающее окно, flexbox  
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
03.05.2017, 16:38 3
Цитата Сообщение от Predat Посмотреть сообщение
короче ХАОС одним словом!!!
верно
Цитата Сообщение от Predat Посмотреть сообщение
почему начало прыгать всплывающее окно
Где оно в коде?
0
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
03.05.2017, 16:46  [ТС] 4
После тэга <img....> прописываю содержимое которое находится в background-color: зеленый
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
03.05.2017, 16:51 5
Лучший ответ Сообщение было отмечено Predat как решение

Решение

ясно, это не так называется...
Просто вы при наведении на тег с классом men меняете ширину, вы лучше задайте сразу её)
CSS
1
2
3
.men{
width: 270px;
}
1
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
03.05.2017, 16:55  [ТС] 6
Помогло, большое спасибо!!!!
0
03.05.2017, 16:55
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.05.2017, 16:55
Помогаю со студенческими работами здесь

Всплывающее окно
Привет всем Как можно реализовать такую задачу. Есть Form1 она себе работает в фоне, а я работаю...

Всплывающее окно
Добрый день, объясните пожалуйста как работает всплывающее окно со стороны работы сайта, вот сайт...

Всплывающее окно
Вылезает каждые пять секунд вот такое сообщение программа сама по себе работает но окошко очень...

Всплывающее окно
Нужно, чтобы при нажатии на ссылку появлялось окошко с произвольным текстом. Понимаю, что нужно...

Всплывающее окно
Здравствуйте. У меня есть блог на Wordpress. При очередной установке и активации плагинов...

Всплывающее окно...
Здравствуйте! Хотелось бы узнать можно на html сделать следующее: При нажатии на кнопку всплывает...


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

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