- 0
-
Similar Content
-
By zeiger2
Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью
background-image: none; background: url(../img/check_icon_red.png) left no-repeat; Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
-
By Mix9
есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1
.content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div> -
By Марко
Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь.
-
By Kaido
Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
<div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });
-
By stasN1
Мне нужен такой результат :
Не понимаю почему background не применяется вокруг иконок:
Сам код:
Html:
css:
Html:
<section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>
Css:
.finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
Уже решил, спасибо!
У меня CSS селектор вида:
.finish .finish_wrapper .finish_item .finish_round
А должен быть:
.finish .finish_wrapper finish_item .finish_round
Т.е. без точки перед finish_item, так как это не класс, а элемент
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
Alllexey777
Народ, помогите, пожалуйста, в первый раз сделал html письмо, все получилось как надо, но в яндекс почте и в outlook картинка с верхней тенью отображается с отступом в 1px, в остальных почтовиках отображается нормально, подскажите, что нужно изменить, чтобы все отображалось как нужно?
<html> <head> <title>HTML шаблон письма</title> <meta charset="utf-8"> <style type="text/css"> /* Backgrounds */.email_background { width: 640px; //background: url('http://it-tektura.ru/images/html_message/email_bg.jpg') repeat-y;}/* Images */img { display: block; border: none;}/* Fonts and Typography */.footer { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #fff; padding-right: 20px; }h1 { color: #e95f03; font-family: Arial,Helvetica,sans-serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; text-align: left;}h2 { color: #e95f03; font-family: Arial,Helvetica,sans-serif; padding: 0; margin: 0; font-size: 18px; font-weight: normal; text-align: left;}.content { padding: 0; margin: 0;}p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; text-align: left;} </style> </head> <body> <!-- Container Table --> <table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#ffffff"> <tr> <td align="center"> <!-- Email Wrapper Table --> <table cellpadding="0" cellspacing="0" border="0" width="640"> <tr> <td> <!-- Actual Email Content --> <table cellpadding="0" cellspacing="0" border="0" width="640"> <tr style="padding-left: 20px;"> <td background="http://it-tektura.ru/images/html_message/top_fade1.jpg"> </td> </tr> <tr> <td align="center" background="http://it-tektura.ru/images/html_message/email_bg1.jpg" class="email_background"> <!-- Email Header --> <table cellpadding="0" cellspacing="0" border="0" width="600"> <tr> <td align="center" style="padding-bottom: 20px;" width="350"><a href="http://it-tektura.ru" target="_blank"><img src="http://it-tektura.ru/images/html_message/it-logo.jpg" width="170" height="162" border="0" style="padding-left:20px; padding-top: 20px;" /></a></td> <td style="padding-bottom: 20px; padding-left: 30px" align="left" width="300" colspan="3"><span> 654007, г. Новокузнецк,<br>пр. Ермакова, 9а, офис 339<br>тел.: 8 (3843) 53-97-93<br>e-mail: office@it-tektura.ru<br>сайт: <a href="http://it-tektura.ru" target="_blank">it-tektura.ru </span></td> </tr> <tr> <td align="left" colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 10px;"><span>Компания "АйТиТектура" создана в 2013 году и объединила в себе работу в нескольких основных направлениях в области информационных технологий. Мы стараемся подбирать наиболее подходящие решения для каждого клиента, чтобы уменьшить его расходы и увеличить эффективность от информационных ресурсов </span></td> </tr> <tr> <td align="left" colspan="5" align="left" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px; padding-top: 10px"> <span style="font-size:22px; color:#D03D00">Основные направления деятельности компании</span> </td> </tr> <tr> <td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;"> <img src="http://it-tektura.ru/images/html_message/1с.jpg"> </td> <td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300"> <span> 1) Программы 1С<br> 2) Обновление 1С<br> 3) Обслуживание 1С </span> </td> </tr> <tr> <td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;"> <img src="http://it-tektura.ru/images/html_message/bitrix.jpg"> </td> <td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300"> <span> 1) Разработка сайтов и интернет-магазинов<br> 2) Сопровождение интернет-ресурсов<br> 3) Редизайн сайтов </span> </td> </tr><tr> <td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;"> <img src="http://it-tektura.ru/images/html_message/adm.jpg"> </td> <td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300"> <span> 1) Администрирование серверов<br> 2) Сопровождение, ремонт и настройка компьютеров<br> 3) Проектирование, монтаж, настройка оборудования СКС </span> </td> </tr><tr> <td align="left" valign="top" width="300" style="padding-left: 20px; padding-bottom: 20px;"> <img src="http://it-tektura.ru/images/html_message/adm.jpg"> </td> <td align="left" valign="middle" colspan="2" style="padding-bottom: 20px;" width="300"> <span> 1) Подбор необходимого оборудования<br> 2) Монтаж оборудования на объектах<br> 3) Гарантийное и постгарантийное обслуживание </span> </td> <td width="50" style="padding-bottom: 20px;"> </td> </tr> </table> </td> </tr> <tr> <td> <img src="http://it-tektura.ru/images/html_message/bottom_fade1.jpg" width="640" border="0" height="28" /> </td> </tr> <tr> </table> <!-- End Actual Email Content --> </td> </tr> </table> <!-- End Email Wrapper Table --> </td> </tr> </table> <!-- End Container Table --> </body></html>Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.