Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 17.02.2022
Сообщений: 14

Неотображаемый текст в шапке сайта. Свойство object-fit и его влияние на отображение. Позиционирование внутри блока

18.03.2022, 14:11. Показов 404. Ответов 2

Author24 — интернет-сервис помощи студентам
Верстаю макет с Фигмы - https://www.figma.com/file/2rd... e-id=0%3A1. Наверстал

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">    
    <title>Webovio</title>
</head>
<body>
    <div class="wrapper">
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container">
                    <div class="main-block__header">
                        <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                        <img  src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname">
                        <img  src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="logoname">                       
                    </div>
                    <div class="main-block__body">
                        <div class="main-block__smalltitle">A place where</div>
                        <h1 class="main-block__title">A creative agency for redemptive brands</h1>
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                          </div>
                        <div class="main-block__items">
                            <a href="" class="main-block__link main-block__link_yellow">  Get in touch</a>
                        </div>
                    </div>    
                </div>
                <div class="main-block__image _ibg">
                    <img src="img/mainblock/mainimage.png" alt="cover">
                </div>
            </div>
        </main>
    </div>    
</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
163
164
165
166
167
/* Обнуление */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ul,
ol,
li {
    list-style: none;
}
img {
    vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}
html,
body {
    height: 100%;
    line-height: 1;
    background: #fafafa;
    font-size: 14px;
    color: #252b42;
    font-weight: 400;
    font-family: Poppins;
}
 
 
.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
 
._container {
    max-width: 1046px;
    padding: 0px 15px;
    margin: 0px auto;
    box-sizing: content-box;
}
 
._ibg {
    position: relative;
}
 
._ibg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}
 
 
/* =========================================================================== */
 
.page {
}
.page__main-block {
}
.main-block {
}
.main-block__container {
}
.main-block__logo {
}
.main-block__body {
}
 
.main-block__smalltitle{
    height: 21px;
    margin-left: 166px;
    /*right: 83.77%;*/
    /*top: calc(50% - 21px/2 - 195.5px);*/
    margin-top: 130.96px;
    width: 100px;
 
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
 
 
    /*color: #FFFFFF;*/
    z-index: 10;
}
 
.main-block__title {
    margin-left: 166px;
    width: 616px;
    margin-top: 22px;
    /*bottom: 35.68%;*/
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 74px;
    /* or 123% */
    
    
    /*color: #FFFFFF;*/
    z-index: 5;
}
.main-block__text {
}
.main-block__items {
}
.main-block__link {
}
.main-block__link_yellow {
}
.main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}
 
/* ============================================================================ */
 
.main-block__logo_white_triangle {
    width: 42px;
    height: 35px;
    left: 164px;
    top: 27.27px;
    
    background: #FFFFFF;
    /*transform: matrix(1, 0, 0, -1, 0, 0);*/
}
.main-block__logo_yellow_triangle {
    width: 29.21px;
    height: 24.35px;
    left: 176.78px;
    top: 27.27px;
    
    background: #F6F6F6
}
 
.main-block__logo_name {
    width: 179.23px;
    height: 33.05px;
    margin-left: 230.2px;
    margin-top: 23px;
    
    background: #FFFFFF;
    z-index: 15;
}
В результате отображается следующая картинка

1-й скриншот

в режиме инструментов разработчика. А вне режима вообще отображает

2-й скриншот

Подскажите как добиться отображения текста как на макете. (см. )
Миниатюры
Неотображаемый текст в шапке сайта. Свойство object-fit и его влияние на отображение. Позиционирование внутри блока   Неотображаемый текст в шапке сайта. Свойство object-fit и его влияние на отображение. Позиционирование внутри блока  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
18.03.2022, 14:11
Ответы с готовыми решениями:

Позиционирование центрального блока в шапке
Помогите, плиз, не понимаю %-). Нужно разделить шапку сайта на 3 части. Вроде сделал. Только средний блок не хочет быть по середине и...

позиционирование внутри блока перетягиванием
Всем доброго времени суток! разбираюсь с javascript-ингом. Имею страницу, внутри которой блок div подстраиваемый под ширину окна....

Позиционирование элемента внутри блока
Дан html код &lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;header&quot;&gt;&lt;/div&gt; &lt;div class=&quot;WebDunos&quot;&gt;&lt;/div&gt; &lt;div...

2
1306 / 781 / 190
Регистрация: 19.09.2020
Сообщений: 1,993
18.03.2022, 15:28
А при чем тут object-fit? Оно влияет на изображение, а текст поверх размещайте отдельным слоем.
0
0 / 0 / 0
Регистрация: 17.02.2022
Сообщений: 14
18.03.2022, 15:31  [ТС]
Подскажите конкретно в чем причина не отображения текста поверх картинки (насчет object-fit это лишь предположение). Код я привел.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
18.03.2022, 15:31
Помогаю со студенческими работами здесь

Позиционирование текста внутри блока
Привет, помогите пожалуйста решить проблему. У меня есть блок с иконками - &lt;div class=&quot;ikonki&quot;&gt; &lt;p...

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

Позиционирование image по центру внутри блока
Добрый день. Подскажите, как решить эту проблему. Есть блоки размером 300 на 450 пикселей с свойством overflow:hidden. Внутри этих блоков...

Правильное позиционирование таблицы внутри блока
Есть таблица внутри центрального блока, но она почему-то сжата в центр, я надо чтобы она была во всю ширину центрального блока. &lt;?php...

Отображение двух изображений в шапке сайта
#header { background: url(images/header_bg.gif) no-repeat center top; padding-top: 120px; }Собственно вот весь код. Изображение...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Указатели в Swift: Небезопасные, буферные, необработанные и управляемые указатели
mobDevWorks 16.04.2025
Указатели относятся к наиболее сложным и мощным инструментам языка Swift. В своей сути указатель — это переменная, которая хранит адрес участка памяти, где расположены данные, а не сами данные. . . .
Жизненный цикл HTTP-запросов в ASP.NET Core MVC
UnmanagedCoder 16.04.2025
Разработка веб-приложений на ASP. NET MVC часто выглядит как простой процесс: получили запрос, обработали его в контроллере, отрендерили представление и отправили ответ пользователю. Однако за этой. . .
Введение в Django: Создаём приложение портфолио
py-thonny 16.04.2025
Django – один из самых мощных веб-фреймворков на Python, который позволяет быстро создавать сложные веб-приложения. В отличие от других фреймворков, Django предоставляет богатый набор встроенных. . .
Итераторы в C++: Продвинутые техники использования
bytestream 16.04.2025
Итераторы - одна из самых гибких и выразительных концепций в C++, позволяющих абстрагировать обход элементов контейнера от его внутренней реализации. За прошедшие годы они эволюционировали от простых. . .
Обработка естественного языка в Python с помощью spaCy
py-thonny 16.04.2025
Обработка естественного языка (Natural Language Processing, NLP) — одна из самых быстрорастущих областей искусственного интеллекта, которая позволяет компьютерам понимать, интерпретировать и. . .
Работа с железом в PHP Laravel с Pinout
Jason-Webb 16.04.2025
Граница между программным и аппаратным миром стремительно размывается. Современные веб-приложения уже не ограничиваются цифровым пространством — они активно взаимодействуют с физическими. . .
Возвращаясь к сумматороам и регистрам (всё таки заявку подам в ФИПС, сроки горят уже, поэтому симулятор для апгрейда аппарата чуть подождёт)
Hrethgir 16.04.2025
Вообще считаю, что асинхронные логические схемы это путь к энергоэффективности и быстродействию, а значит представляют собой область отдельных архитектур, от схем последовательных. Вообще на. . .
Абстрактные классы в TypeScript
run.dev 15.04.2025
Разработка современных веб-приложений требует надежных инструментов для структурирования кода. В этом контексте абстрактные классы стали незаменимым элементом объектно-ориентированного. . .
Хеш-функции std::hash в C++ программировании
NullReferenced 15.04.2025
Хеширование — фундаментальная концепция в компьютерных науках, играющая важную роль в эффективной обработке и хранении данных. В C++ функциональность std::hash является неотъемлемой частью. . .
Форматирование строк в Python
py-thonny 15.04.2025
Форматирование строк — одна из тех базовых возможностей Python, которые сопровождают разработчика каждый день. Эта задача кажется тривиальной на первый взгляд, но на самом деле представляет собой. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
Выделить код Копировать код Сохранить код Нормальный размер Увеличенный размер