- 0
-
Обсуждения
-
Актуальные контакты: 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
alleclf
Пример реализован вот так: http://jsfiddle.net/vend3tta/SE4tS/
по ссылке всё работает, пробую реализовать сам - не работает
Вот код html файла:
<!DOCTYPE html><head><title>CSS3 Javascript</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript">p = $('.popup__overlay')$('#popup__toggle').click(function() { p.css('display', 'block')})p.click(function(event) { e = event || window.event if (e.target == this) { $(p).css('display', 'none') }})$('.popup__close').click(function() { p.css('display', 'none')})</script></head><body><p><input type="button" value="Popup!" id="popup__toggle" /></p><!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]--><div class="popup__overlay"> <div class="popup"> <a href="#" class="popup__close">X</a> <h2>Welcome!</h2> <p>Please enter your login and password to continue</p> <div class="popup-form__row"> <label for="popup-form_login">Login</label> <input type="text" id="popup-form_login" value="" /> </div> <div class="popup-form__row"> <label for="popup-form_password">Password</label> <input type="password" id="popup-form_password" value="" /> </div> <input type="button" value="Log in" /> </div> <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]--></div></body></html>Ну и вот стили, файл style.css:
html { min-height: 100% }body { min-height: 100%; background: #fff; font: 14px/125% Tahoma; }p { margin: 1em 0; text-align: center }.popup__overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); text-align: center } .popup__overlay:after { display: inline-block; *display: inline; *zoom: 1; height: 100%; width: 0; vertical-align: middle; content: '' } /* Added for IE<9 compatibility */ .popup__overlay_ie { background: #000; opacity: .7; filter: alpha(opacity=70) }.popup { display: inline-block; *display: inline; *zoom: 1; position: relative; max-width: 80%; padding: 20px; border: 5px solid #fff; border-radius: 15px; box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4); background: #fff; vertical-align: middle }/* Added instead of :after pseudoelement */.popup__valignfix { display: inline-block; *display: inline; *zoom: 1; width: 0; height: 100%; vertical-align: middle }.popup-form__row { margin: 1em 0 }label { display: inline-block; *display: inline; *zoom: 1; width: 120px; text-align: left }input[type="text"], input[type="password"] { margin: 0; padding: 2px; border: 1px solid; border-color: #999 #ccc #ccc; border-radius: 2px }input[type="button"] { padding: 6px 16px; border: 0; border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); cursor: pointer; background: #444; background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%); background: -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%); background: -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%); background: -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%); background: linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%); color: #fff }.popup__close { display: block; position: absolute; top: -20px; right: 10px; width: 12px; height: 12px; padding: 8px; border: 5px solid #fff; border-radius: 50%; -webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4), 0 3px 3px rgba(0,0,0,.4); box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4), 0 3px 3px rgba(0,0,0,.4); cursor: pointer; background: #fff; text-align: center; font-size: 12px; line-height: 12px; color: #444; text-decoration: none; font-weight: bold } .popup__close:hover { background: #ddd }Что не так сделал? В чём ошибка?
Link to comment
Share on other sites
7 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.