• 0
VasyOK{!}

Подскажите как закрасить баннер

Вопрос

Приветствую специалистов по верстке.

Нарисовал мне дизайнер такой баннер

пример.jpg

Подскажите как сверстать:

1) Строка "Размещение рекламы" по центру (по горизонтали)
2) фон этой строки закрашен только слева

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

В div запихни картинку, как background, внутри этого div строка с размещением background с нужной прозрачностью и с нужным размером.

<div>

<div>Размещение рекламы</div>

</div>

Изменено пользователем rzet777
исправил неточность

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Хорошо, облегчу задачу. Как сделать так:

c53264897aaa.png

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/

Изменено пользователем VasyOK{!}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Как то так можно:

<div class="wrap">
  <div class="left"><span>Размещение рекламы</span></div>
  <div class="right"><span>1300 руб</span></div>
</div>
body{
  margin: 0;
}
.wrap{
  display: flex;
  justify-content: center;
  background: url(http://placekitten.com/1920/100) no-repeat center;
  height: 100px;
}
.left{
  display: flex;
  align-items: center;
  flex-grow: 1;
  text-align: right;
}
.left span{
 width: 100%;
 background: rgba(0,0,0,.5);
 padding: 10px 20px ;
 color: #fff;
}
.right{
  display: flex;
  flex-grow: 1;
  margin-left: -10px;
}
.right span{
  align-self: center;
  background: #0cc;
  padding: 10px;
  border-radius: 10px;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
8 часов назад, VasyOK{!} сказал:

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/ 

    Да 

download (1).png

    почти получилось - https://jsfiddle.net/spdif/ecanybgo/2/ 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
2 часа назад, spdif сказал:

почти получилось

Что значит "почти получилось"? Вам было предоставлено рабочее решение, что не так? Если есть какие-то дополнительные условия - озвучьте их.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

AlexZaw, ваш вариант - подходит

https://jsfiddle.net/PlayboyZP/rw9vcau0/

А как поступить если нет этой строчки (?):

<div class="right"><span>1300 руб</span></div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
52 минуты назад, VasyOK{!} сказал:

А как поступить если нет этой строчки (?):

Добавить ее.  Ну или воспользоваться псевдоэлементом :before или :after

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

"Добавить ее." :)) Имею ввиду, вариант, когда она не нужна. Просто "Размещение рекламы".

":before или :after" - да мне подсказали, как через псевдоэлементы. Так что уже знаю. А без них, как-то можно?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Во первых, с наступающим Вас! * НГ * с наилучшими пожеланиями 🎅 ))

далее по списку: 

16 часов назад, AlexZaw сказал:
  1. Что значит "почти получилось"?
  2. Вам было предоставлено рабочее решение, что не так?
  3. Если есть какие-то дополнительные условия - озвучьте их.

Человек VasyOK{!} писал: 

30.12.2018 в 02:36, VasyOK{!} сказал:

Как сделать так:

c53264897aaa.png

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/

Он предоставил визуальный пример того что ему требуется, 

    и дал линк на тот результат который получился у него в песочнице

        а получилось у него так: 

30.12.2018 в 02:36, VasyOK{!} сказал:

    НО, результат то! не совсем тот получился. 

        далее я ответил тому (!внимание) кто задавал вопрос.?. 

            написав что мол 

19 часов назад, spdif сказал:

  Да 

download (1).png

    почти получилось - https://jsfiddle.net/spdif/ecanybgo/2/ 

    и вернул линк на его пример, 

        изменив в стилях значения в трех атрибутах 

        и более ни чего!!)

            А вот про рабочее решение которое якобы мне было предоставлено, 

                первый раз слышу...             Вы о чем это?!!...              Я не в курсе просто))

...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
2 часа назад, spdif сказал:

А вот про рабочее решение которое якобы мне было предоставлено

Пардон, не обратил внимания на имя автора ответа :) Вас тоже с наступающим!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас