Temiks

Шрифт кастомный, скачанный с Интернета. Называется 'Jikharev'.
В прошлый раз, когда сталкивался с подобным, был другой шрифт, но тогда решили шрифт заменить на похожий с google fonts.

Здравствуйте.
При выделении подключаемый шрифт на сайте рендерится по разному на macOS и Windows.
Браузер Chrome последней версии.
Вот так шрифт отображается на ОС Windows - идеально расположен по центру

А вот так уже на macOS. Шрифт смещен с центра к верху.

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

Спасибо! Работает.

Здравствуйте.
Есть три картинки.

При клике на первую картинку она увеличивается в размерах. (получилось)

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

Как  можно реализовать запрет на изменение блока только с помощью JQ? (Задача по JQ)
Я думаю нужно сделать при клике на 3 картинку свойства !important, но не получается написать его с помощью JQ.
...

<img src="img.jpg" alt="" class="img-circle" id="img-1" ><img src="img.jpg" alt="" class="img-circle" id="img-2"><img src="img.jpg" alt="" class="img-circle" id="img-3">

$('#img-1').click(  function() {    $(this).animate({      height: 250,      width: 250    }, 1000);  });$('#img-2').click(  function() {    $('#img-1').animate({      height: 150,      width: 150    }, 1000);  });$('#img-3').click(  function() {    var gHeight = $('#img-1').height();    var gWidth = $('#img-1').width();     // а тут нужно дописать то, чего я не знаю  });

Если правильно понимаю, то все изображения нужно поместить в один блок?
А не как сделал я?
 

UPD: Разобрался, спасибо.

<div class="brands-box">  <div class="container">    <div class="row text-center">      <div class="section-title">        <h1>Бренды</h1></div>    </div>    <div class="row">      <div class="slider-brands">        <div class="slider-item">          <img src="assets/img/brands/item-1.jpg" alt="">        </div>        <div class="slider-item">          <img src="assets/img/brands/item-2.jpg" alt="">        </div>        <div class="slider-item">          <img src="assets/img/brands/item-3.jpg" alt="">        </div>        <div class="slider-item">          <img src="assets/img/brands/item-4.jpg" alt="">        </div>        <div class="slider-item">          <img src="assets/img/brands/item-5.jpg" alt="">        </div>        <div class="slider-item">          <img src="assets/img/brands/item-6.jpg" alt="">        </div>      </div>    </div>  </div></div>

Здравствуйте. Подскажите, пожалуйста, как сделать вертикальное выравнивание в списке изображений?
Нужно сделать следующее:

 

p.s делаю слайдом каждое изображение, добавляется обтекание элементу по левому краю float: left

У меня получилось вот так сделать: https://jsfiddle.net/u8bbmqtv/5/
Но есть проблема, я дублировал шапку в html, можно ли сделать как то иначе на жс?

Разбирайтесь)

Спасибо. Только заказчик уже передумал и хочет эффекты fade in, fade out. Я так понял, для этого нужно клонировать меню?

Здравствуйте.
У меня есть два фиксированных меню.
У первого высота 150рх и видно оно сразу на странице, а когда пользователь прокручивает страницу меню уменьшается до 60рх.
Мне нужно  сделать так, что бы маленькое меню выезжало с верху страницы.

Примерно как на этом видео:

upd. Задача немного изменилась, нужен эффект fade in , fade out

Здравствуйте. Кто то сталкивался с подобного рода галереей?
 

--

Пробовал сделать сам, но не получается сделать нижний отступ последующего ряда ромбов.
Нашел решение http://mqchen.github.io/jquery.diamonds.js/, но как я понял, там можно сделать или рамку без отступов, или отступ без рамки. 
Если кто то сталкивался с подобной проблемой и может помочь, буду благодарен

https://jsfiddle.net/Narek_T/srojy7oc/

Спасибо большое!!! У меня получилась лабуда с использованием display: table, table-cell .. куча г*** в общем

Здравствуйте. Как можно выровнять содержимое ссылки по вертикали?

Задача сделать вот это:

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

Здравствуйте.
Использую вот такой скрипт jquery.equalheights.js от автора mattbanks для получения высоты самого высокого элемента.
Мне нужно вызывать эту функцию перерасчета высоты каждый раз, когда пользователь изменяет размер окна браузера. К примеру, переворачивает телефон или планшет..
Я написал вот такой код для этого:
 

$(document).ready(function () {    function heightItemDetect() {        $('.services-list .services-item').equalHeights();    };    setTimeout(heightItemDetect(), 300);    $(window).resize(function () {        heightItemDetect();    });});

Но при изменении размеров окна браузера он не срабатывает. Что я делаю не так?

.cell { display: block;

 display: block; 

@psywalker, спасибо за помощь! Только как быть с адаптивностью если использовать первый вариант с таблицей?

@psywalker, сделал как Вы написали, но у меня получилось тоже самое, что и было раньше. Можете, пожалуйста, написать пример? 

Добавили бы тогда уж до кучи ещё и display: inline-block c display: flex; Ну а если серьёзно, то зачем вам нужны position: relative; и float: left;, если у вас выравнивание происходит в ячейках таблицы, естественно при помощи vertical-align: middle;?

Мне нужно сделать адаптивные колонки, в колонках будет какой-то текст или изображение. Когда пользователь наведет указатель мыши на одну из колонок, то у пользователя должен появится новый блок с различным текстом(в примере это .col-prew) поверх этой колонки.

Пример:

Уберите вот этот код и будет вам счастье:

Спасибо за совет, но получилось не то, что нужно

Здравствуйте. Почему не работает вертикальное выравнивание при абсолютном позиционировании?
Код хтмл:

<div class="col">    <p>Lorem ipsum dolor sit amet..</p>    <div class="col-prew">text prew</div></div><div class="col">    <div class="col-prew">text prew</div></div><div class="col">    <div class="col-prew">text prew</div></div>

Код цсс:

.col {    display: table;    position: relative;    float: left;    width: 33.3%;    height: 250px;    background: red;}.col:nth-child(2n) {    background: green;}.col-prew {    display: table-cell;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: gray;    vertical-align: middle;}

Или же все сразу на http://jsfiddle.net/w9m2gs5g/

Подскажите, пожалуйста, как исправить проблему?

Здравствуйте.
Поделитесь, пожалуйста, опытом, как вы реализовываете подобного рода сетку

п.с. Обратите внимание на соединяющие линии. + адаптив.

1. Все блоки должны тянуться на всю ширину экрана..

2. Используете лишний тег div, можно сразу присвоить этот класс списку ul

3. Далее, полоску вы делаете используя целых 3 div, недавно обсуждалась такая проблема на этом форуме в теме http://htmlforum.ru/index.php?showtopic=53815#entry360498, где хороший вариант предложил Sensei или Great Rash

4. Плохое название класса сделали для кнопки (getcopy), потому что кнопок может быть много на странице и не только с одним текстом get copy. Я бы предпочел называть явным классом, к примеру btn btn-lg и так далее.. Посмотрите, как это реализует bootstrap http://getbootstrap.com/css/#buttons

5. Классы block1, block2, block3 и т.д.. Ни о чем не говорят. Присваивайте явное имя..

6. Опять же очень плохо... А что если я захочу внутри колонки еще div'ы использовать? Так же и в последующих блоках

Опять же советую посмотреть на тот же bootstrap и его реализацию сетки http://getbootstrap.com/css/#grid

7. Я бы сделал их просто картинками, потому что вы подключили много шрифтов, которые нигде на странице больше не используются.. Сейчас же это просто влияет на скорость загрузки страницы.. А изображения можно сжать и они будут весить меньше


8. Замечания на скриншоте ниже

—

Верстка данного макета, к сожалению, получилась намного хуже прошлой.

А сколько у профи уйдёт на вёрстку такого макета примерно? Если качественно и кроссбраузено будет делать.

день-два

Ширина то хоть известна?

Да, вся ширина экрана

Через трансформацию можно получить. http://jsfiddle.net/0o7gtLkj/

Спасибо за помощь, а если в блоке не картинка, а фон? В блоках так же есть текст, кнопки, таблицы и так далее, обычный контент.. Высота блока неизвестна

Можно как то так http://jsfiddle.net/atemiks/wwq6s1hk/
Если правильно понял задачу..

Т.е. уголок должен быть другим изображением?

Нужно вот такое. Что бы блоки были независимыми (картинку привел как пример того, что я хочу получить от блоков)