sgu33
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by sgu33
-
Проблема с позиционированием прокрутки к началу страницы
sgu33 replied to sgu33's question in HTML Coding
Спасибо за ответ, но такое решение не совсем подходит, кнопка действительно появляется справа от блока но теряет весь смысл данной функции так как при длинной странице появляется только в самом низу страницы. -
Добрый день! Пожалуйста помогите решить задачку с позиционированием вставленного блока с кнопкой прокрутки к началу страницы. Никак не могу пристыковать данную кнопку справа к блоку conteiner с небольшим отступом. Для ясности картинку с вопросом немного подправил: Код сстраницы следующий: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> <style> /*————————————————Back to top button—————————————————————— */ #back-top { position: fixed; bottom: 180px; margin-left: -50px; } #back-top a { width: 40px; display: block; text-align: center; font:bold 12px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 40px; height: 40px; display: block; margin-bottom: 2px; background: #ddd url(02img/up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; } /*——————————————--Правила для блока middle——————————————————-*/ #middle { min-height: 250px; background-color: #FF0000; } /*——————————————--Правила для блока container—————————————————*/ #container{ width:980px;/*фиксированная ширина 980 пикселей*/ margin:0 auto; /*ровняем по центру, по горизонтали*/ background-color: #0066FF; } /*——————————————--Правила для блока left———————————————————*/ #left { width:220px; float:left; background-color:#FF9933; } /*——————————————--Правила для блока content—————————————————-*/ #content { text-align:left; margin:0px; width:760px; margin-left:221px; background-color: #009900; } </style> </head> <body> <div id="middle"> div midle <div id="container"> div container <div id="left">div left</div><!-- #left--> <div id="content">div content</div><!-- #content--> <p id="back-top"><a href="#top"><span></span>кнопка</a></p> </div><!-- #container--> </div><!-- #middle--> </body> </html> Взаранее благодарен за ответы