Kako da tabelu zamenim sa divovima?

[ nezki @ 30.03.2009. 21:35 ] @

Pozdrav svima. Napravio sam jednu html stranicu koristeci tabelu, ali zelim da ne koristim tabele vec samo divove. Pocetnik sam sa css-om i pokusavao sam napraviti ovo bez tabele ali nikako mi ne ide. Pomucio sam se bas dosta, a verujem da je za nekoga ko poznaje css ovo jako prosto. Pa ako bi mi neko samo malo pomogao kako da tabelu zamenim sa divovima i napravim bas ovakvu strechabilnu stranicu.
Stranicu mozete preuzeti i pogledati na www.strictsystem.com/pomoc.html

[ snake_master @ 30.03.2009. 23:33 ] @

Tebi treba ovako nešto:

Zakačio sam ti uradjen layout, ovo je uradjen primer prema mnogim layoutima koji se nalaze na adresi http://blog.html.it/layoutgala/ prouči date layoute sa ove stranice, zatrebaće ti...

[ nezki @ 31.03.2009. 07:03 ] @

Hvala ti. Ova strana je extra. Puno mi je pomogla da ukapiram kako se rasporedjuju divovi. Ali ono sto meni treba i sto jos uvek ne mogu da napravim jeste da mi centralni div bude strecabilan, tj da mi futer uvek bude zakucan za dno ekrana, a da sredisnji div ima scrol ako ima veci sadrzaj. ja sam to napravio sa tabelom, ali sa divovima ne umem jos uvek, pa ako moze samo mala pomoc oko css-a. Ja sam pokusao da stavim za taj div da je height: 100% ali ne ide. Onda sam stavio da mi je body 100% ali ni to ne ide. Ne znam gde gresim.

[ virtualVoid @ 31.03.2009. 11:30 ] @

Mislim da scroll mozes samo preko frameova koji su prastari i neprijatelji web crawlera. osim toga, osnovna namjena DIV-a je da se koristi kada ne znas sirinu i duzinu rubrike. nemoj se uciti naopako. ako vec zelis da npr. naslovna stranica cijela udje u ekran, onda je ostavi takvom, a dalje linkuj sadrzaj na rastezljive stranice.

[ nezki @ 31.03.2009. 11:52 ] @

Mislim da nisam dobro objasnio. znaci meni je samo potrebno da na ovoj sada stranici sa divovima sto je snake_master napravio centralni div bude 100%, to jest da footer bez obzira koliko ima sadrzaja u centralnom divu uvek bude zakucan na dnu ekrana. Mislim da to moze da se napravi i bez frejma.

[ Tudfa @ 31.03.2009. 11:59 ] @

@nzeki

A šta fali tabelama dokle god možeš da postigneš željeni izgled ? Postoje neki baš cool sajtovi čiji je layout uradjen u tabelama

@virtualVoid

Može da se napravi i skorolujući div pomoću overflow property-a...Samo definišeš fiksnu visinu tog diva i postaviš overflow na auto.

pozZ

[ nezki @ 31.03.2009. 12:15 ] @

Ovako, meni treba da kada otvorim ovu stranicu, footer bude uvek na dnu ekrana, a ako uzmem na primer da smanjujem prozor browsera footer uvek ostaje na dnu, a header na vrhu, a samo se centralni div skuplja i siri. Ne verujem da to ne moze preko css-a da se resi. Ako moze preko tabele mora da moze i preko divova.

[ virtualVoid @ 31.03.2009. 12:29 ] @

Citat:

Tudfa:
@virtualVoid

Može da se napravi i skorolujući div pomoću overflow property-a...Samo definišeš fiksnu visinu tog diva i postaviš overflow na auto.

pozZ

Cool! :D

@nezki
Pozicija absolute, podesis TOP. A onda napravis skrol efekt na nacin kako je rekao tudfa.

[ nezki @ 31.03.2009. 12:37 ] @

Skrol meni nije bas toliko bitan, zaboravite skrol to ja umem da napravim samo overflow: auto i to je sve sto mi treba, mene muci to sto ne mogu nikako da namestim, da mi footer bude na dnu stranice, znaci da bez obzira da li imam sadrzaj u centralnom divu ili ne on bude 100% a samim tim footer bude na dnu prozora. i kako se siri i skuplja prozor samo se siri i skuplja centralni div. kao sto je ona moja stranica sa tabelama kada se otvori u mozili.

[ snake_master @ 31.03.2009. 13:09 ] @

Baš si me zainteresovao, i evo probao sam, za ovo kratko vreme koliko sam eksperimentisao, mislim da ne može (radovaću se ukoliko me neko ispravi)

(Razmišljam naglas:)):

Meni je palo na pamet da div Footer ima "position: absolute; bottom: 0;" ali u odnosu na šta je bottom: 0;??? ako je u odnosu na "body" onda se body završava gde se i footer završava tako da ta mogućnost otpada... U odnosu na html nije moguće...
A ako bi imali neki div "container" opet bi njegov završetak bio posle ili pre "footera" (opet u zavisnosti od sadržaja a ne veličine browsera).

(kraj razmišljanja:)

Uh, zabole me glava... :D

A onda se setiš jednog linka!

Postoji i jedan css trik. Zove se sticky footer, nisam mnogo eksperimentisao sa njim, ali evo ti link pa pogledaj:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

pozdrav :)

[ nezki @ 31.03.2009. 13:52 ] @

Evo pokusavam i ja.
Ma nema sanse da se napravi. POkusavam da napravim stranicu koju si ti uradio da joj footer bude na dnu ali nema sanse. Jeste da na ovom linku ima odradjeno nesto slicno ali nema sanse da se ova stranica koju si ti uradio da se napravi da footer bude na dnu prozora.
ako neko napravi svaka mu cast, ja cu ipak izgleda morati da koristim tabele.

[ snake_master @ 31.03.2009. 17:40 ] @

Offtopic:
Ne znam da li ti je to baš toliko važno da ti footer uvek bude vidljiv i zalepljen za dno browsera. Pogledaj samo sve sajtove koji su rađeni u skorije vreme uglavnom su optimizovani prema velikim rezolucijama i sa sasvim drugačijim izgledom layouta.

Pogledaj: http://www.cssmania.com videćeš kakav je trend izrade izgleda web stranica...

[ nezki @ 31.03.2009. 18:49 ] @

Tako se trazi od mene. Meni je generalno ovo glupa ideja ali moram da napravim bas tako.

[ jablan @ 31.03.2009. 18:57 ] @

Jesi gledao Google: "css footer at bottom"?

[ nezki @ 31.03.2009. 19:03 ] @

Nasao sam ja puno primera na netu, ali ovo sto sam ja opisao ne moze nikako da se namesti, a deluje skroz lako.

[ valjan @ 31.03.2009. 22:26 ] @

Moze se footer "zakucati" uz donju ivicu ekrana ali uz pomoc JavaScripta, tako sto se proracuna polozaj u zavisnosti od zeljenih koordinata gornjeg levog coska DIVa i dimenzija prozora i dodeli vrednost CSS parametrima left i top:

Code:
    myFooter = document.getElementById(imeDivFootera);
    myFooter.style.left = this.x + 'px';
    myFooter.style.top = this.y + 'px';

A koordinate X i Y racunas po sledecoj formuli (verzija za IE6):

Code:
this.x = x-document.body.scrollLeft-window.screenLeft;
this.y = y-document.body.scrollTop-window.screenTop;

Verzija za ostale browsere:

Code:
this.x=x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
this.y=y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;

Koristio sam nesto slicno za pozicioniranje & pojavljivanje "pop-up" div-a kada se misem predje preko "vruce tacke" na stranici, pa se nadam da ces moci da ga preradis i upotrebis u tvom primeru.

[ DzemaludinPerajic @ 01.04.2009. 01:24 ] @

Moze i pomocu CSS-a samo sto ima jedan mali problem :), ali o njemu cemo kasnije...

Tom div-u (id=footer ili kako god...) koji hoces da "zakucas" na dno strane odredi u css-u:

#footer {
position: fixed;
bottom: 0;
}

i to je to...

osim, sto verovatno i nagadjate, u IE 6 ta fora uopste ne radi i taj div se ponasa kao da ste umesto 'fixed' stavili 'absolute', tj. div se nalazi na dnu cele strane.
Hack za IE6 nisam nasao (a trazio sam...) i jedino sto sam nasao jeste savet da za tu grupu ljudi koja koristi IE 6 napravite stranu koja ce da izgleda drugacije ali ipak prihvatljivo. Mada, to bas i nije neko resenje jer u Srbiji jos uvek veliki broj ljudi koristi IE 6 zbog toga sto dolazi sa samim XP-om i tako dalje...

[ ksrele @ 01.04.2009. 01:29 ] @

I ja sam hteo da ti predlozim JS (JavaScript) ali sam cackao onaj primer sa linka i resio ti nesto ovako:

layout.css

Code:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    /*height: auto !important;*/
    height: 100%;
    margin: 0 auto -4em;
    overflow: auto;
    background-color: #87A324;
}
.footer, .push {
     height: 4em;
     background-color: #A7A384;
}

test.html

Code:

<html>
 <head>
 <link rel="stylesheet" href="layout.css" />
 </head>
 <body>
 <div class="wrapper">
 
 Your website content here. 
 fdfdglkj fdgjhf dfd fd df dsf 
 sg sdfgfds gfd gfs 
 g dfg sfgsd gsd gsd g dg 
 fdg fdg fdg dfg df 
 gdf ghdf ghf dhdg hd gdh 
 dfg fg fs gfds g agfdsg 
 sdg sdg sdagsd gsg sdgsdg dgds 
 gsdg dg sdg dsg sdg 
 dfdg;lkj fdgjhf dfd fd df dsf 
 sg sdfgfds gfd gfs 
 g dfg sfgsd gsd gsd g dg 
 fdg fdg fdg dfg df 
 gdf ghdf ghf dhdg hd gdh 
 dfg fg fs gfds g agfdsg 
 sdg sdg sdagsd gsg sdgsdg 
 dgds gsdg dg sdg dsg sdg 
 
 <div class="push"></div>
 </div>
 <div class="footer">
 <img src="footer.jpg" /> Copyright (c) 2009 By Srele
 </div>
 </body>
</html>

Tajna je u slici (footer.jpg) koja se nalazi u footeru koja skriva sadrzaj glavnog diva. Slika ne sme biti veca od samog diva!
Pazi, probano je u Mozilli i lepo radi. Onaj gorniki div i one sa strane nisam pokusavao da stavim ali kontam da ti to nece biti problem.

[ ksrele @ 01.04.2009. 01:43 ] @

Probao sam, radi i u IE-u.
Evo ti i primer. Nije idealan ali je OK :)

[ snake_master @ 01.04.2009. 13:06 ] @

Evo ga! Prepravljen sticky footer na onaj primer što sam uploadovao... Nadam se da je sad dobro. Provereno radi u IE6.

Fora je u tome da se:

Code:
html, body {height: 100%; } /* kao što je vec dato u primeru "Sticky footer" */

Sledeća bitna stavka! Da se kao što je DzemaludinPerajic rekao stavi:

Code:
#footer {position: fixed; bottom: 0;}

A za IE6 sledeća fora:

Code:
* html #footer {position: absolute;}

Ako sam dobro shvatio iz onoga što sam pročitao na netu: zbog html, body {height: 100%},
IE6 "position: absolute;" vidi kao "position: fixed;"

Nadam se da je to ono pravo :)

[ nezki @ 01.04.2009. 13:38 ] @

To jeste to, ali nazalost nije ono sto meni treba.
Ono sto meni treba sam shvatio da ne moze ni preko tabela da se napravi, mozda jedino preko javascripta.
Ova tvoja poslednja stranica koju si okacio je najbliza tom resenju. A ono sto meni jos treba jeste da ovaj sredisnji div "content" ima scroll, a da sam pretrazivac nema. Zamislite da vam je sajt uvek zakucan za ekran a samo vam se sredisnji div menja i scroluje.
Znaci da samo na ovoj stranici koju postavljam sada sredisnji div ima scroll a scroll na browseru da ne postoji.
Mislim da je to ne moguce napravitini preko divova ni preko tabela, ali eto ako neko bas razbija css mozda uspe, ja sam vec danima pokusavao d ato uradim na bilo koji nacin ali ne ide. Jer je problem sto sredisnji div mora biti strecabilan a istovremeno i d aima scroll.

[ ksrele @ 01.04.2009. 17:53 ] @

Jesi pogledao primer koji sam ja upoloadovo?
Tamo je bas tako, samo sredisnji div ima scroll a imas i Top i Footer div, jedino nema onih sa strane, ali mislim da njih nije problem staviti?

[ Nemke_BG @ 01.04.2009. 18:08 ] @

prema ovoj tvojoj slici, zakljucio sam da tebi treba nesto ovog tipa:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

naravno ovo nece raditi u IE 6 bez nekog JS -a ili skroz opasnog CSS workaround-a.......

A ako sam te razumeo za skroll, onda probaj ovako nesto da dodas uz ovaj gore primer....

Code:

html
{
overflow: hidden;
}
body
{
overflow: auto;
}

[ nezki @ 01.04.2009. 19:12 ] @

Citat:

ksrele: Jesi pogledao primer koji sam ja upoloadovo?
Tamo je bas tako, samo sredisnji div ima scroll a imas i Top i Footer div, jedino nema onih sa strane, ali mislim da njih nije problem staviti?

Da tvoj primer je bas ono sto mi treba, ali ja sam pokusavao da ubacim u njega onaj moj levi i desni div sa borderima i u futeru i hederu po jos jedan levi i desni div sa borderima, bas kao sto je na stranici www.strictsystem.com/pomoc.html, ali nisam uspeo. Sve mi se poremeti, pa sam onda odustao i pokusao opet da sve napravim sa tabelama ali ni to mi nije islo, pa sam pokusao da napravim opet sve sa java scriptom pa sam napravio radi u Mozili ali ne radi u IE-u, i onda sam se opet vratio na css

, sto i sada pokusavam.
Problem deluje lako resiv ali jos uvek nemam resenje. Kada bi uspeo da u tvoj primer ubacim divove sa leve i desene strane sa borderima to bi bilo resenje svega.

[ nezki @ 01.04.2009. 21:45 ] @

Evo uspeo sam da napravim preko tabela da radi u Mozili i Safariju, a u Za internet Explorer treba samo da se u css-u doda za klasu d5 width: 100%; height: 100%
Kako bih to mogao da resim da kada se stranica ucitava u IE za nju vazi jedan stil za klasu d5 a kada je u ostalim pretrazivacima vazi stil iz css-a.
Nesto sam googlao ali nisam siguran da sam ukapirao.

Eto to je preko tabela, ali preko divova mi ne ide, bio sam blizu ali nisam uspeo.

[ nezki @ 02.04.2009. 13:05 ] @

Jos uvek se mucim sa ovim problemom, napravio sam sada bas ono sto mi treba preko tabela i radi u svim pretrazivacima, ali sastavljeno preko stapa i kanapa.
U ovom prilogu test.zip je stranica uradjena preko tabela ali jos uvek pokusavam da sve zamenim sa divovima, pa ako neko nadje vrmena samo da vidi da li uopste moze ovo da se uradi preko divova, da znam da odustanem.

[ nezki @ 03.04.2009. 11:30 ] @

Izgleda da su dobre stare tabele neizbezne u ovom slucaju :)
Googlao sam ali jos uvek nemam resenje da uradim ovo sa divovima.

Citat:

ksrele: Jesi pogledao primer koji sam ja upoloadovo?
Tamo je bas tako, samo sredisnji div ima scroll a imas i Top i Footer div, jedino nema onih sa strane, ali mislim da njih nije problem staviti?

Cak i onaj ksreletov primer koji je skroz blizu resenja nisam uspeo da prepravim. Izgleda da definitvino ne moze preko divova ili sam ja jos pocetnik za to.