• 0
Launder

Спозиционировать элемент в нужное место по горизонтали, не выводя из потока

Вопрос

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).

Для второго элемента указано свойство:

        padding-left: calc(50% - 15rem);    /* тут может быть и 150px*/

При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),

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

И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.

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

В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.

В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево:rolleyes:.

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

Каким образом приручить эти элементы?

 

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


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

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

  • 0

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Ну или не мучиться, а выравнивать его с помощью js ?

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

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


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

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Да нет, понятно, что так можно сделать, да и много как по-другому сделать можно. Тут вопрос именно в том, чтоб html трогать по-минимуму и разобраться в возможностях CSS.

 

12 часов назад, AlexZaw сказал:

Ну или не мучиться, а выравнивать его с помощью js ?

Ну так можно наверняка.

 

12 часов назад, AlexZaw сказал:

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

В этом Вы абсолютно правы. Надеяться на контент, в любом случае, не вполне правильный подход, на другой ОС, в другом браузере, что-то может отобразиться немного по-другому. Но с другой стороны, если наверняка знаешь, что контент будет меняться редко, то, наверное, можно воспользоваться этим костылём...

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


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

Опираясь на свои знания css, на мой взгляд, самый адекватный способ это менять маржин у block-center с помощью js, хотя вчера видел пару игр  на чистом html+css, и теперь не уверен что вашу задумку нельзя реализовать с помощью css :)

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


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

Вот и я не уверен. Вот и ломаю теперь голову:unsure: Возможно Вы и правы, и оно того не стоит...

Изменено пользователем Launder

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


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

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

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

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

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

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

Войти

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

Войти сейчас

  • Похожие публикации

    • Автор: dsljkeee
      Доброго времени суток, как можно осуществить данную проблему?
      Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство? 

    • Автор: YurikMurik
      Добрый день, форумчане! Необходимо сверстать данную страничку.
      Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). 
      Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?

    • Автор: Masya
      Здравствуйте,  я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
      Ниже HTML и CSS код:
      <header>
                  <div class="header">
                      <div class="wrap">
                          <div class="logo header_left">
                              <a href="#">
                                  <img src="images/logo.png" alt="Логотип">
                              </a>
                          </div>
                          <div class="header_right">
                              <div id="topmenu">
                                  <p>
                                      <a href="#">About</a>
                                      <span>/</span>
                                      <a href="#">Blog</a>
                                      <span>/</span>
                                      <a href="#">Contact</a>
                                      <span>/</span>
                                  </p>
                              </div>
                              <div id="social">
                                  <a class="twitter" href="#"></a>
                                  <a class="vimeo" href="#"></a>
                                  <a class="facebook" href="#"></a>
                                  <a class="instagram" href="#"></a>
                                  <a class="dribbble" href="#"></a>
                                  <a class="reddit" href="#"></a>
                              </div>
                          </div>
                      </div>
                  </div>
              </header>
      ——————————————————————————————————————————————————--
      #container {
          margin: 0 auto;
      }
      #container .header {
          border-bottom: 1px solid #bfbfbf;
          box-shadow: 0 0 3px #dbdbdb;
          padding-top: 6px;
      }
      #container .header .wrap {
          display: flex;
          justify-content: space-between;
          padding: 0;
      }
      @media (max-width: 650px) {
          .header .wrap {
              flex-direction: column;
              padding: 0 3px;
              margin-bottom: 5px;
          }
          
          .header #socials {
              margin-left: 5px;
          }
          
          .header #socials a:last-child {
              margin-right: 2px;;
          }
      }
      #container .header .header_left {
          align-self: center;
      }
      #container .header .header_right {
          display: flex;
          justify-content: space-between;
      }
      #container #topmenu {
          color: #8e8e8e;
          padding-top: 6px;
      }
      #container #topmenu a {
          color: #8e8e8e;
          text-decoration: none;
      }
      #container #topmenu a:hover {
          color: #dd5555;
      }
      #container #social {
          display: flex;
          margin-left: 20px;
          margin-right: 50px; 
      }
      #social a {
          margin-top: 9px;
          margin: 8px  10px;
          
      }
      .twitter {
          background: url("../images/twitter_un.png") no-repeat;
          height: 11px;
          width: 13px;
          cursor: pointer;
      }
      .twitter:hover {
          background: url("../images/twitter.png") no-repeat;
          height: 11px;
          width: 13px;

      .dribbble {
          background: url("../images/dribbble_un.png") no-repeat;
          height: 13px;
          width: 13px;
          cursor: pointer;

      .dribbble:hover {
          background: url("../images/dribbble.png") no-repeat;
          height: 13px;
          width: 13px;

      .vimeo {
          background: url("../images/vimeo_un.png") no-repeat;
          height: 12px;
          width: 13px;
          cursor: pointer;

      .vimeo:hover {
          background: url("../images/vimeo.png") no-repeat;
          height: 12px;
          width: 13px;

      .facebook {
          background: url("../images/facebook_un.png") no-repeat;
          height: 13px;
          width: 7px;
          cursor: pointer;

      .facebook:hover {
          background: url("../images/facebook.png") no-repeat;
          height: 13px;
          width: 7px;

      .instagram {
          background: url("../images/instagram_un.png") no-repeat;
          height: 12px;
          width: 12px;
          cursor: pointer;

      .instagram:hover {
          background: url("../images/instagram.png") no-repeat;
          height: 12px;
          width: 12px;

      .reddit {
          background: url("../images/reddit_un.png") no-repeat;
          height: 11px;
          width: 13px;
          cursor: pointer;

      .reddit:hover {
          background: url("../images/reddit.png") no-repeat;
          height: 11px;
          width: 13px;

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы