fa_t
-
Posts
13 -
Joined
-
Last visited
fa_t's Achievements
Explorer (1/14)
0
Reputation
-
Собственно как это сделать, коротко и быстро. Пошаговая инструкция: Шаг 1. Создаём js-файл и помещаем в него следующий код. (function(e,p){e.extend({lockfixed:function(a,{b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),g=a.offset().top,h=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))h=!0;e(window).bind("scroll resize orientationchange load lockfixed:pageupdate",a,function(k){if(!h||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,f=e(window).scrollTop();"fixed"!=a.css("position")&&(g=a.offset().top,c=parseInt(a.css("marginTop"),10),l=a.css("top"));f>=g-(c?c:0)-b.offset.top?(d=m<f+d+c+b.offset.top?f+d+c+b.offset.top-m:0,h?a.css({marginTop:parseInt((c?c:0)+(f-g-d)+2*b.offset.top,10)+"px"}):a.css({position:"fixed",top:b.offset.top-d+"px",width:k+"px"})):a.css({position:n,top:l,width:k+"px",marginTop:(c?c:0)+"px"})}})}}})})(jQuery);Шаг 2. Подключаем скрипт в индексном файле Между тегами <head> </head> вставляем следующий код. <script src="http://site.ru/путь_к_скрипту/имя_файла.js"></script>Шаг 3. Запускаем наш скрипт Перед закрывающим тегом </head> или </body> вставляем следующий код. <script type="text/javascript"> (function($) { $.lockfixed("#sidebar",{offset: {top: 10, bottom: 10}});})(jQuery); </script> Шаг 4. Вставляем наш блок Внутрь этого div блока, вставляете код Вашего блока, который хотите сделать скользящим. <div id="sidebar"> Сюда нужно вставить код Вашего блока. </div> -
Ссылку скинь пожалуйста!
-
Уже не актуально!
-
Друзья, с хедером как то разобрался, но вот с футером беда!!! .footer{background:#575757;height:150px; text-align:center;color:#fff;}нужен совет!
-
background-size: 100% 85%; получилось то что надо, Всем спасибо!
-
background-size:cover; масштабирует не так как надо.
-
Друзья, подскажите пожалуйста, как сделать резиновую картинку в хедере, что бы на разных расширениях монитора отображалась вся картинка? Что бы не было вот так: #wrapper{ width:1346px; margin:0 auto; } #header{ background: url(./images/bg-body.jpg) center 29px no-repeat; height:199px; position:relative; }
-
Отказался от position и сделал с помощью float со значениями соответственно left и right. <div class="layout"> <div class="sidebar1"> <p>Левый Сайдбар</p> </div> <div class="sidebar2"> <p>Правый Сайдбар</p> </div> <div class="content-main"> <br /> <br /> <div class="content"> <div class="post-main"> <h1><a href="#">Флоренция</a></h1><br /><span>05.05.2014</span> <div class="post"> <img src="http://www.cyberforum.ru/images/florence.jpg"> <p>Флоре́нция (итал. Firenze [fiˈrɛnʦe], лат. Florentia) — итальянский город на реке Арно, в прошлом — центр Флорентийской республики, столица герцогов Медичи и Итальянского королевства, ныне — административный центр региона Тоскана. Население — 373 200 человек (2012)[2].</p></p>Несмотря на удалённость от моря и постоянные политические треволнения, Флоренция XIII—XVII веков внесла грандиозный вклад в развитие европейской и мировой цивилизации. Город дал миру таких гигантов, как Леонардо да Винчи, Микеланджело, Данте и Галилей. Местный диалект лёг в основу литературного итальянского языка, флорентийская монета стала эталоном для всей Европы, флорентийские художники разработали законы перспективы, флорентийские мыслители положили начало эпохе Возрождения, а флорентийский мореплаватель Америго Веспуччи дал своё имя двум континентам.</p> </div> </div> </div> </div>.layout { overflow:hidden; } .sidebar1 { background: #C7E3E4; float:left;width:245px; } .content-main{ background: #f7f7f7; margin:0 245px 0 245px; } .sidebar2 { background: #ECD5DE; float:right;width: 245px;}Результат ниже на скриншоте.
-
Верстаю свой первый сайт и как говорится чем дальше в лес, тем толще партизаны) Дано: страница блоками в 3 колонки. В блок для контента, собственно не могу положить контент. Выпадающее меню из хедера, выпадает под блоки, а не над ними как это задумывалось. По ссылке ниже поясняющий скриншот и коды. http://img-fotki.yandex.ru/get/9250/194585002.7/0_1037d7_8de70015_XL.jpg <div class="layout"> <div class="sidebar1"> <p>Левый Сайдбар</p> </div> <div class="content-main"> <br /> <br /> <div class="content"> <div class="post-main"> <h1><a href="#">Флоренция</a></h1><br /><span>05.05.2014</span> <div class="post"> <img src="http://www.cyberforum.ru/images/florence.jpg"> <p>Флоре́нция (итал. Firenze [fiˈrɛnʦe], лат. Florentia) — итальянский город на реке Арно, в прошлом — центр Флорентийской республики, столица герцогов Медичи и Итальянского королевства, ныне — административный центр региона Тоскана. Население — 373 200 человек (2012)[2].</p></p>Несмотря на удалённость от моря и постоянные политические треволнения, Флоренция XIII—XVII веков внесла грандиозный вклад в развитие европейской и мировой цивилизации. Город дал миру таких гигантов, как Леонардо да Винчи, Микеланджело, Данте и Галилей. Местный диалект лёг в основу литературного итальянского языка, флорентийская монета стала эталоном для всей Европы, флорентийские художники разработали законы перспективы, флорентийские мыслители положили начало эпохе Возрождения, а флорентийский мореплаватель Америго Веспуччи дал своё имя двум континентам.</p> </div> </div> </div> </div> <div class="sidebar2"> <p>Правый Сайдбар</p> </div></div></div></body></html>#menu2{ background: #3D647F; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }#menu2 ul{ font:16px Times New Roman, Times, serif;; display:inline-table; position: relative; }#menu2 li{ float: left; list-style: none; width: 140px; text-align: center; border-right:1px dotted #000; }#menu2 li a { text-decoration: none; display:block; color:#fff; background: #3D647F; padding: 5px; }#menu2 li a:hover { color: #575757; background: #c0c0c0; }#menu2 ul ul { padding-top:1px; display: none; position: absolute; top: 100%;}#menu2 ul ul li { float: none; position: relative; border-right:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000; }#menu2 ul ul ul { position: absolute; top: 0; left: 100%;}#menu2 ul li:hover > ul { display: block;}.layout { position: relative; }.layout DIV { position: absolute; }.sidebar1 { background: #C7E3E4; width:245px; }.content-main{ background: #f7f7f7; width:850px; left: 245px; }.sidebar2 { background: #ECD5DE; width: 245px; right: 0; }
-
в #menu ul ul задал отступ сверху padding-top:1px; и таким образом добился нужного результата.
-
Собственно в этом то и проблема, не знаю как задать границу. Подскажите пожалуйста. Вот код CSS @charset "utf-8";/* CSS Document */*{padding:0; margin:0;}body{background:#e3e3e3 url(../images/bg-body.jpg) center 29px no-repeat; }#wrapper{width:1346px; margin:0 auto; }#header{height:199px; } #menu { background: #575757;border-top: 1px solid #000000; border-bottom: 1px solid #000000; } #menu ul { font: bold 13px Verdana; display:inline-table; position: relative; } #menu li { float: left; list-style: none; width: 140px; text-align: center; border-right:1px dotted #000; } #menu li a { text-decoration: none; display:block; color: #fff; background: #575757; padding: 5px; } #menu li a:hover { color: #575757; background: #c0c0c0; } .hallo h2{ text-align:center; padding-top:15px; font: 16px "Arial"; color: white; } .hallo h2 span{color:#514c35;font-weight:bold; } .logo{padding: 40px 0 0px 1135px; } .logo img {opacity:0.8;-moz-opacity:0.8;filter: alpha(opacity=80) black;-khtml-opacity: 0.8;}.logo img:hover {opacity:1;-moz-opacity:1;filter: alpha(opacity=100) black;-khtml-opacity: 1;}#menu.secondmenu{background: #3D647F;border-top: 1px solid #000000; border-bottom: 1px solid #000000; }#menu.secondmenu li a { text-decoration: none; display:; color:; background: #3D647F; padding: 5px; }#menu.secondmenu li a:hover {color: #575757;background: #c0c0c0;}#menu ul ul {display: none;position: absolute;top: 100%;}#menu.secondmenu ul ul li {float: none;position: relative;border-right:1px solid #000;border-left:1px solid #000;border-bottom:1px solid #000;}#menu ul ul ul {position: absolute;top: 0;left: 100%;}#menu ul li:hover > ul {display: block;} Код HTML <div id="menu" class="secondmenu"><ul><li><a href="#">Украина</a></li><li><a href="#">Европа</a><ul><li><a href="#">Австрия</a></li><li><a href="#">Германия</a></li><li><a href="#">Италия</a></li><li><a href="#">Испания</a></li></ul></li><li><a href="#">Б. Восток</a><ul><li><a href="#">Турция</a></li><li><a href="#">Сирия</a></li><li><a href="#">Ливан</a></li></ul></li><li><a href="#">Кавказ</a></li></ul></div> Ещё столкнулся с тем, что задавая в #menu.secondmenu ul ul li{border-bottom:1px dotted #000} - цвет почему то белый. Хотя для solid, все цвета меняются. Заранее спасибо.
-
Спасибо за отклики! Так как всё таки правильно должно выглядеть?
-
Доброго времени суток друзья! Первый раз взялся что то пытаться сверстать. Естественно сразу проблема. Вот проблема: В правом нижнем углу фотографии - ссылка(будущий логотип) EnjoyTrip. Собственно проблема в том, что при нахождении курсора чуть ли ни на моём лице, он уже меняется на ссылку. Т.е. находясь очень далеко от ссылки, он её уже видит. Вот код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><title>EnjoyTrip</title></head> <body><div class="main"> <div class="head"> <h2><span>Добро пожаловать на блог Святослава Бойко!</span><br> Всё о самостоятельных бюджетных путешествиях, а так же о мире, дружбе и жвачке!</h2> <a href="/">EnjoyTrip</a> </div> </div> </body></html> @charset "utf-8";/* CSS Document */*{padding:0; margin:0;}body{background:#DFD7B4 url(images/bg-body.jpg) center 50px no-repeat; } .main{width:970px; margin:0 auto; }.head{ } .head h2{padding:80px 0 0 220px;font: 16px "Arial"; color: #514C35; } .head h2 span{ font-weight:bold; } .head a{ display:block; text-decoration:none; color:white; padding:100px 0 0 1090px; } .head a:hover{ color:green; } Прошу Вас не не судить строго, так как первый раз сел делать что то подобное.Заранее спасибо за помощь!