3 / 3 / 0
Регистрация: 04.06.2015
Сообщений: 56
1

Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого

24.07.2018, 22:31. Показов 2488. Ответов 26

Author24 — интернет-сервис помощи студентам
Привет всем!
Вопрос из разряда, как сделать.
Итак, условие:
Есть блок назовем его First, он имеет в себе блок Container (width: 980px; padding: 0 10px). В контейнере, где-то у дочерних элементов есть 2 nav (менюшки), по данным менюшкам, блок First делиться на левая часть и правая. Примерное деление, ~60% левая часть, ~40% правая.
Теперь самое интересное!
First имеет в себе картинку, она растянута по всему экрану, на всю высоту и ширину.
Эта картинка должна быть закрашена(с альфа каналом - rgba) в 2 цвета, без разницы каких. Как это сделать?

Проблема в том, Container = 980px, я его делю на 60% и 40%. Container кстати по середине.
Теперь если я попробую для применить :before и :after, по данным значением, то они не совпадают с теми что внутри Container.
У кого-нибудь есть идеи? Бьюсь над этим 3-и сутки...
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.07.2018, 22:31
Ответы с готовыми решениями:

Убрать часть содержимого страницы
Здравствуйте. Помогите пожалуйста решить задачку. На странице расположено произвольное количество...

Подскажите, как скопировать часть содержимого чужой страницы
Можно ли скопировать часть содержимого чужой страницы и как это лучше сделать? Хочу...

Одна часть диска RAID-1, другая часть - нет. Какие минусы?
Какие минусы ожидают меня, если я половину каждого из двух терабайтных дисков соединю в RAID-1, а...

Есть ли компонент для вывода текста с прозрачным фоном?
В Билдере есть какой-нибудь компонент для многострочного вывода текста с прозрачным фоном,...

26
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
24.07.2018, 22:38 2
А можно фотку этого места в макете? Дизайнер ведь это как-то нарисовал.
0
3 / 3 / 0
Регистрация: 04.06.2015
Сообщений: 56
24.07.2018, 22:38  [ТС] 3
Если кто не понял, то просто сделайте блок по центру экрана, в него 2 блока которые его делят в процентном соотношении (только не 50%-50%), по этому соотношению разделите фоновую картинку на 2 визуальных эффекта, пусть левая в желтоватый цвет, а правая в серый. И чтобы страничка была адаптивна.

Вот картиночка для примера.
Миниатюры
Часть страницы одним фоном, другая другим, не равномерно. Есть контейнер для содержимого  
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
24.07.2018, 23:55 4
SilverWolf, я так понимаю, что ширина пунктов заранее неизвестна, да ещё и может меняться. Что ж, ты можешь сделать невероятно извращенскую штуку:

1. Создаёшь svg(или png) картинку с жёлтым полупрозрачным фоном.

2. Тот пункт меню, который должен быть разделителем, делаешь position:relative и добавляешь ему псевдоэлемент, высотой с родительский элемент (чтобы он не перекрывал что не надо, можешь с z-index'ом поиграть)

CSS
1
2
3
4
5
6
7
8
li.separator::before {
    content: "";
    position: absolute;
    top: -20px; // Это чтобы и над менюшкой фон закрасить.
    background: url("ссылка/на/фон");
    width: 2000px; // Это чтобы прям точно до конца правой стороны экрана дошёл
    height: 600px; // Тут указываешь высоту блока. В крайнем случае и высоту и ширину можешь JS'ом менять.
}
Ну и чтобы за пределы основного контейнера ничего не лезло, задай ему overflow:hidden;

Добавлено через 3 минуты
P.S. Если Когда тебя прийдут бить за такой код, вали всё на дизайнера ))

Добавлено через 1 минуту
P.P.S. К слову, больше всего геморроя у тебя будет не с фоном, а с надписью. Как её делать я без понятия, может позже и придумаю.

Добавлено через 53 минуты
====================================

Так, всё, я всё понял =)

1. Создаём контейнер для меню, такой ширины, чтобы не было отступов по бокам. Растягиваем его на всё доступную высоту.

2. Создаём ДВА меню - то, что жёлтое и то, что чёрное. Т.к. контейнер по размеру равен сумме ширин двух меню, они выглядят единым целым. ul у меню также растягиваем на 100% высоты.

3. Для правого ul'a делаем жёлтый фон. Если на больших экранах планируются отступы по бокам, вместо фона для ul'a делаем фон для псевдоэлемента, по вышеописанному принципу.

4. Чтобы сделать надпись, создаём ДВЕ надписи с идентичным текстом. Они с помощью абсолютного позиционирования фиксируются в одной точке.

5. Первую надпись прикрепляем к общему для обоих меню контейнеру и делаем чёрной. Левый контейнер с меню должен встать поверх неё, тогда она вылезет из-под левого контейнера, когда он закончится, и станет видна только та часть, которая будет за пределами левого меню, т.е. та, которая и нужна.

6. Вторую надпись прикрепляем к левому контейнеру и делаем жёлтой. Т.к. верхний левый угол правого контейнера совпадает с общим контейнером, надписи наложатся одна поверх другой. Чёрная надпись должна быть под жёлтой. Левому контейнеру задаём overflow: hidden;, чтобы жёлтый текст обрезался.

7. Смотрим, чтобы всё работало как надо, при необходимости добавляем z-index, чтобы элементы правильно друг друга перекрывали.

8. Профит.
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
25.07.2018, 00:07 5
Kornerupin, Зачем такие сложности?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="out">
  <div class="left"></div>
  <div class="right">
    <div class="menu">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li> 
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
      </ul>
    </div>
  </div>
</div>
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
*{
  margin: 0;
}
.out{
  height: 100vh;
  background:url(http://placekitten.com/g/1000) no-repeat;
  position: relative;
}
.left{
  position: absolute;
  left: 0;
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 60%;
}
.right{
  position: absolute;
  right: 0;
  background: rgba(255,255,0,.5);
  height: 100%;
  width: 40%;
}
ul{
  padding: 0;
}
li{
  display: inline-block;
  list-style: none;
}
.menu{
  display: inline-block;
  margin-top: 50px;
  transform: translateX(-50%);
  background: linear-gradient(to right,#ff0 50%, #000 50%);
  }
Javascript
1
2
3
4
var li = document.querySelectorAll('.menu li')
for(var i = li.length-1; i >= li.length/2; i--){
  li[i].style.color='#ff0';
}
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 00:14 6
AlexZaw, JS - читерство )

Добавлено через 2 минуты
Эээээм.... а что Вы делаете этим JS'ом? Там фишка в том, чтобы перекрасить надпись "THIS IS TEST", причём частично, а не элементы меню - элементы перекрашиваются вообще как нечего делать

CSS
1
2
3
li:nth-child(n + 5) {
   color: red;
}
Добавлено через 2 минуты
А с надписью "THIS IS TEST" проблема в том, что линия перекрашивания с жёлтой на чёрную должна пройти чётко по границе жёлтой области (которая справа). Она может пройти между буквами, а может и по букве. Так что тут даже JS не поможет.

Теоретически, можно попытаться сделать это SVG + JS, конкретно помучавшись, но это не точно.
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
25.07.2018, 00:16 7
Kornerupin, js-ом перекрашивал пункты меню, чтобы при изменении количества не переписывать код.

Надпись делается элементарно - делаем цвет надписи желтый, нужное слово оборачиваем в span и делаем его черным.
Надпись размещаем абсолютно относительно любого из блоков.
Ну и подгоняем таким образом чтобы линия раздела цветов не проходила по букве, ибо адекватного метода для такого в css (да и в остальном) нету
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 00:21 8
AlexZaw, так тут в том-то и фишка, что текст должен перекраситься не побуквенно - жёлтое поле справа может "перерезать" букву, и половина её (или какая-то часть) должна будет остаться жёлтой, а вторая половина - стать чёрной. Это с помощью простого CSS не решается.

Добавлено через 1 минуту
Тут в том и проблема, что заранее неизвестна не ширина левого меню, ни ширина правого, точно также как неизвестен текст, который должен будет перекрашиваться.

И при всём при этом когда надпись переходит на жёлтую область, она сразу же должна перекраситься в чёрный, даже если получится разноцветная буква.
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
25.07.2018, 00:22 9
Kornerupin, может она ее перерезать или нет - будет зависить от нас Все остальное это фантазии дизайнера, ибо даже ваш метод с двумя одинаковыми надписями, к сожалению, не может дать гарантии что что-то где-то не сломается.
Цитата Сообщение от Kornerupin Посмотреть сообщение
то с помощью простого CSS не решается.
Да это вообще адекватно никак не решается, все только через костыли и извращения
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 00:24 10
AlexZaw, а у меня всё перекрасится как надо =))) Потому что у меня изначально две надписи разных цветов, просто чёрная лежит под жёлтой. Как только левая часть закончится, жёлтая надпись обрежется и покажется чёрная. А так как они пиксель в пиксель совмещены, без разницы, когда это будет - буква станет чёрной как только закончится левая часть.

К сожалению, от нас не будет ничего зависеть, если заказчик в админке поменяет эту надпись. Да и <span> сам не проставится =(((
0
AlexZaw
25.07.2018, 00:33
  #11

Не по теме:

Цитата Сообщение от Kornerupin Посмотреть сообщение
если заказчик в админке поменяет эту надпись
Осталось только объяснить заказчику что надпись нужно будет менять в двух местах :)
Да, можно ее дублировать с помощью того же js
Идеального варианта не существует :( Да и не будете же вы спорить что ваш вариант это все-равно костыли :)
Кстати, по хорошему, меню надо тоже дублировать, т.к. если будет нечетное количество пунктов, то граница опять же будет проходить посередине слова.

0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 01:09 12
AlexZaw, да, я сразу сказал, что такая жуть будет работать только с костылями =)) Но будет, сейчас допилю и залью =)

Добавлено через 35 минут
https://codepen.io/kornerupin/pen/ajwNWo

Ву-ху!
0
3 / 3 / 0
Регистрация: 04.06.2015
Сообщений: 56
25.07.2018, 01:17  [ТС] 13
Ребят! ПРИЧЕМ ТУТ НАДПИСЬ?!?!??! Я все реализовал, кроме конченного фона. Вопрос только по фону! JS юзать для верстки плохо - мне голову оторвут. И насчет меню, зачем его делать 1???!? 2 nav я ведь написал. И где вы контейнер сделали?! Кроме фона все отлично работает!
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 01:19 14
SilverWolf, эх, а у меня такая классная демка вышла =)))

По поводу фона написал выше, как сделать, ну и в демке можешь глянуть.
0
3 / 3 / 0
Регистрация: 04.06.2015
Сообщений: 56
25.07.2018, 01:20  [ТС] 15
И смысл в том, что 2 эффекта, 2 закрашивание картинки! НЕ ОДНО! Просто альфа канал разный и цвет серый и желтый в примере. А так картинка ярка.
P.S. Если весь фон всунуть в серый с альфа каналом, а на левую(или правую) часть кинуть только желтый, получается тускло желтый, даже если выкрутить альфа канал на максималку.
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 01:22 16
SilverWolf, ну так а в чём проблема-то? Для левого сделай то же самое, что для правого, только цвет другой поставь
0
3 / 3 / 0
Регистрация: 04.06.2015
Сообщений: 56
25.07.2018, 01:26  [ТС] 17
А в вашем варианте контейнера нету, а он обязательное условие, по середине 980px + 10 оступы

Добавлено через 2 минуты
И Вариант типо выставим: width: 2000px; НЕ КАТИТ. У меня моник 4к например. И выставлять четкое значение px в данном случае костыль и мне по шее. Даже если вкинуть туда 9999px, все равно косяк и руководитель до *матное слово*.
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 01:34 18
SilverWolf, ты просил решение, я сделал решение. Здесь не может быть "хорошего" решения без костылей или JS, т.к. макет такой.

Как вариант, можешь поставить не 2000px, а 100vw, тогда любой монитор никуда не денется, и выглядит не так палевно.

Добавлено через 3 минуты
По поводу контейнера - то же самое, нужен контейнер - добавь контейнер. Я же пример сделал, а не окончательную реализацию.
0
Модератор
Эксперт HTML/CSS
2275 / 1656 / 650
Регистрация: 07.08.2016
Сообщений: 3,970
25.07.2018, 11:13 19
т.е. вот такой вариант не подходит?
HTML5
1
2
3
4
<div class="out">
  <div class="left"></div>
  <div class="right"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{
  margin: 0;
}
.out{
  height: 100vh;
  background:url(http://placekitten.com/g/1000) no-repeat;
  position: relative;
}
.left{
  position: absolute;
  left: 0;
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 60%;
}
.right{
  position: absolute;
  right: 0;
  background: rgba(255,255,0,.5);
  height: 100%;
  width: 40%;
}

Цитата Сообщение от Kornerupin Посмотреть сообщение
Ву-ху!
Я ж говорил где-нибудь косяк вылезет. Нельзя скопировать заголовок
0
31 / 19 / 7
Регистрация: 08.05.2017
Сообщений: 115
25.07.2018, 14:27 20
AlexZaw, там не должно быть фиксированной ширины, поэтому не подходит.

Можно =))) Просто проведи дальше и нажми ctrl+c, спокойно копируется. Там часть не видна, а скопировать её можно.

К тому же на кой человеку понадобится это копировать? По-хорошему, надо вообще запретить выделение этого места, чтобы не портился внешний вид.
0
25.07.2018, 14:27
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.07.2018, 14:27
Помогаю со студенческими работами здесь

Создать правило для абзаца с собственным фоном, прозрачным фоном
Подскажите пожалуйста, как нужно выполнить задание?

Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?

Увеличение содержимого на странице происходит не равномерно
здравствуйте есть html файл, в нём табличка заполненная данными, при изменении масштаба эти данные...

Извлечь cookie установленные для всего сайта и для отдельной страницы с одним именем
Столкнулся со следующей проблемой: На одной странице кука с именем &quot;email&quot; устанавливается видимой...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

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