Threaded Mode | Linear Mode

**Kerber** · 19-09-2009 09:22 PM

Pozdrav,

Ja i jos jedno pitanje;

Zanima me kako definisati preko css-a staticni footer, da cijelo vrijeme bude na dnu i kad se skrola i dalje ostane na dnu.

Nesto kao na facebook-u, tamo gdje je chat i aplikacije?

Peace

**Kerber** · 19-09-2009 09:26 PM

Mislim da sam našao nešto, ako to bude to javim He he

U HTML-u:

Code:

<div id="container">

  <div id="content"></div>

  <div id="footer"></div>

</div>

U CSS-u:

Code:

#container {

  position:absolute;

  min-height:100%;

}

#content {

  margin-bottom:100px; /* same as footer height */

}

#footer {

  position:absolute;

  bottom:0;

  height:100px; /* same as content margin-bottom */

}

Len0 · 19-09-2009 09:34 PM

Mislim da to sto trazis je ovo:

Code:

position:fixed;

zero · 19-09-2009 10:52 PM

Ovo sto kaze Len0 (ni)je uredu, osim sto ne radi u IE-u, a ne zelis zapostaviti njegove korisnike (takvih jos ima o.O). Bolje probaj koristiti js.
Evo ovaj kod sam iskopao u arhivi xD (nisam ga ja napisao, da napomenem). Inace bi ovdje trebao se pomicati div prema dolje sam od sebe, no tu brzinu (xstep) sam mu namjestio na 0 Namigivanje

.

Code:

<html>

<head>

</head>

<body>

<div id="point1" STYLE="position:absolute;visibility:visible;">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

</a>

</td>

</tr>

<tr>

<td>

<center>hehehe

</a></center>

</td>

</tr>

<tr>

<td>

<center>bla-bla

</a></center>

</td>

</tr>

<tr>

<td>

<center>haha

</a></center>

</td>

</tr>

<tr>

<td>

<center>hehe

</a></center>

</td>

</tr>

</table>

</div>

<script LANGUAGE="JavaScript1.2">

var XX=20; // X position of the scrolling objects

var xstep=0;

var delay_time=60;

var YY=0;  

var ch=0;

var oh=0;

var yon=0;

var ns4=document.layers?1:0

var ie=document.all?1:0

var ns6=document.getElementById&&!document.all?1:0

if(ie){

YY=document.body.clientHeight;

point1.style.top=YY;

}

else if (ns4){

YY=window.innerHeight;

document.point1.pageY=YY;

document.point1.visibility="hidden";

}

else if (ns6){

YY=window.innerHeight

document.getElementById('point1').style.top=YY

}

function reloc1()

{

if(yon==0){YY=YY-xstep;}

else{YY=YY+xstep;}

if (ie){

ch=document.body.clientHeight;

oh=point1.offsetHeight;

}

else if (ns4){

ch=window.innerHeight;

oh=document.point1.clip.height;

}

else if (ns6){

ch=window.innerHeight

oh=document.getElementById("point1").offsetHeight

}

if(YY<0){yon=1;YY=0;}

if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}

if(ie){

point1.style.left=XX;

point1.style.top=YY+document.body.scrollTop;

}

else if (ns4){

document.point1.pageX=XX;

document.point1.pageY=YY+window.pageYOffset;

}

else if (ns6){

document.getElementById("point1").style.left=XX

document.getElementById("point1").style.top=YY+window.pageYOffset

}

}

function onad()

{

if(ns4)

document.point1.visibility="visible";

loopfunc();

}

function loopfunc()

{

reloc1();

setTimeout('loopfunc()',delay_time);

}

if (ie||ns4||ns6)

window.onload=onad

</script>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />fdsadfsfdssfdfdsfds

</body>

</html>

Malo prouci kod (meni se sada nije dalo... drugom prilikom He he

), pa iskombiniraj nesto.

Len0 · 20-09-2009 12:03 AM

Rješenje sa CSS radi u IE8. Ne znam za druge verzije.

**schmrz** · 20-09-2009 07:42 AM

Te "naprednije" verzije IE-a nisu problem. Problem je sto jos uvijek vecina koristi IE6 :\

r0tring · 30-09-2009 06:57 PM

Nisam primjetio ovu temu, dobro nije bila davno pa ovaj post necemo smatrati kao dizanje starih temi! Happy

Evo rjesenja problema:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Staticni Footer</title>

<style type="text/css">

 body {

          margin: 0px;

          padding: 0px;

          overflow: hidden;

         }

   #page {

              margin: 10px;

              overflow: auto;

              height: 93%;

              }

   #bottom {

                 width: 100%;

                 background: #18f8f8;

                 text-align: center;

                }

</style>

</head>

<body>

<div id="page">

    Ovdje ide sadrzaj stranice

</div>

<div id="bottom">A ovdje ide sadrzaj u staticni footer</div>

</body>

</html>

Spremiti kao stranica.html . Palac-gore

Threaded Mode \| Linear Mode Statični footer
Author	Message