- 0
-
Similar Content
-
By WNSY
Более опытные товарищи, ай нид ё хелп!)
Имеется выпадающее меню с классом .sub-menu__list. При наведении оно выпадает, но перекрывается блоком .page__main. Для наглядности прикрепляю скрин и код.
Естественно, нужно, чтобы выпадающее меню было поверх контента следующего блока.
Подскажите, как это реализовать?
P.S. Если нужно поиграть с z-index, подскажите в каком классе, т.к. я перепробовал свои варианты - результата не дало.
HTML
<header class="header"> <div class="header__all _container"> <div class="header__image"> </div> </div> <div class="header__container _container"> <a href="#" class="header__logo"><img src="img/SL-logo.png" alt="SL"></a> <nav class="header__menu menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Обучение</a> <ul class="sub-menu__list"> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Направления</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Стоимость</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Расписание</a></li> </ul> </li> <li class="menu__item"> <a href="#" class="menu__link">О нас</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Доп.услуги</a> </li> </ul> </nav> <a href="#" class="header__phone"><img src="img/header-phone.png" alt="h-phone"></a> </div> </header> <main class="page"> <div class="page__container _container"> <div class="page__main"></div> CSS
.header { } .header__all + ._container { position: relative; } .header__image { background: grey; background-size: cover; height: 302px; font-size: 48px; text-align: center; } /*=======================================HEADER-NAV=======================================*/ .header__container { display: flex; min-height: 110px; align-items: center; margin: 15px auto 0 auto; position: absolute; } .header__logo { } .header__menu { margin: 0 0 0 95px; } .menu { } .menu__list { display: flex; } .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 68px 0 0; } .menu__link { font-size: 20px; } .header__phone { margin: 0 0 0 175px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SUB-MENU~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .sub-menu__list { display: none; position: absolute; } .sub-menu__item { width: 204px; } .sub-menu__item:first-child { padding: 40px 0 0 0; } .sub-menu__link { font-size: 18px; max-width: 204px; } .sub-menu__item:not(:last-child) { margin: 0 0 22px 0; } .menu__item:hover .sub-menu__list { display: block; } /*=======================================MAIN=======================================*/ .page { } .page__container { } .page__main { background: rgba(203, 32, 218, 0.25); height: 300px; font-size: 48px; text-align: center; }
-
By Алеся
Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
<div class="banner">
<div class="container background-image">
<div class="banner_text"></div>
</div>
</div>
CSS:
.background-image {
background-image: url('/img/new_oranges.jpg');
background-size: cover;
height: 200px;
}
-
By rpalenko
Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать???
Помогите пожалуйста уже всю голову сломал!
-
By Balalayka
Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
index.html
style.css
-
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
combyuro
Добрый вечер форумчане. Столкнулся с такой проблемой. Никак не получается наложить полупрозрачный фон на изображение.
Пример можно посмотреть здесь http://rezka.plasmainfo.ru.
Заранее спасибо за ответы.
Link to comment
Share on other sites
6 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.