Jump to content
  • Sign Up
VeraVostro

Как расположить блоки таким образом (фон блоков выходит за пределы wrapper)?

Recommended Posts

Добрый день!

Подскажите, как расположить блоки таким образом как на картинке.

Текстовые блоки, я думаю, можно разместить с помощью Masonry. И напрашивается обернуть эти блоки во #wrapper, разместить его посредине...... Но как быть с моментом что в таком случае фон блоков выходит за пределы #wrapper? Тут же уже не получится задать background для body и размещать весь контент внутри wrapper?....

Untitled-1.jpg

Share this post


Link to post
Share on other sites
1 час назад, VeraVostro сказал:

И напрашивается обернуть эти блоки во #wrapper, разместить его посредине...... Но как быть с моментом что в таком случае фон блоков выходит за пределы #wrapper?

а откуда такое предположение?

Share this post


Link to post
Share on other sites

Предположение что нужно обернуть весь контент во #wrapper? Я считаю что это имеет смысл, чтобы по бокам wrapper остались поля, которые будут уменьшаться, а потом и пропадут в процессе уменьшения экрана.

Вы считаете что это не нужно? Как нужно сделать по-вашему? Я с удовольствием узнаю все мнения и предложения по своему вопросу.

Share this post


Link to post
Share on other sites
7 часов назад, alanreid сказал:

Загрузил код на Github и на Codepen на выбор.

С удовольствием посмотрел бы на полный шаблон.

 

Alanreid, большое спасибо за такой обстоятельный ответ и помощь ))

Прикрепляю полный макет (к сожалению, в прошлый раз при отправке обрезался почему-то).

Но там основная проблема, которую я не знаю как решить - это чтобы при уменьшении размера окна на экране оставалась только средняя часть с контентом, а боковые поля (без текста) постепенно уменьшались бы и потом вообще пропадали на небольшом экране.

Untitled-1.jpg

Share this post


Link to post
Share on other sites
3 часа назад, VeraVostro сказал:

Alanreid, большое спасибо за такой обстоятельный ответ и помощь ))

Прикрепляю полный макет (к сожалению, в прошлый раз при отправке обрезался почему-то).

Но там основная проблема, которую я не знаю как решить - это чтобы при уменьшении размера окна на экране оставалась только средняя часть с контентом, а боковые поля (без текста) постепенно уменьшались бы и потом вообще пропадали на небольшом экране.

Untitled-1.jpg

Понял. Если какие-либо вопросы появятся — пиши в facebook. Здесь, оказывается, количество личных сообщений ограничено.

Edited by alanreid
отсутствие тире

Share this post


Link to post
Share on other sites
В 11/22/2017 в 14:03, monochromer сказал:

Сделал демку - показывает только принцип: 

http://jsbin.com/rohohagesi/edit?css,output

  1. Правило height: 100%; так не работает.
  2. Картинку, выравненную таким образом, будет сложно расположить, как требуется. Тем более, для данной ситуации лучше всего подходит фон (изображение выполняет декоративную функцию).
  3. При помощи функции calc() и при известной ширине контейнера можно рассчитать точное значение отступов контейнера, либо требуемую ширину картинки и ::before элемента. Но, не думаю, что использование псевдоэлементов является хорошим решением.

Share this post


Link to post
Share on other sites
15 часов назад, alanreid сказал:
  1. Правило height: 100%; так не работает.
  2. Картинку, выравненную таким образом, будет сложно расположить, как требуется. Тем более, для данной ситуации лучше всего подходит фон (изображение выполняет декоративную функцию).
  3. При помощи функции calc() и при известной ширине контейнера можно рассчитать точное значение отступов контейнера, либо требуемую ширину картинки и ::before элемента. Но, не думаю, что использование псевдоэлементов является хорошим решением.

Да, тут много недоработок и спорных моментов. но как уже сказал:

В 22.11.2017 в 16:03, monochromer сказал:

показывает только принцип

Ведь суть в том, чтобы поместить все в центрирующий контейнер, общий для всех секций. Он может быть резиновым с ограничением по max-width или фиксированной ширины.

screen.thumb.jpg.985e92de7ef2766d4b6108228b1bf39f.jpg

Тут писали о решении такой задачи:

https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

Share this post


Link to post
Share on other sites
21 час назад, alanreid сказал:
В 22.11.2017 в 13:03, monochromer сказал:

Сделал демку - показывает только принцип: 

http://jsbin.com/rohohagesi/edit?css,output

  1. Правило height: 100%; так не работает.
  2. Картинку, выравненную таким образом, будет сложно расположить, как требуется. Тем более, для данной ситуации лучше всего подходит фон (изображение выполняет декоративную функцию).
  3. При помощи функции calc() и при известной ширине контейнера можно рассчитать точное значение отступов контейнера, либо требуемую ширину картинки и ::before элемента. Но, не думаю, что использование псевдоэлементов является хорошим решением.

 

4 часа назад, monochromer сказал:

Да, тут много недоработок и спорных моментов. но как уже сказал:

В 22.11.2017 в 13:03, monochromer сказал:

показывает только принцип

Что касается решения вопроса с помощью псевдоэлементов - это первый вариант, который мне на "Тостере" посоветовали. На данный момент - единственный вариант, который справляется со своей задачей. На мой взгляд, вариант с пседоэлементами - немного "костыли", но, повторюсь, единственный и с задачей пока справляется...

Я его уже применила, кому интересно - вот тут можно посмотреть файлы (пока без адаптива). С удовольствием выслушаю комментарии/критику/замечания/мнения....

Я теперь с замиранием сердца жду момента когда все это буду переносить на WP и боюсь что там все это поломается.

Share this post


Link to post
Share on other sites
В 11/24/2017 в 12:51, monochromer сказал:

Да, тут много недоработок и спорных моментов. но как уже сказал:

В 11/22/2017 в 14:03, monochromer сказал:

показывает только принцип

Ведь суть в том, чтобы поместить все в центрирующий контейнер, общий для всех секций. Он может быть резиновым с ограничением по max-width или фиксированной ширины.

Я больше сомневался в том, что фон удастся вытолкнуть за контейнер, таким же образом, как и картинку.  Да и проблема с размещением самого изображения тоже наводила на сомнения. Но все-таки, как оказалось, эти сложности можно обойти.

Мой пример:

Использую все те же псевдо-элементы, но высчитал их ширину (хотя все-равно приходится прятать переполнение (используя overflow: hidden), так как viewport units, в частности, vw не учитывает полосу вертикальной прокрутки. 

Для блоков со сплошным фоном это мало чего меняет внешне, зато, отлично подходит для элементов с изображением на фоне.

https://codepen.io/alanreid/pen/yPEvrG

 

21 час назад, VeraVostro сказал:

Что касается решения вопроса с помощью псевдоэлементов - это первый вариант, который мне на "Тостере" посоветовали. На данный момент - единственный вариант, который справляется со своей задачей. На мой взгляд, вариант с пседоэлементами - немного "костыли", но, повторюсь, единственный и с задачей пока справляется...

Я его уже применила, кому интересно - вот тут можно посмотреть файлы (пока без адаптива). С удовольствием выслушаю комментарии/критику/замечания/мнения....

Просмотрел архив:

  1. Семантика. Отсутствуют элементы section, article, main в надлежащих местах.
  2. Иконки - это декоративный элемент (то есть, не картинка, а фон)  и лучше их все объединить в один спрайт.
  3. В секции видео-рецепты пропущен отступ под иконкой.
  4. Фон для статьи в последней строке можно вытолкнуть за контейнер, вместо абсолютного выравнивания (см. на блок features__img-imitation в моем примере выше).
  5. Советую сетку поменять. Из блоков контент вываливается, так как она на флоатах. Много классов. Используется content-box, в чем я преимуществ не вижу (то есть в расчет ширины блока входит внутренний отступ (padding) в процентах). Лучше свою написать, тем более для тренировки.

Другой способ:

Как вариант, можно использовать функцию calc() и рассчитать правый и левый отступы контейнера и с их помощью растягивать фон для нужных блоков. Правда, есть несколько минусов, но может у кого появятся идеи, как от них избавиться.

Посмотреть можно в моем Github профиле.

 

Edited by alanreid

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Progrmergr
      <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
    • By shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
  • Member Statistics

    46,837
    Total Members
    1,451
    Most Online
    HARDSOFT
    Newest Member
    HARDSOFT
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Ясно, спс. Теперь буду привыкать к такому поведению, хотя на мой взгляд такое поведение пригодится только тем кто случайно нажимает на эту кнопку и соглашается пометить форум прочитанным
    • Как оказалось это обновление CMS, в результате которого именно так ведёт себя эта фича. Вот что сказал саппорт:  
    • Сколько стоит организовать удалённую работу для компании Друзья, если вы готовы перенести работу компании в облако и хотите знать, сколько это стоит, провайдер облачных решений Tucha приводит конкретные расчёты, а кроме того рассказывает: ·       что влияет на стоимость выноса рабочих мест команды в облако; ·       кто и с какими данными может легко работать удалённо; ·       как просто организовать миграцию. А ещё партнёр предлагает выгодные условия на развёртывание удалённого офиса! При заказе акционного сервиса до 14 июля 2020 года включительно получите скидку 200 грн на оплату первого счёта и 1 месяц пользования сервисом TuchaBackup в подарок (в объёме диска заказанного сервиса). Чтобы воспользоваться предложением, обязательно укажите специальный промокод — TD-210-0. Для заказа звоните +380 44 583-5-583 или пишите на sales@tucha.ua. Подробно о решении и условия акционного предложения: https://bit.ly/2BucJaR  Удалённый офис — это стабильная работа всей команды отовсюду и надёжное размещение важных данных. Позаботьтесь о своём бизнесе вместе с Tucha!  
  • Popular Contributors

×
×
  • Create New...