Верстка подвала сайта HTML+CSS.

30 комментариев

1. VivaAnnet

   13.04.2015

   А можно расположить в одну строку любое количество элементов, при условии, что ширина контейнера меньше суммы ширины всех элементов?

   Ответить
   • artmax2

     13.04.2015

     Можно
     white-space: nowrap; Это прекрасно работает для текста. Чтобы это сработало с любым объектом, надо делать объекты строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово. Но нужно обращать внимание на baseline (вертикальное выравнивание). Также не забывайте, что все текстовые разделители (пробелы, переносы строк текста) конвертируются в один пробел между inline и inline-block.
     http://jsfiddle.net/dzytwjL1/

     Ответить
2. Владимир, Red Keds studio

   13.04.2015

   maximum-scale=1.0
user-scalable=no
   почему не добавляете? а-я-яй!

   Ответить
   • your-scorpion

     13.04.2015

     хм. Эти директивы запретят пользователю масштабировать страницу с мобильных устройств. Как специалист по юзабилити, я категорически против такого подхода. Я использую maximum-scale=1.0, user-scalable=no, когда верстаю страницы под мобильные приложения. В обычной веб-верстке не вижу смысла ставить ограничения для пользователя.

     Лучше использовать content="width=device-width; initial-scale=1.0" — приказывает браузеру использовать ширину девайса как ширину окна.
     А user-scalable=no — лучше не трогать.

     Есть такой нюанс, что iOS сама приближает контролы, если размер текста в них меньше 16px. Фиксится таким путем:
     input {
font-size: 16px;
}

     Если дизайнер воспротивится такому размеру шрифта, то maximum-scale=1.

     Ответить
3. em.editor

   16.04.2015

   Скажите, как я могу удалить долбанную функцию X-Pingback, мне её вирус оставил! уже три недели мучаюсь!!!

   Ответить
   • your-scorpion

     16.04.2015

     В function.php добавить:

     1 2 3 4 5 6 7

     function remove_x_pingback($headers) { unset($headers['X-Pingback']); return $headers;} add_filter('wp_headers', 'remove_x_pingback');   //И больше не ставить плагинов со сторонних ресурсов и ворованных тем...

     function remove_x_pingback($headers) { unset($headers['X-Pingback']); return $headers; } add_filter('wp_headers', 'remove_x_pingback'); //И больше не ставить плагинов со сторонних ресурсов и ворованных тем...

     Ответить
4. inoe slovo

   15.05.2015

   Как использовать Edge Reflow при интеграции с фотошопом?

   Ответить
   • your-scorpion

     15.05.2015

     1. Откройте PSD макет в фотошопе и добавьте суффиксы ‘.png’ и ‘.jpg’ к слоям, группам и смарт объектам. Далее зайдите в меню File — Generate — Edge Reflow Project.
     2. Откройте Photoshop Connect panel в Edge Reflow CC и включите Photoshop Asset Sync.
     

     Ответить
5. Linnder_design

   18.05.2015

   Можете человеческим языком объяснить разницу между position: absolute | fixed | relative | static ?

   Ответить
   • your-scorpion

     18.05.2015

     Постараюсь)
     Static — отображение по умолчанию. Используется в медиа-запросах.
     
     В примере применены атрибуты width:15%; и height:130px; а отступы сверху и слева по 10px. Именно такие отступы и будут сохранены относительно родителя.

     ---

     Если указать этому же блоку absolute, то позиционирование станет абсолютным относительно родителя или всей страницы. Если дополнительно сместить элемент по горизонтали, получаем горизонтальную прокрутку. Используется для элементов, которые нужно «прибить» к родителю, например какие-нибудь надписи на картинках или стрелки на слайдере.

     ---

     relative задает положение элемента относительно его исходного места, хорош для получения pixel perfect. В давние времена использовался для анимации, сейчас его заменил transform: translate(). В отличии от absolute, из потока не отключается, точнее relative занимает пространство, сдвигает только изображение блока. Благодаря чему не меняет размеры страницы, так как смещает элемент относительно предыдущего положения.

     ---

     fixed зафиксирует элемент, не позволяя его скролить. Система координат начинается от крайней точки браузера, именно через fixed верстаются рекламные объявления.
     

     ---

     Важно при этом понимать, как работает свойство display. Оно определяет, как элемент должен быть показан в документе. Если указать атрибут block, то объект станет блочным. Блочный элемент образует одну прямоугольную область, перед и после которой строка переводится на новую. А вот none просто не отображает элемент. Как думаете, что будет, если повесить на div display:block, а на ховер: display:none.

     Ответить
     • Алексей Кудря

       30.10.2017

       Как центрировать?

       Ответить
       • your-scorpion

         30.10.2017

         display: flex; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */

         display: flex; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */

         или

         margin-left: auto; margin-right: auto; //или margin: 0 auto

         margin-left: auto; margin-right: auto; //или margin: 0 auto

         Ответить
6. Александр Мыщцын

   27.05.2015

   Как верстать рамку , чтобы она ‘расступалась’ перед текстом, который лежит поверх рамки?

   Ответить
   • your-scorpion

     27.05.2015

     В Госуслугах России, на веб-страницах для мобильных приложений, верстал вот таким способом:
     http://codepen.io/your-scorpion/pen/zGoLNa
     Вроде до сих пор работает, все тесты проходили корректно.

     Ответить
7. Kiselev Pavel

   09.06.2015

   1. Как убрать подсветку полей?
   2. Как реализовать перенос слов?

   Ответить
   • your-scorpion

     09.06.2015

     1.

     input:focus,
     textarea:focus {
     outline: none;
     } 

     2.

      .break-word {
             word-wrap: break-word;
     } 

     Ответить
8. Creep Creaper

   29.06.2015

   У вас проскальзывает единица измерения пиксели в верстке. А как же учет ppi устройства?

   Ответить
   • your-scorpion

     29.06.2015

     В некоторых ситуациях можно положиться на устройство и позволить ему самому решать, в каком масштабе показать пиксель, для этого существует параметр devicePixelRatio. Если этот параметр равен единице, то пиксель показывается в масштабе 1 к 1. Если равен двойке, то будет отрисован квадрат 2×2 пикселя. Ведь сайты на ретине не уменьшаются в два раза, они выглядят как на обычном дисплее. А вот с картинками ситуация куда сложнее:

     div { background: url(ic_menu.png) no-repeat center top; }   @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }</div { background: url(ic_menu.png) no-repeat center top; }   @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }

     div { background: url(ic_menu.png) no-repeat center top; } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }</div { background: url(ic_menu.png) no-repeat center top; } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }

     Картинки программно масштабируются, вот список возможных алгоритмов. Какой выбрать алгоритм — решать вам. Но лучше держать набор картинок разного разрешения.

     div { background: url(ic_menu.png) no-repeat center top; }   @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }</div { background: url(ic_menu.png) no-repeat center top; }   @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }

     div { background: url(ic_menu.png) no-repeat center top; } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }</div { background: url(ic_menu.png) no-repeat center top; } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and ( -moz-min-device-pixel-ratio: 2), screen and ( -o-min-device-pixel-ratio: 2), screen and ( min-device-pixel-ratio: 2) { div { background-image: url(ic_menu@2x.png); background-size: 100%; } }

     Ответить
9. Игорь Симакин

   28.10.2015

   Как скачать сайт?

   Ответить
   • your-scorpion

     28.10.2015

     Если в ознакомительных целях, то wget (не забудьте прописать путь), или Sitesucker.
     Если вы сомневаетесь в ознакомительных целях вашего заказчика, который скачивает демонстрационную верстку, то CSS подгружаем через абсолютный путь http:// с вашего сервера. Можно использовать минификацию HTML, CSS и Javascript. Мелочь, а приятно.

     Ответить
10. Artem Originative

    28.09.2017

    Добрый день.
    Есть ли быстрый способ добавить в CMS защитную штуку на сайт с уникальным контентом, которая к копированному тексту прибавляет ссылку на страницу, с которой текст был скопирован?

    Ответить
    • your-scorpion

      28.09.2017

      Написал специальный JS код для вас.

      ▪ innerHTML это свойство умеет брать строку с HTML-кодом.
      ▪ getSelection и getRangeAt первый возвращает то что шас выделено (объект selection), второй возвращает объект range.
      ▪ document.createElement создает элемент который указан в скобочках.
      ▪ setTimeout нужен для вызова функции для удаления лишнего в нужное время, т.к. весь код выше добавляет тэг с выделенным текстом в документ.
      ▪ document.body.removeChild разрывает все связи между удаляемым узлом и его родителем.

      Ответить
11. Konstantin Klepikov

    18.04.2018

    Что принято делать со скроллом в веб-страницах, как его должен отдавать дизайнер?

    Ответить
    • Цветков Максим

      18.04.2018

      На маке и в опере скролл толшиной 15px, в Edge 16px, и 17px в остальных современных браузерах. Это важно, т.к. хорошие сайты учитывают толшину полоски скролла при рендере и для этого приходится вычислять ширину полоски. В MaсOS полоска скролла отключена по дефолту и появляется только при скролле.
      

      Если скролл нужно спрятать, то .container::-webkit-scrollbar { display: none; }. Если же его нужно украсить, то webkit это умеет.

      На мобильных телефонах важно не забывать про интертный скролл не только на всей странице, но и внутри блоков.

      Ответить
12. Алексей

    04.10.2019

    Здравствуйте! можно ли заложить ориентацию страницы?

    Ответить
    • Цветков Максим

      04.10.2019

      Обычно это делается по orientationChange. Можно после него вызывать что-нибудь вроде app.resizeCanvas. Ориентация экрана прописывается в манифесте, но это только для PWA. Но orientationChange очень нестабильный и лучше его перепроверять на изменение размера каждые N мс.

      Ответить
13. Виктория

    20.02.2021

    Привет! используя канвас, трудно избавиться от скроллов. Есть рекомендации какие?)

    Ответить
    • Цветков Максим

      20.02.2021

      Я бы рекомендовал прописывать следующие параметры (с PIXI):
      CSS:
      padding: 0;
margin: 0;
overflow: hidden;

      JS PIXI:

      class App { constructor() { this.renderer = new PIXI.Renderer ({ width: window.innerWidth, height: window.innerHeight, backgroundColor: 0x232323 }); this.ticker = new PIXI.Ticker(); this.stage = new PIXI.Container(); this.loader = new PIXI.Loader();   this.ticker.add(this.render.bind(this), PIXI.UPDATE_PRIORITY.LOW); this.ticker.start(); }   render() { this.renderer.render(this.stage); }   get view () { return this.renderer.view; }   destroy() { this.renderer.destroy(); this.ticker.stop(); } }   // const app = new App(); document.getElementById("app").appendChild(app.view);

      class App { constructor() { this.renderer = new PIXI.Renderer ({ width: window.innerWidth, height: window.innerHeight, backgroundColor: 0x232323 }); this.ticker = new PIXI.Ticker(); this.stage = new PIXI.Container(); this.loader = new PIXI.Loader(); this.ticker.add(this.render.bind(this), PIXI.UPDATE_PRIORITY.LOW); this.ticker.start(); } render() { this.renderer.render(this.stage); } get view () { return this.renderer.view; } destroy() { this.renderer.destroy(); this.ticker.stop(); } } // const app = new App(); document.getElementById("app").appendChild(app.view);

      И поместим наш canvas в фиксированный размер. Сам canvas будет ресайзиться и всегда будет влезать в окно браузера. Да, пиксели будут не 1 к 1, значит для пиксель-арта способ не подойдет.
      #app {
display: Flex;
justify-content: center;
height: 100%;
}

      canvas {
height: 100%;
}

      Ответить
14. Алеся

    18.03.2021

    Привет! как можно в вебе разметить картинку кликабельными областями?

    Ответить
    • Цветков Максим

      18.03.2021

      Есть отличный сервис image-map.

      Ответить