Okieazy

Как сверстать

Recommended Posts

Как правильно сверстать данный элемент?
Если делать через :before/:after, то с адаптивом возникают проблемы, так как чтобы заадаптивить, приходится ловить пиксели, на котором нужно менять позицию данного элемента. Я не думаю, что это правильное решение

.Screenshot_7.thumb.png.b758b3db583f943c05751123fa93c217.png

Share this post


Link to post
Share on other sites

а что мешает поставить hr
какие проблемы с адаптивом при :before/:after?

Share this post


Link to post
Share on other sites
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);

Решит ваши проблемы

Share this post


Link to post
Share on other sites
12 minutes ago, Switch74 said:

а что мешает поставить hr
какие проблемы с адаптивом при ?efore/:after?

Когда экран становится уже, текст начинает "перескакивать" на следующую строку, на том самое место, где находится линия.

Share this post


Link to post
Share on other sites

а линия разве не может перескакивать на следующую строку, она ведь находится как бы в этом же блоке что и текст и как я понимаю текст должен отталкивать линию ниже

Share this post


Link to post
Share on other sites
15 minutes ago, Switch74 said:

а что мешает поставить hr
какие проблемы с адаптивом при ?efore/:after?

Я сделал с помощью hr.
Спасибо за совет.

Just now, Switch74 said:

а линия разве не может перескакивать на следующую строку, она ведь находится как бы в этом же блоке что и текст и как я понимаю текст должен отталкивать линию ниже

Я не знаю.
Она находится в абсолютном положении, не двигается с места.
 

  &__title
    position: relative
    margin-bottom: 50px
    font-family: Playfairbold, arial, sans-serif
    font-size: 2.2em
    color: #fff
    text-transform: capitalize

    &:after
      content: ''
      position: absolute
      top: 75px
      left: 50%
      display: block
      width: 50px
      height: 1px
      background-color: $blue
      transform: translateX(-50%)

 

Share this post


Link to post
Share on other sites

здесь как больше нравится, если при определенных условиях линия должна исчезать, то лучше через after
если нет, то можно и hr

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,251
    Total Members
    3,128
    Most Online
    shottywork
    Newest Member
    shottywork
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Создали большой гибкий сайт на тематику "Продажа лекарств от Гепатита" Сделано: - С нуля разработана концепция и структура сайта;
      - Разработан стильный и современный дизайн;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Натянули на Wordpress;
      - Подобрали хостинг и домен для клиента, установили и настроили сайт.
      - бонусом предоставили рекомендации по оптимизации и раскрутке сайта от нашего СЕОшника Клиент получил гибкую платформу, которая максимально удобная как для администратора, так и для покупателей сайта.
      Наполнять сайт текстами клиент предпочел сам.
      Сделали для клиента текстовую, а также видео инструкцию по управлению сайтом:
      https://www.youtube.com/watch?v=PREmX06KayQ
      https://www.youtube.com/watch?v=Kbh4CW4pui4 Ссылка на сайт http://sofosbuvir-daklatasvir.ru/ Срок изготовления сайта - 1 месяц. Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин, группа в соц сетях. 
      По невысокой цене и разумные сроки Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Внимание - Акция - от AlfaHoster!!

      Представляем наш новый тариф - Бесплатный Хостинг!
      Параметры тарифа: SSD -150Mb, RAM - 128Mb, MySQL 5.5.6 -2
      Все подробности параметров тарифа смотрите на страничке сайта хостинг-компании AlfaHoster
      Теперь практически любой может воспользоваться услугами хостинга - бесплатно.
      Поспешите воспользоваться моментом - и протестировать наши услуги, акция ограничена во времени!
      _________________
      AlfaHoster.com - надежный и недорогой хостинг для сайтов
    • Не соглашусь с Вами. Вот вам 2 очень простых примера. LESS: @color: red; a { color: @color; } @color: blue; Итог: a { color: blue; }   SASS: $color: red; a { color: $color; } $color: blue; Итог: a { color: red; } Разница в обоих результатах совершенно разная. Этим успешно можно пользоваться. Вариант с LESS шикарно решает задачи, когда требуется "сквозная" конфигурация проекта (внесение изменений в конфигурацию на любом этапе выполнения). Вариант с SASS потребует от разработчика в начале определять переменные, и лишь потом ими пользоваться, не имея возможности влиять на их значение в любой момент выполнения.
  • Popular Contributors