Поиск по сайту

Результаты поиска по тегам 'margin'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Фриланс
    • Коммерческие услуги
    • Ищу работу
    • Предлагаю работу

Календари

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Блоги

  • CMS (Системы управления контентом)
  • Руководство верстальщика
  • Блог htmlforum.io

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу

Искать результаты в...

Искать результаты, содержащие...


Дата создания

  • Начать

    Конец


Последнее обновление

  • Начать

    Конец


Фильтр по количеству...

Зарегистрирован

  • Начать

    Конец


Группа


Web site


ICQ


Jabber


Skype


Откуда


Интересы

Найдено 3 результата

  1. Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за 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 остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево. В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"... Каким образом приручить эти элементы?
  2. Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в 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; }
  3. В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.