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://upforme.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://upforme.ru/uploads/000e/32/ad/16421-1.png" type="image/vnd.microsoft.icon">
<link rel="icon" href="https://upforme.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
