@Владислав231

[del]

По стилям вопрос. Есть #line. Для него before и after. before и after работают, а на самом блоке не могу ничего писать.

+ есть вопрос. Копипастнул блоки с текстами на остальные секции. С выравниванием плохо. Не могу понять, как их сделать посередине секции?

Заранее огромное спасибо!

0

@Academik

Владислав231, дайте проблемный код.

0

@Владислав231

0

@Academik

В каком смысле на самом блоке? Свойство content работает только с after и befor.

0

@Владислав231

Оу....
Сори, я только начинаю в этой каше вариться)

Спасибо!

А по поводу второго вопроса можете подсказать?

0

@Academik

Понять бы еще что требуется. Опишите подробнее задачу и предоставьте проблемный код html/css.

0

@Владислав231

Должно быть, как на первой картинке, получилось, как на второй (Я копипастнул с шапки)
Нужно, чтобы текст отображался одинаково по центру секции

Так выглядит код рабочего блока (Как на первой картинке):
<div id="hero-section">
<div id="head-line"></div>
<video autoplay loop muted class="bgvideo">
<source src="../video/bg.mp4" type="video/mp4"></source>
</div>

Так выглядит нерабочий
<section id="section01">
<div id="heading">Заголовок 3</div>
<div id="line"></div>

#section {
width: 100vw;
height: calc(100vh - 160px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
background: url(../video/back.mp4);
}

#line {
width: 520px;
height: 30px;
background: #fff;
border-radius: 90px;
position: relative;
content: 'Середина 2';
display: block;
}
#line:before, #line:after {
content: ''; /* */
height: 30px;
position:relative;
border-radius: 90px;
}
#line:before {
font-size: 20px;
text-align:justify;
content: 'Верхнее 2';
width: 110%;
background: #fff;
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#line:after {
content: 'Нижнее 2';
width: 200px;
background: #fff;
position: absolute;
left: 50%;
bottom: -60px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

/*** Hero Section Styles ***/
#hero-section {
width: 100vw;
height: calc(100vh - 160px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
background: url(../video/back.mp4);
}

#head-line {
width: 520px;
height: 30px;
background: #fff;
border-radius: 90px;
position: relative;
}
#head-line:before, #head-line:after {
content: '';
height: 30px;
border-radius: 90px;
}
#head-line:before {
font-size: 20px;
text-align:justify;
content: 'Если вы это видите, значит мой тестовый хостинг пустует';
width: 110%;
background: #fff;
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#head-line:after {
content: 'content';
width: 200px;
background: #fff;
position: absolute;
left: 50%;
bottom: -60px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

/*** Section Styles ***/
section {
width: 100vw;
height: calc(100vh - 100px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
section:nth-child(odd) {
background: #FA6C98;
}
section:nth-child(even) {
background: #79EDFC;
}

Миниатюры

   

0