- 0
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
vladmih
вот результат моих мучений
http://s018.radikal.ru/i505/1301/d5/cfe1a43272b4.jpg
проблема вот в чем;
при нажатии мышью на поле страницы, нужно чтоб менюха заезжала вверх а плеер с синей кнопкой вниз и при этом нижние боковые плашки должны опускаться на столько какова высота собственно плеера с кнопкой.
а при нажатии еще раз, все ставало на свои месте.
Суть в том, что плашки абсолютно спозиционированы.
щас код прикреплю
<body>
<section class="wrap">
<header class="nav_head">
<nav class="top_nav">
<a href="index.html">АЛЬБОМ</a>
<a href="index2.html">ФОТО</a>
<a class="active_btn" href="index3.html">ТЕКСТ</a>
<a href="index4.html">О ПЕСНЕ</a>
<a href="#">ДОПОЛНИТЕЛЬНО</a>
</nav>
</header>
<section class="main">
<header>
<h1>Je Ne Suis Pas La</h1>
<aside class="right_like"><a href="#"><img src="img/like.gif"><p>Мне</br> нравится</p></a></aside>
</header>
<h2>Инструментальная композиция</h2>
<section class="line_two">
<aside class="left"><img src="img/share.gif"><p>Мнение<br/> о фото</p></aside>
<aside class="right"><img src="img/facebook.gif"><p>Поделиться<br/>фото</p></aside>
</section>
</section><!--main-->
<footer>
<input type="button" >
<img src="img/pleer.gif">
</footer>
</section><!--wrap-->
</body>
css
p{
font-family:"Segoe UI";
font-weight:900;
color:#FFF;
font-size:20px;
}
.wrap {
width:720px;
height:1280px;
margin:auto;
background:#000;
position:relative;
}
.main {
padding-top:10px;
}
.nav_head {
width:100%;
}
.top_nav{
padding: 10px 0 0 10px;
height:35px;
width: 730px;
}
.top_nav .active_btn {
color:#ffffff;
}
.top_nav a {
font-family:"Segoe UI";
display:block;
float:left;
text-decoration:none;
color:#555555;
font-size:28px;
padding: 4px 6px 0 6px;
}
.top_nav a:hover {
font-family:"Segoe UI";
display:block;
float:left;
text-decoration:none;
color:#fff;
font-size:28px;
padding: 4px 6px 0 6px;
}
.main header {
height:70px;
padding: 0 10px;
}
.main h2 {
margin-left:150px;
margin-top:15px;
color:#FFF;
font-family:"Segoe UI";
font-size:24px;
}
h1 {
font-family:"Segoe UI";
letter-spacing:1px;
font-weight:500;
color:#FFF;
font-size:56px;
float:left;
}
.right_like {
margin-top:10px;
float:right;
}
.right_like img {
float:left;
}
.right_like p {
float:right;
margin: 8px 0 0 10px;
}
.line_two {
position:absolute;
width:720px;
height:62px;
bottom:150px;
overflow:hidden;
}
.left {
position:absolute;
width:200px;
height:61px;
float:left;
background:rgba( 0, 0, 0, 0.6);
border-radius:0 40px 40px 0;
}
.right {
position:absolute;
left:510px;
width:210px;
height:61px;
float:right;
background:rgba( 0, 0, 0, 0.6);
border-radius:40px 0 0 40px;
}
.left img {
float:left;
margin:3px 0 0 10px;
}
.right img {
float:right;
margin:3px 10px 0 0;
}
.right_like img {
float:left;
}
.right_like p {
float:right;
margin: 8px 0 0 10px;
}
.left p {
margin: 10px 0 0 80px;
}
.right p{
text-align:right;
margin: 8px 75px 0 0;
}
input {
background-image:url(../img/slide-top.gif);
border-radius: 24px 24px 8px 8px;
width:168px;
height:32px;
border:none;
cursor:pointer;
text-indent:-9999;
margin-left:280px;
}
footer {
position:absolute;
bottom:0;
}
JS
$(document).ready(function() {
$('.wrap').click(function() {
$('footer').slideToggle();
});
$('.wrap').click(function() {
$('.top_nav').slideToggle();
});
$('img[src*=2013]').click(function() {
var $lefty = $('.left');
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
});
$('img[src*=2013]').click(function() {
var $righty = $('.right');
$righty.animate({
marginLeft: parseInt($righty.css('marginLeft'),10) == 0 ? $righty.outerWidth() : 0
});
});
});
Link to comment
Share on other sites
4 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.