- 0
Не работают относительные (указания в "%") CSS правила height, max-height, min-height
Asked by
Sergo Skiller,
-
Similar Content
-
By Mondeus
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } }
-
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 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
Sergo Skiller
Решил поупражняться в верстке, сделал фиксированный верхний и левый бар, принялся за контент, но слой в который вложена аватарка имеет нулевую высоту, применение height, max-height, min-height с указанием значения в % не приводит ни к какому результату, только фиксированное значение "N px" регулирует значение высоты слоя. И самое интересное: если я вставляю текст, то слой появляется и его высота равна занимаемой текстом высоте.
Вот как это выглядит без текста: http://storage8.static.itmages.ru/i/15/0106/h_1420526624_5424836_8e46b4d33d.png
Вот как это по идеи должно выглядеть: http://storage8.static.itmages.ru/i/15/0106/h_1420528235_8284072_2c67e7a154.png
Вот как это выглядит с текстом: http://storage6.static.itmages.ru/i/15/0106/h_1420528483_6607401_0d601a9bc7.png
Ссылка на архив с файлами (если кто возьмет, мне не жалко): https://yadi.sk/d/_dwboiXmdoebL
Подскажите, пожалуйста, почему слой <div id="content"> имеет нулевую высоту хотя контент в нем есть, и почему применение свойств высоты в процентах и auto не приводят ни к какому результату.
Вот код:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <style> /* Fonts */ @font-face{ font-family: KremlinCTT; src: url(fonts/KREM.otf), url(fonts/KREM.ttf), url(fonts/KREM.woff); } /* End fonts */ body, html{ margin:0px; padding:0px; background: url(img/bg_top.gif) #d6d6d6 repeat 0 0 fixed; width: 100%; height: 100%; } a{ text-decoration: none; } /* Header */ #header{ height:50px; width:100%; background-image: url(img/head_bg.png); position: fixed; left: 0px; top: 0px; right: 0px; z-index: 100; } #top_menu{ width:80%; max-width: 1024px; min-width: 900px; margin-left: auto; margin-right: auto; } #logo{ background-image: url(img/logo.png); max-width:162px; height:50px; margin-top: 0px;" } #top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } .top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } #top_menu_element_hover{ height: 40px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; background: #000; opacity: 0.35; filter: alpha(Opacity=35); border: 0px; border-radius: 10px; } /* End Header */ /* Content */ #container{ width:80%; max-width: 1024px /*900px*/; min-width: 900px; border: 0px solid #000; margin-left: auto; margin-right: auto; margin-top: 50px; } #content{ margin-left: 162px; min-width: 738px; background: #eaeaea; } #left_menu{ width: 152px; height: 100%; min-height: 100%; float: left; border-left: 10px groove rgba(0, 0, 0, 0.55); background:; position: fixed; top: 50px; bottom: 0px; background: rgba(0, 0, 0, 0.40); } #left_menu_elements{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; } #left_menu_elements:hover{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; background: rgba(0, 0, 0, 0.75); } #photo_and_info{ width: 225px; height: 360px; float: left; margin-top: 10px; margin-left: 10px; margin-right: 5px; background: rgba(0, 0, 0, 0.55); } #photo{ width: 225px; height: 225px; padding-left: 2px; padding-right: 2px; } #name{ padding-left: 10px; color:; font-size: 18px; z-index: 2; } #online{ width:15px; height: 15px; background: #0af110; border: 0px solid #0af110; border-radius: 50%; position: relative; bottom: ; top: 210px; left: 195px; } #avatar{ width: 205px; height: 205px; border: 6px solid #fff; border-radius: 5%; margin-left: 2px; margin-right: 2px; margin-top: 2px; } #info{ width: 225px; } #bg_profile{ height: 360px; background: url(img/1.jpg); } /* End content */ </style> </head> <body> <div id="header"> <div id="top_menu"> <div style="float: left;"><a href="#"><img onmouseover="this.src='img/logo_hover.png'" onmouseout="this.src='img/logo.png'" src="img/logo.png"></a></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Выход</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Видео</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Сообества</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Люди</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Общий чат</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Игры</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left; margin-left: 15px;"><img src="img/messages.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/friends.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/groups.png"> <small>2</small></div> <div class="top_menu_element" style="float: left;"><center>Рублей: 100</center></div> <div class="top_menu_element" style="float: left;"><center>ФБМ:100</center></div> </div></div> </div> <div id="container"> <div id="left_menu" > <a href="#"><div id="left_menu_elements">Моя Страница</div></a> <a href="#"><div id="left_menu_elements">Мои Фотографии</div></a> <a href="#"><div id="left_menu_elements">Мои Аудиозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Видеозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Блог</div></a> <a href="#"><div id="left_menu_elements">Мои Новости</div></a> <a href="#"><div id="left_menu_elements">Мои Закладки</div></a> <a href="#"><div id="left_menu_elements">Мои Гости</div></a> <a href="#"><div id="left_menu_elements">Мои Документы</div></a> <a href="#"><div id="left_menu_elements">Мои Настройки</div></a> <a href="#"><div id="left_menu_elements">Реклама</div></a> <a href="#"><div id="left_menu_elements">Приложения</div></a> </div> <div id="content"> <div id="photo_and_info"> <div id="photo"><!--div id="online"></div--><img src="img/no_avatar.png" id="avatar"></div> <div id="info"> <div id="name">Имя Фамилия</div> </div> </div> </div> </div> </body></html>Edited by Sergo SkillerLink to comment
Share on other sites
5 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.