Pozicioniranje lejera na dno stranice.

[ Milan Andjelkovic @ 03.11.2003. 23:16 ] @

Hoću da pozicioniram lejer na dno stranice, ali tako da se on postavi ispod ostatka sadržaja.

Npr. na stranici imam nekoliko lejera i jednu tabelu, i oni zajedno određuju da je visina stranice 1000px. E sad ako ja napravim css tako da apsolutno pozicionira lejer 5px od dna stranice, on će se preklapati sa lejerom koji se već nalazi na dnu stranice.
Ono što ja hoću je da taj sporni lejer (visine npr 15px) postavim na dno, ali ispod ostatka, tako da bi visina stranica iznosila 1000+15+5px

Još da napomenem da, naravno, ovo hoću da uradim u opštem slučaju, znači opcija pozicioniranja od vrha 1000px otpada :)

Nadam se da sam bio dovoljno jasan, ako nisam recite pa da ubacim koju sliku.

Hvala.

[ valajbeg @ 03.11.2003. 23:57 ] @

jao E mangel bas treba slika..
Ok Je ovo..al' nevidim sta je tu Problem.. dopisi tamo as tabeju na dnu ...
cime radis.. jel' pises u nekom text editoru il' :?? sta.!?
de brate Kod ako mozesH :-P.:-P.

[ -zombie- @ 04.11.2003. 05:27 ] @

stvarno bi trebao da daš malo više informacija, možda neku skicu i/ili kod.

ovako mogu samo da nagađam. kako su pozicionirani ta tabela i ostali slojevi? da li normalno, apsolutno, relativno ili kako?

onda, gde se u HTML kodu nalazi daj sloj koji treba da ide na dno stranice? i da li treba da bude fixne ili promenjive veličine (visine)?

ako je taj sloj u HTML kodu na kraju fajla, i ako je sve ostalo pozicionirano normalno, onda je to najlakša solucija. treba samo da dodaš donju marginu na taj sloj, a on će već sam da se nađe na dnu.

drugi relativno lak slučaj je kada su tabela i/ili ostali slojevi pozicionirani absolutno, a donji sloj fixne visine (npr 15px). onda je najlaše da dodaš donju marginu na te absolutne lejere od npr 20-25px, a da i taj donji lejer postaviš absolutno, sa otprilike ovakvim CSSom:

Code:

#glavni {
    position: absolute;
    // top, left, ...
    margin-bottom: 25px;
}
#dno {
    position: absolute;
    bottom: 5px;
    height: 15px;
}

ima još mogućnnosti, ali moraš da daš više informacija...

[ Milan Andjelkovic @ 04.11.2003. 17:56 ] @

Stranica izgleda otprilike ovako:

Code:

<html>
...
<body>

<table class="n-tabela" /*(position: absolute; left: 0px; top: 0px;)*/ width="100%" height="188">
...
</table>

<div class="pozicija /*(position: absolute; top: 100px; right: 8%;)*/> ... </div>

<table class="up-tabela" (position: absolute; width: 100%; top: 230px;)>
...
</table>

<div class="dno" /*(height: 15px; width: 80%; ...)*/ >...</div>

</body>
</html>

U zagradama sam dao opis odgovarajućeg css-a, da ne bih kopirao ceo kod.

E sad, kako da namestim da se lejer dno nalazi ispod up-tabele? Pokušavao sam da se snađem sa onim što si napisao, ali nisam uspevao da nađem prihvatljivo rešenje. Visina lejera dno je fixna 15px, dok visina up-tabele nije, već zavisi od svojih elemenata.

[ -zombie- @ 04.11.2003. 18:38 ] @

a što ovo ne radi?

Code:

.up-tabela {
    // tvoj css, i dodaj:
    margin-bottom: 25px;
}
.dno {
    position: absolute;
    bottom: 5px;
    height: 15px;
}

ako i dalje imaš problema, okači celu stranicu negde, pa da gledamo dalje...

[ Milan Andjelkovic @ 04.11.2003. 20:36 ] @

Ne radi i nije mi jasno zašto.

Evo šta se dešava:

http://www.empinity.com/upapir2.htm

Imam utisak da je nešto užasno glupo i prosto, samo ne znam šta... :)

btw. u ie-u ne radi blink iz css-a?

[Ovu poruku je menjao mangel dana 05.11.2003. u 05:26 GMT]

[ tOwk @ 05.11.2003. 01:04 ] @

z-index: BROJ
position: fixed

[ Milan Andjelkovic @ 05.11.2003. 02:21 ] @

Hmm, zar z-index ne služi za određivanje toga koji će lejer biti prikazan iznad kog, dakle nešto kao treća dimenzija?

Ne znam na šta si mislio sa position: fixed ?

[ tOwk @ 05.11.2003. 02:27 ] @

Citat:

mangel:
Hmm, zar z-index ne služi za određivanje toga koji će lejer biti prikazan iznad kog, dakle nešto kao treća dimenzija?

Pa da, ako si na to mislio pod „ispod ostalog sadržaja“. Ako ne, onda...

Citat:

Ne znam na šta si mislio sa position: fixed ?

...si možda mislio na nešto kao što je urađeno na http://recnik.srpski.org/nadji/^.x (da bude duži tekst da bi video kako izgleda)?

Meni nije jasno šta želiš da postigneš, pa je možda u tome problem ;-)

Izmena:
Usput, dok radiš na nečemu, mnogo je lakše isprobavati kada je i stil u istom fajlu kao i HTML kod.
Takođe, probaj i „position:static“ i „relative“, pošto mi zaista nije jasno šta želiš da postigneš.

[ Milan Andjelkovic @ 05.11.2003. 02:41 ] @

Citat:

Pa da, ako si na to mislio pod „ispod ostalog sadržaja“. Ako ne, onda...

Hehe, ne - u vidu sam imao samo dve dimenzije :)

Citat:

...si možda mislio na nešto kao što je urađeno na http://recnik.srpski.org/ ?

Provalio sam to sa fixed, ali nisam ni na to mislio. Treba mi lejer koji će da stoji na samom dnu stranice, ispod (posle) ostatka sadržaja.

No dobro, hvala u svakom slučaju...

[ tOwk @ 05.11.2003. 03:08 ] @

Hm, stvarno me zbunjuješ. Jesi li probao uopšte da izbaciš „position: bilošta“ iz definicije za dno? To će ti smestiti taj sloj „ispod“ ostalog sadržaja (tabela, itd.).

[ Milan Andjelkovic @ 05.11.2003. 03:13 ] @

Tako sam i ja mislio, ali kada sam shvatio da se to neće desiti, postavio sam pitanje ovde :)

[ Milan Andjelkovic @ 05.11.2003. 04:47 ] @

Uz dugotrajno mučenje sa glupim ie-om i malo boljom mozillom naš css-guru je našao rešenje. Postovaću sutra ako nekog zanima. Odoh sad da spavam.

Hail -zombie- :)

[ Milan Andjelkovic @ 12.11.2003. 16:00 ] @

Nisam stigao ranije da postujem rešenje, ali evo, bolje ikad nego nikad, jelte.

Na kraju sporni css izgleda (ukratko) ovako:

Code:
.dno {
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333366;
    height: 35px;
}

Kao što možete da primetite, ne postoji nijedna odrednica za vertikalno pozicioniranje.
Naime, problem je, ako se dobro sećam bio logično rešen, ali samo u mozilli, dok je ie iz nerazumljivih (ali svima nam poznatih) razloga pravio probleme. Tako se ispostavilo da je verovatno najbezbolnija opcija postaviti sporni lejer dno na sam kraj u kodu (neposredno pre [/body] taga), bez odrednica o pozicioniranju i očekivati da sve bude kako treba.
Ali naravno ni to ie-u nije bilo dovoljno pa je postalo neophodno ubaciti liniju:

Code:
<div style="height: 230px;"></div>

na sam početak koda, tj. odmah posle [body] taga.
Pitaćete kakve sad to ima veze, a ja ću vam reći ne znam - pitajte zombija, ali nešto mi se čini da ni njegov odgovor neće biti mnogo drugačiji :)

Sve u svemu, hvala svima koji su pokušali da pomognu, a posebno zombiju koji je i uspeo.

Pozdrav.