test
Csssssss
Страница: 1
Сообщений 1 страница 6 из 6
Поделиться22011-12-04 02:06:09
http://vk.osvita.org.ua/footer.htm
Как прижать footer к низу окна браузера с помощью CSS?
Вариант 1
В этом варианте блок контента растягивается на всю высоту окна, footer с помощью отрицательного значения margin-top смещается вверх.
Код:
<html> <body> <div id="content"> content </div> <div id="footer"> footer </div> </body> </html> html, body { margin:0; padding:0; width:100%; height:100%; } #content { position: relative; min-height: 100%; } * html #content { height: 100%; } #footer { position: relative; margin-top: -2.5em; height: 2.5em; }
Вариант 2
В этом варианте на всю высоту окна растягивается body, а footer абсолютно спозиционирован относительно нижней его части. Нижний padding блока контента следует сделать больше и равным высоте footer.
Код:
<html> <body> <div id="header"> header </div> <div id="content"> content </div> <div id="footer"> footer </div> </body> </html> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { min-height: 100%; height: auto !important; height: 100%; position: relative; } #header { height: 3em; width: 100%; } #content { padding-bottom: 2.5em; } #footer { height: 2.5em; width: 100%; position: absolute; bottom: 0; }
Поделиться32012-03-15 19:27:54
Ячейка | Ячейка | Ячейка |
Ячейка | Ячейка | Ячейка |
Ячейка | Ячейка | Ячейка |
Ячейка | Ячейка | Ячейка |
Поделиться42012-08-29 11:29:35
Код:
<style> #pun-main #profile1[action$="id=11"]{ display:none; } </style> <script> function HideInfo(id,but){ if(but.value=="1"){ var fil=document.getElementById(id).getElementsByTagName("li") var fi=0 for (fi=0; fi<=(fil.length-1); fi++) {if ((fil[fi].className=="pa-fld1") || (fil[fi].className=="pa-fld2") || (fil[fi].className=="pa-fld3")) {fil[fi].style.display = "none";} if ((fil[fi].className!="pa-fld1") && (fil[fi].className!="pa-fld2") && (fil[fi].className!="pa-fld3")) {fil[fi].style.display = "block";} } } if(but.value=="2"){ var fil=document.getElementById(id).getElementsByTagName("li") var fi=0 for (fi=0; fi<=(fil.length-1); fi++) {if (fil[fi].className!="pa-fld1") {fil[fi].style.display = "none";} if (fil[fi].className=="pa-fld1") {fil[fi].style.display = "block";} } } if(but.value=="3"){ var fil=document.getElementById(id).getElementsByTagName("li") var fi=0 for (fi=0; fi<=(fil.length-1); fi++) {if (fil[fi].className!="pa-fld2") {fil[fi].style.display = "none";} if (fil[fi].className=="pa-fld2") {fil[fi].style.display = "block";} } } if(but.value=="4"){ var fil=document.getElementById(id).getElementsByTagName("li") var fi=0 for (fi=0; fi<=(fil.length-1); fi++) {if (fil[fi].className!="pa-fld3") {fil[fi].style.display = "none";} if (fil[fi].className=="pa-fld3") {fil[fi].style.display = "block";} } } if(but.value=="5"){ var fil=document.getElementById(id).getElementsByTagName("li") var fi=0 for (fi=0; fi<=(fil.length-1); fi++) {if (fil[fi].className!="pa-fld1") {fil[fi].style.display = "none";} if (fil[fi].className=="pa-fld1") {fil[fi].style.display = "block";} } } return false} d = document.getElementsByTagName("div") for (i=0;d[i]; i++){ if (d[i].className.indexOf("post-author")!=-1){t = d[i].innerHTML if((j = t.toLowerCase().indexOf("<li class=pa-from>"))!=-1 || (j = t.toLowerCase().indexOf("<li class=\"pa-from\">"))!=-1 || (j = t.toLowerCase().indexOf("<li class=pa-reg>"))!=-1 || (j = t.toLowerCase().indexOf("<li class=\"pa-reg\">"))!=-1) d[i].innerHTML = t.substring(0,j)+"<center><input id='button1' type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='1' id='bu1' title='Статистика'> <input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'> <input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='История'> <input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='4' id='bu4' title='Инвентарь'> <input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='5' id='bu5' title='Награды'> </center><div id='info"+i+"'>"+t.substring(j,t.length)+"</div>"}} </script> <!-- Аватар по умолчанию--> <script type="text/javascript"> if(document.URL.indexOf("viewtopic.php")!=-1) { $("div.post-author").each(function(){ if($(this).find("li.pa-avatar").html() == null ) $(this).find("li.pa-title").after("<li class='pa-avatar item2'><img src='http://uploads.ru/i/h/i/7/hi7Xe.png' alt='Аватар' /></li>"); }); } </script> <table id="avst" cellpadding=0 cellspacing=0><tr><td id="ava-status"></td></tr></table> <script type="text/javascript"> var img = document.createElement('img'); var UserAvatar = UserAvatar; if( ! UserAvatar ) img.src = 'https://forumupload.ru/uploads/000e/32/ad/14877-1.png'; else img.src = UserAvatar; $("td#ava-status").html(img); </script> <!--Кнопки вверх вниз--> <div style="position:fixed; right :0%; bottom: 45%;"> <a href=#top onClick="scrollTo(0,0); return false;" title="Вверх страницы"> <img src="http://uploads.ru/i/U/4/r/U4r78.png" alt="Вверх страницы" ></a><br/> <a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы"> <img style="margin-top: -4px;" src="http://uploads.ru/i/e/5/1/e51xa.png" alt="Вниз страницы" ></a> </div> <link rel="shortcut icon" href="https://forumupload.ru/uploads/000e/32/ad/16421-1.png" type="image/vnd.microsoft.icon"> <link rel="icon" href="https://forumupload.ru/uploads/000e/32/ad/16421-1.png" type="image/vnd.microsoft.icon"> <script type="text/javascript">socializ(encodeURIComponent(document.URL),encodeURIComponent(document.title))</script> <script type="text/javascript"> $("div.linksb").append("<div id=\"socializ\"></div>"); $(document).ready(function(){ $("div#socializ a img").css({width: "24px", height: "24px"}) }); </script> <script type="text/javascript"> $("img[src*='rusff/r_add.gif']").attr({src:'http://i.rusff.ru/f/info/rusff/support-carma-up.png'}); $("img[src*='rusff/r_minus.gif']").attr({src:'http://i.rusff.ru/f/info/rusff/support-carma-down.png'}); </script> <script language=JavaScript1.2> <!--// var rector=3 //амплитуда колебания var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector} else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector} else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector} else{ shake.style.left=parseInt(shake.style.left)-rector} if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } //--> </script> <script type="text/javascript"> $(document).ready(function() { var pmstr = $("#navpm a").html(); if ((pmstr != null) && (pmstr.indexOf("(") != -1)) { var pmnum = pmstr.substr(pmstr.indexOf("(")+1, 1); $("#navpm a").before("<img src='http://uploads.ru/i/6/r/9/6r98t.gif' title='У Вас новое личное сообщение!' style='margin: -4px 0 0 7px; position: relative; top: 5px;'/>") .after("<span>("+pmnum+")</span>"); } $("#navindex a").text("Главная").attr("title","На главную страницу"); $("#navuserlist a").text("Форумчане").attr("title","Список форумчан поименно"); $("#navrules a").text("Кодекс").attr("title","Свод законов форума"); $("#navsearch a").text("Справочная").attr("title","Всемогущий поиск!"); $("#navprofile a").text("Паспорт").attr("title","К своему паспорту"); $("#navpm a").html("ЛС").attr("title","Личная переписка. Совершенно секретно"); $("#navadmin a").text("Админка").attr("title","Святая святых"); $("#navlogout a").text("Уйти").attr("title","Уйти отсюда"); $("#navlogin a").text("Зайти").attr("title","Войти"); $("#navregister a").text("Присоединиться").attr("title","Стать одним из избранных"); $("#navextra1 a").text("Какой-то пункт меню").attr("title","Еще какой-то пункт меню"); }); if(document.URL.indexOf("viewtopic.php?id=967")!=-1){ var hide = $("div.quote-box").find("cite"); if ($(hide).text().indexOf("Скрытый")!=-1) { $(hide).text("Код стиля будет доступен после проверки"); $(hide).siblings("blockquote").text("");}} $("div.quote-box.spoiler-box").removeClass("quote-box"); $("div.quote-box").wrap("<div class='quote-block'></div>"); $("div.code-box").wrap("<div class='code-block'></div>"); var urlstr = document.location.href; if (urlstr.indexOf("?act=awards")==-1) $("#pun-index .category .tc2, #pun-index .category .tc3").css("display", "none"); </script> <script type="text/javascript"> function select_text(elem) { if(window.getSelection) { var s=window.getSelection(); if(s.setBaseAndExtent){ s.setBaseAndExtent(elem,0,elem,elem.innerText.length-1); } else { var r=document.createRange(); r.selectNodeContents(elem); s.removeAllRanges(); s.addRange(r); } } else if(document.getSelection){ var s=document.getSelection(); var r=document.createRange(); r.selectNodeContents(elem); s.removeAllRanges(); s.addRange(r); } else if(document.selection){ var r=document.body.createTextRange(); r.moveToElementText(elem); r.select(); } } </script> <script type="text/javascript"> var div = document.getElementById('pun-main').getElementsByTagName('div'); for(x in div){ if(div[x].className=='code-box'){ div[x].getElementsByTagName('strong')[0].innerHTML = '<a href="#" onclick="select_text(this.parentNode.parentNode.childNodes[1].getElementsByTagName(\'pre\')[0]); return false;">Выделить код</a>'; } } </script> <script type="text/javascript"> var a = document.getElementsByTagName("a") for( i=0; i<a.length; i++ ) { if( a[i].href.indexOf("http://" + document.domain + "/click.php?http://") != -1 ) { a[i].href = "http://" + a[i].href.substring(a[i].href.lastIndexOf("http://")+7) } } </script> <script type="text/javascript"> document.onkeydown=function(e){ if (e) event=e if ((event.keyCode==13)&&(event.ctrlKey)){ document.getElementById('post').submit.click(); }} </script> <script type="text/javascript"> $(document).ready(function() { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); </script> <style>.Myimge {position:absolute; right: 130px; top: -25px; cursor: pointer;}</style> <script type="text/javascript"> PiarNik="PR"; PiarPas="1evz7cop44321st"; var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\ <form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\ <fieldset>\ <input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\ <input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\ <input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\ <input type=\"submit\" class=\"button\" name=\"login\"/>\ </fieldset>\ </form>\ </div>\ <span id=spMyimg><img class=\"Myimge\" title=\"Кнопка быстрого входа для 'Пиара'\" onclick=\"PiarIn()\" src=\"http://uploads.ru/i/j/F/0/jF04E.png\" onmouseover=\"this.src='http://uploads.ru/i/l/s/O/lsOD1.png' \" onmouseout=\"this.src='http://uploads.ru/i/j/F/0/jF04E.png'\" /></span>"; if($("#navlogin").html()!=null){ $("#navlogin").append(L) //navlogin $("#PR_loginDiv #fld1").val(PiarNik) $("#PR_loginDiv #fld2").val(PiarPas) function PiarIn () {$("#PR_loginDiv input[type='submit']").click();} } </script> <script type="text/javascript"><!--Cворачивание категорией Ч2--> $('#pun-main div.category > h2 div.catleft').after('<span class="offctgr" style="float: right;"><img src="'+aimg.open+'" title="показать/cкрыть" /></span>'); $('#pun-main div.category').each(function (i) { var ctgId=$(this).attr('id'); if(getcookie(ctgId)=='close'){ $('#'+ctgId+' > div.container').css({display: 'none'}); $('#'+ctgId+' > h2 > .offctgr img').attr("src",aimg.close)} }); $('span.offctgr').click(function(){ var cat=$(this).parents('div.category').attr('id'); $(this).parents('div.category').children('div.container').toggle('slow'); var s = $(this).find("img").attr("src") == aimg.open ? aimg.close : aimg.open; $(this).find("img").attr("src",s) var catc = getcookie(cat); catc = catc == 'close' ? 'open' : 'close'; setcookie(cat,catc,3600*24*30*1000); return false; }); </script> <script> var oldIMG="<td id=\"button-image\" title=\"Изображение2\"><img onclick=\"bbcode('[img]','[/img]')\" src=\"/i/blank.gif\"/><b><p style=\"z-index:20;position:absolute;height14px;margin:-15px 0 0 22px;\">2</p></b></td>" $("#button-image").after(oldIMG); </script> <script type="text/javascript"> $(document).ready(function() { //Tooltips $(".tip_trigger").hover(function(){ $(this).find('.tip').show(); //Show tooltip }, function() { $(this).find('.tip').hide(); //Hide tooltip }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coodrinates var mousey = e.pageY + 20; //Get Y coordinates var tipWidth = $(this).find('.tip').width(); //Find width of tooltip var tipHeight = $(this).find('.tip').height(); //Find height of tooltip //Distance of element from the right edge of viewport var tipVisX = $(window).width() - (mousex + tipWidth); var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport mousex = e.pageX - tipWidth - 20; $(this).find('.tip').css({ top: mousey, left: mousex }); } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport mousey = e.pageY - tipHeight - 20; $(this).find('.tip').css({ top: mousey, left: mousex }); } else { $(this).find('.tip').css({ top: mousey, left: mousex }); } }); }); </script> <script type='text/javascript' src='https://forumstatic.ru/files/000e/32/ad/13205.js'></script> <!--HTML в постах. Developed by Frodo--> <script> function addHTML(str,from,internal){ var pos=0,pos2=0,newpos=0; if((pos=str.indexOf("[html]",from))==-1) return str; if((pos2=str.indexOf("[/html]"),pos+6)==-1) return str; newpos=str.indexOf("[html]",pos+6); if(newpos<pos2 && newpos!=-1) str=addEx(str,pos+6,true); if((pos2=str.indexOf("[/html]",pos+6))==-1) return str; str=str.substring(0,pos)+makeHTML(str.substring(pos+6,pos2),0)+str.substring(pos2+7,str.length); if( str.indexOf("[html]")!=-1 && internal==false) str=addHTML(str,0,false); return str;} function makeHTML(str,from){ var pos=0,pos2=0,newpos=0; while (1) {if((pos=str.indexOf("<",from))==-1) return str; if((pos2=str.indexOf(">"),pos+4)==-1) return str; str=str.substring(0,pos)+"<"+str.substring(pos+4,pos2)+">"+str.substring(pos2+4,str.length);} return str;} if(document.URL.indexOf("viewtopic.php")!=-1){ var allowed= new Array ("Эльмар", "Frodo", "Саруман", "Администратор", "Game Master"); var b=0,pos=0; elm=document.getElementById("pun-main").getElementsByTagName("div"); for(x in elm) if(elm[x].className=="container"){ var post=elm[x]; var b=0; for (y in allowed) { pos = post.innerHTML.indexOf(allowed[y]); if ((pos>0) && (post.innerHTML.substring(pos-24, pos-20)=="<a h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-24, pos-20)=="<A h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-63, pos-59)=="<a h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-63, pos-59)=="<A h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-64, pos-60)=="<a h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-64, pos-60)=="<A h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-65, pos-61)=="<a h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-65, pos-61)=="<A h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-66, pos-62)=="<a h")) b=1; if ((pos>0) && (post.innerHTML.substring(pos-66, pos-62)=="<A h")) b=1; } if (b) post.innerHTML=addHTML(post.innerHTML,0,false);}} </script> <script> function addSpoiler_bul(str,from,internal){ var pos=0,pos2=0,newpos=0 if((pos=str.indexOf("[bulka]",from))==-1) return str; if((pos2=str.indexOf("[/bulka]"),pos+8)==-1) return str; newpos=str.indexOf("[bulka]",pos+8) if(newpos<pos2 && newpos!=-1) str=addSpoiler_bul(str,pos+8,true) if((pos2=str.indexOf("[/bulka]",pos+8))==-1) return str; txt = str.substring(pos+7,pos2); if((sepPos=txt.indexOf("|",0))==-1) return str; txtrest = txt.substring(sepPos+1,txt.length); if((sepPos2 = txtrest.indexOf("|",0))==-1) return str; str=str.substring(0,pos)+makeSpoiler_bul( txt.substring(0,sepPos), txtrest.substring(0,sepPos2), txtrest.substring(sepPos2+1,txtrest.length) )+str.substring(pos2+8,str.length); if( str.indexOf("[bulka]")!=-1 && internal==false) str=addSpoiler_bul(str,0,false) return str} function makeSpoiler_bul(txt1,txt2,txt3){ txt='<a rel="shadowbox;'+txt3+'" href="'+txt1+'" title="'+txt2+'" class="previewlink"><img src="http://img4.imageshack.us/img4/5717/1e502.gif"><font color="maroon">'+txt2+'</font></a>'; return txt; } Shadowbox.init({ language: 'en', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); var bubbleImagePath = 'http://i082.radikal.ru/1002/a7/93e2e551a76c.png'; function tag_urlsh() {var FoundErrors = ''; var enterURL = prompt("Введите ссылку на флэш, видео, изображение или сайт", "http://"); var enterTITLE = prompt("Введите описание\n оно будет отображаться при просмотре", "нечто"); var enterTITLE2 = prompt("Введите размер окна, например height=600;width=800\n\n height - высота; width - ширина\n\n для сохранения оригинального размера, оставьте это поле пустым", "height=600;width=800"); if (!enterURL) {FoundErrors += " " + error_no_url;} if (FoundErrors) {alert("Ошибка!" + FoundErrors); return;} insert("[bulka]" + enterURL + "|" + enterTITLE + "|" + enterTITLE2 + "[/bulka]");} if((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){ elm=document.getElementById("pun-main").getElementsByTagName("div") for(x in elm) if(elm[x].className=="post-content"){ var post=elm[x] post.innerHTML=addSpoiler_bul(post.innerHTML,0,false)}} </script> <script> $("#form-buttons").find("tr td:nth-child(10)").after("<td id='button-shadow' style='background-image: none; text-align: center;'><img style='width: 16px; height: 16px;' src='http://img707.yfrog.com/img707/5896/shadowbox.png' title='Разместить контент (swf,flv,img,html)' onclick=tag_urlsh();'></td>"); </script> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 658; var slides = $('.slide'); var numberOfSlides = slides.length; // С помощью скрипта убираем прокрутку в контейнере. $('#slidesContainer').css('overflow', 'hidden'); // Свернем все вкладки .slides в блок #slideInner slides .wrapAll('<div id="slideInner"></div>') .css({ 'float' : 'left', 'width' : slideWidth }); // Проставим блоку #slideInner ширину, равную общей ширине контейнеров $('#slideInner').css('width', slideWidth * numberOfSlides); $('#slideshow') .prepend('<span class="control" id="leftControl"></span>') .append('<span class="control" id="rightControl"></span>'); manageControls(currentPosition); $('.control') .bind('click', function(){ currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; manageControls(currentPosition); $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); function manageControls(position){ // Скрыть левую стрелку у первого контейнера if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Скрыть правую стрелку у последнего контейнера if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script>
Поделиться52012-10-21 12:41:09
reersferfs
Страница: 1