Тестовое сообщение, тестируется шрифт

Тестовый форум

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Тестовый форум » CSS is my life » Csssssss


Csssssss

Сообщений 1 страница 6 из 6

1

test

0

2

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;
}

0

3

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

Ячейка

0

4

Код:
<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='Статистика'>&nbsp;<input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='2' id='bu2' title='О персонаже'>&nbsp;<input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='3' id='bu3' title='История'>&nbsp;<input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='4' id='bu4' title='Инвентарь'>&nbsp;<input type='button' onClick=\"return HideInfo('info"+i+"',this)\" value='5' id='bu5' title='Награды'>&nbsp;</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 = 'http://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="http://forumupload.ru/uploads/000e/32/ad/16421-1.png" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://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='http://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("&lt;",from))==-1) return str;
if((pos2=str.indexOf("&gt;"),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>

0

5

reersferfs

0

6

http://s3.uploads.ru/nYKsh.jpg

0


Вы здесь » Тестовый форум » CSS is my life » Csssssss