Задать вопрос

Полина

Верстальщик
Ответы пользователя по тегу CSS

  • Как заставить checkbox работать?

    @paulinekorkina
    Верстальщик
    Чекбокс не работает из-за e.preventDefault(); (7 строчка). Но поскольку от запрета дефолтного поведения лучше не отказываться, предлагаю вам забить на чекбоксы и сделать следующим образом: https://jsfiddle.net/j5hxngcz/
    Т.е. переключать класс у лейбла и поворачивать кнопку в зависимости от класса.
    Тем более что сортировка работает не только по клику на лейбл, но и на слова "Цене" и "Комнатам", которые не являются частью лейбла.

    Либо можно ловить не клик на ссылку, а событие change чекбокса, но первый вариант лучше.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как можно нарисовать кривую линию от точки А в точку Б?

    @paulinekorkina
    Верстальщик
    Если кружочки будут статичными, лучше не париться и сделать пнг.
    А если динамичные, т.е. их положение/количество будет меняться, то примерно так jsfiddle.net/5g9z7t0o/2
    Только будут не ломаные кривые, а безье, но принцип тот же.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как сделать обрезание картинки в блоке?

    @paulinekorkina
    Верстальщик
    Есть еще вариант кроме бэкграунда, если картинка обязательно должна быть img. Правда, этот способ не работает в ИЕ11-. Родителю задаете размеры - в пикселях, процентах, в чем угодно. Внутрь помещаете img со следующими стилями:

    img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}


    Но вообще я тоже предпочитаю не тег img, а свойство бэкграунд, как вам написали в предыдущем ответе, т.к. им куда удобнее управлять и он отлично работает в ИЕ.
    Ответ написан
    Комментировать
    Комментировать

  • Сайт может быть шире чем 1920px?

    @paulinekorkina
    Верстальщик
    Вопрос хороший, на самом деле. 4к мониторы набирают популярность, и у нас уже двое клиентов за последние пару месяцев заказали сайты с адаптацией под 4к. В первом случае дизайнер сделал перестроение блоков, во втором - тупо увеличил все вдвое (дизайнеры разные были:)). Второе я еще не делала, но чую, что геморроя будет немало, т.к. верстаю не с нуля, а переверстываю готовое.
    Так что да, сайт очень даже может быть шире, чем 1920.
    Ответ написан
    8 комментариев
    8 комментариев

  • Как правильно зациклить данную анимацию?

    @paulinekorkina
    Верстальщик
    Попробуйте в каждом keyframes оставить "место" под другие анимации. В вашем случае, конечно, придется дофига чего учесть, потому что анимация большая и сложная, но принцип такой: https://jsfiddle.net/rs8rt81t/
    Ответ написан
    Комментировать
    Комментировать

  • Сверстать кнопку в письме?

    @paulinekorkina
    Верстальщик
    Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.

    Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки - просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:

    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0; background: #0382Ce; border-radius: 2px;">
  <tr>
  	<td width="19" style="width: 19px;">&nbsp;</td>
        <td style="height: 38px;">
            <a href="#" style="height: 38px; text-align: center; font-family: Arial, Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 38px; text-decoration: none; padding: 0; display: block; border-radius: 4px;">
                 <font face="Arial, sans-serif" color="#ffffff" style="font-size: 12px; line-height: 38px;">
                           <span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 12px; line-height: 38px; font-weight: bold; letter-spacing: 0.05em; -webkit-text-size-adjust:none;">ПОДРОБНОСТИ&nbsp;НА&nbsp;ПЛОЩАДКЕ</span>
                </font>
             </a>
	</td>
	 <td width="19" style="width: 19px;">&nbsp;</td>
  </tr>
</table>
    Ответ написан
    Комментировать
    Комментировать

  • Какие тестовые задания дают на верстальщика?

    @paulinekorkina
    Верстальщик
    Я выполняла подобное тестовое задание - лендинг с адаптивом, дали макет psd. Написали, что время - 8 часов, но я возилась намного дольше.
    Взяли. Работаю.

    В то время нужен был любой опыт, так что я не парилась: не взяли бы - положила в портфолио и пошла дальше искать.
    Ответ написан
    1 комментарий
    1 комментарий