Кнопка наверх

[Владислав]

Кнопка наверх склеивается с меню При уменьшении экрана, подскажите как сделать чтобы Кнопка наверх была отдельно ?

Вот сайт: http://duchesne.ru/

 

[lekzd]

используйте в конце CSS медиа-запросы для задания стиля кнопки при разрешении меньше нужного

@media all and (max-width: 960px) {

}

там что-то вроде этого будет, в скобках код для изменения стиля кнопки

 

[Владислав]

Не работает

 

[lekzd]

Не работает

ну круто, что, а код который вы написали будет? только последнюю конструкцию с указанием размера, которую добавили

 

[Владислав]

вот код

a#move_up {
   position: fixed;
   top: 0px;
   display: none;
   width:7%;
   width: 100px;
   height:auto;
   text-align: center;
   font: 12px arial;
   text-decoration: none;
   color:#000000; font-family:arial; font-weight:bold;
   background: #E5E5E5;
   padding-top:25px;
   opacity:0.3;
   filter: alpha(opacity=30);
}
a#move_up:hover {
   color: #fff;
   background: #597da3;
   opacity:0.5;
   filter: alpha(opacity=50);
}

 

[lekzd]

[member=Владислав], и это все в фигурных скобках после условия?

 

[Владислав]

Вот что мне надо сделать)

 

[lekzd]

[member=Владислав],вы совсем необучаемый? я же вам даже в личку ответил, дал ссылку на подробный материал по данному вопросу

 

[Владислав]

Мне не нужна менять размер сайта, мне надо сделать чтобы кнопка не заходила и все

 

[lekzd]

[member=Владислав],там нигде не написано как менять размер сайта, вы все очень плохо читаете

 

[Владислав]

я вас понял что вы хотите донести но у меня нечего не получается

 

[motek]

Кнопка наверх склеивается с меню При уменьшении экрана, подскажите как сделать чтобы Кнопка наверх была отдельно ?

.wrapp { padding-left: 100px; }

 

[gor]

Тут нужно делать через javascript - узнаем разрешение браузера
и хуячим кнопку "наверх" соответствено через стили.....

У вас щас кнопка вынесена за пределы "wrapp", при этом "wrapp" имеет фиксированные размеры 1250px, а кнопка наверх позиционируется абсолютно фиксой

position: fixed;
top: 0;

как Вы хотите ее разместить адекватно в зависимости от рендеринга страницы :blink:

хотя если честно, я долго искал ее пока увидил...

На своем сайте делал такой фикс

Подключил Jquery

<script type="text/javascript" src="http://sv-igor.com/templates/ja_pyrite_template_j15/js/jquery.min.js"></script>

css-стиль:

#scroll-top {
bottom: 0;
cursor: pointer;
position: fixed;
width: 100%;
}
#scroll-top p {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
display: block;
float: right;
height: 30px;
margin: 0;
opacity: 0.8;
padding: 0;
text-align: center;
text-decoration: none;
width: 100px;
}
#scroll-top p:hover {
opacity: 1;
}

js-код:

jQuery(document).ready(function(){
jQuery("#scroll-top").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 50) {
	 jQuery('#scroll-top').fadeIn();
} else {
	 jQuery('#scroll-top').fadeOut();
}
});
jQuery('#scroll-top p').click(function () {
jQuery('body,html').animate({
	 scrollTop: 0
}, 600);
});
});
});

html-код

<div id="scroll-top"><p title="Наверх">&#9650; Наверх</p></div>

можно посмотреть http://sv-igor.com/ (модеры удаляйте ссылку нах, если думаете, что спамлю)

или запхать блок "наверх" в wrap и стилями + js-кодом отсунуть его куда надо