hike

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

Здравствуйте! Проблема в том, что фон flex-элемента занимает по ширине окно браузера, а содержимое блока flex (при горизонтальной прокрутке вправо) остается без фона. Почему это происходит и как мне исправить? Мой пример: https://jsfiddle.net/edx5o927/

4 часа назад, wwt сказал:

background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

можно подробнее: что вместо многоточия написать для прямоугольного треугольника?

8 часов назад, Vlad_P сказал:

ну да, тоже верно. а в случае container-fluid менее 1200 использовать vw

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

К сожалению, не подойдет, так как родитель - это блок, а не весь браузер.

Видела, как делают трапецию двумя линейными градиентами.

Может быть, треугольник тоже можно сделать с помощью градиентов?

Здравствуйте!

Увидела в интернете множество рецептов как сделать элемент с нулевой шириной и высотой и широкими прозрачными границами, чтобы получился треугольник, например здесь https://css-tricks.com/examples/ShapesOfCSS/

Проблема в том, что такой треугольник не растягивается. Границе нельзя задать значение в процентах от ширины родителя.

Мне же нужно, чтобы Triangle Top Left тянулся как фоновый рисунок треугольника, только без рисунка, средствами css.

Как это сделать?

Все-таки никак не пойму, отчего футер перекрывает контент при уменьшении окна браузера в моем примере http://plnkr.co/edit/Fec2pBVzFcuKVQB8Zeea?p=preview , а в примере-оригинале не перекрывает http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/ Я добавила все-лишь несколько ничего не значащих классов и перенесла относительное позиционирование с элемента html на элемент div.col-md-three. Больше ничего не делала, а поведение так разительно отличается. Почему?

Вот что представляет из себя карточка https://plnkr.co/edit/rEvO7fK4DhJ7zC8j41Y7?p=preview

Цитата

 я бы делал через обработчик click который бы проверял по какому элементу произошел клик

Как это сделать?

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

13 часа назад, Switch74 сказал:

чтобы пункты меню не перекрывались, можно для выпадающего меню сделать отступ снизу равный этому элементу

Не помогло. http://plnkr.co/edit/7sz7xL8KqXGwkkR7wnZD?p=preview

.navbar{
  padding-bottom:60px;
}

Цитата

чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed

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

Цитата

если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative;

Тогда при уменьшении кол-ва пунктов меню, последний пункт меню не будет прижат к низу экрана, а будет прилеплен к контенту.

Цитата

и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

Такой подход к созданию меню применяют https://htmlacademy.ru/courses/50 и https://getbootstrap.com/docs/3.3/components/#navbar

А как бы Вы сделали?

Пытаюсь прижать к низу элемент навигационного меню.

Получилось абсолютно позиционировать эл-т относительно .navbar вот так http://plnkr.co/edit/q3nTJA48nmEgzjGG1LE1?p=preview

Однако, при уменьшении окна либо увеличении контента (кол-ва пунктов меню) http://plnkr.co/edit/3RFQhisLDGvGDKrZ535g?p=preview, абсолютно позиционированный пункт меню перекрывает соседние пункты. Как исправить такое поведение?

И еще вопрос. Для экранов планшетов и мобильных устройств (ширина < 992px) при разворачивании меню абсолютно позиционированный пункт перепрыгивает от конца контента к низу страницы. Визуально происходит передергивание изображения. Можно ли этого избежать?

AlexZaw, не поняла Ваш ответ.

Здравствуйте! Здесь http://htmlbook.ru/blog/kartinka-vmesto-chekboksa описан способ кастомизации чекбокса, и в первом же комменатрии спрашивают, куда тогда выводить текст метки. У меня тот же вопрос, а текст метки как вывести, если label используется под кастомизацию?

Есть много способов вертикального центрирования, описанных здесь http://learn.javascript.ru/css-center

Но мне они не подходят.

У меня есть иконка 90x90 и центрировать относительно нее 1 строку не проблема, но когда я стараюсь отцентрировать 2 строки (в одном параграфе, их разделяет br), ничего не получается.

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

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

Здравствуйте, форумчане! Не могу сообразить, каким способом сверстать вот такой переключатель (http://wdfiles.ru/9mbT). Есть идеи?

Вот статья http://htmlbook.ru/samhtml5/formy/adres-elektronnoi-pochty для типа email браузер сам обводит красным при несоответствии и выводит ошибку. Для других типов инпутов, например type=tel это сделать как-то возможно?

Привет. Есть ли возможность только с помощью html5/css3 обводить поля красным/зеленым в зависимости от состояния инпута, не используя обработку событий с помощью javascript? Подскажите, как это сделать, как определить состояние инпута при помощи html5?

Всем привет. Такой вопросик: где можно почитать что-нибудь о том, как верстать e-mail рассылки. Буду признательна за ответ.

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

Помогите,кому несложно,объясните,меня на собеседовании спросили, могу ли я с нуля поднять фронтенд под новый проект. Что значит поднять фронтенд? Какие инструменты нужно знать и использовать для этого? Буду Вам очень признательна за любую помощь в данном вопросе.

Можно ли заменить именно стрелочку у раскрывающегося поля на другую стрелку-картинку?

нет, я про аналог настройки (только нужно для всех браузеров)
Псевдоэлемент ::-ms-expand

Подскажите, есть ли простой способ изменить стандартный флажок у раскрывающегося списка картинкой стрелочки?

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

Здравствуйте! Как отобразить содержимое блока непрозрачным, а фон блока задать полупрозрачным?