Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.03.2022, 14:45   #1
vladdvin
Новичок
Джуниор
 
Регистрация: 18.03.2022
Сообщений: 1
По умолчанию Неотображаемый текст в шапке сайта. Свойство object-fit и его влияние на отображение. Позиционирование внутри блока

Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBT...?node-id=0%3A1. Наверстал

Код:
<!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>
Код:
/* Обнуление */
*,
*::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-й скриншот

Подскажите как добиться отображения текста как на макете.
Изображения
Тип файла: jpg header1.jpg (84.3 Кб, 0 просмотров)
Тип файла: jpg header2.jpg (60.6 Кб, 0 просмотров)
vladdvin вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DBLookupComboboxEh и его свойство вводить значения вне его списка KBO БД в Delphi 0 22.01.2019 02:33
После центрирования фиксированного блока по центру экрана не видно его текст kamikadzedead HTML и CSS 3 23.05.2018 12:25
Съезжают данные в шапке сайта esod HTML и CSS 2 09.07.2015 11:03
Позиционирование блока по центру с динамическими элементами и их гибкостью *сложно AlienNation JavaScript, Ajax 0 22.10.2011 03:55
Текст на шапке max400 HTML и CSS 5 15.09.2011 09:04