DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 07. 10. 2006.   #1
robi-bobi
expert
Grand Master
 
Avatar robi-bobi
 
Datum učlanjenja: 05.10.2005
Lokacija: Sofia, Bulgaria
Poruke: 805
Hvala: 222
958 "Hvala" u 68 poruka
robi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu auru
Pošaljite poruku preko Skype™ za robi-bobi
Default CSS - footer na dnu strane

Probao sam da se snadjem na google, ali ocigledno ne trazim pravim keywordima

problem je sledeci:
imam
HTML kôd:
...
<body>
  <div id="container">
    ...
    <div id="footer"> ... </div>
  </div>
</body>
..
container treba da bude 780px width i centarlno pozicioniran. Takodje da se razvuche na celu visinu strane (i kad je sadrzaj mali)
stigao sam donekle sa ovim:

HTML kôd:
#container{
	position: absolute;
	width: 780px;
	bottom: 0px;
	top: 0px;
}
#footer {
	position: absolute;
	bottom:0px;
	width: 100%;

}
ali, ostaju nekoliko problema:

1) container nije centralno pozicioniran
probao sam sa:
HTML kôd:
		margin-left: -25%;
	left: 50%;
u #container, ali nije to to

2) prilikom resize-a (ili ukoliko je sadrzaj stranice veci od visine stranice) desava se to da #container jeste do dna strane, ali samo do vidljivog dna.

kako prevazici ove probleme

hvala unapred


EDIT:
mozda je lakse da dam primer ovako:
http://www.robi-bobi.net/tmp/tmp.html

Poslednja izmena od robi-bobi : 07. 10. 2006. u 00:28.
robi-bobi je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #2
robi-bobi
expert
Grand Master
 
Avatar robi-bobi
 
Datum učlanjenja: 05.10.2005
Lokacija: Sofia, Bulgaria
Poruke: 805
Hvala: 222
958 "Hvala" u 68 poruka
robi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu auru
Pošaljite poruku preko Skype™ za robi-bobi
Default

hm, a mozda da sve lepo uradim sa 3 diva (3-column)?


u svakom slucaju, chekam preporuke za gornji slucaj
robi-bobi je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #3
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Baci pogled na http://blog.html.it/layoutgala/ recimo layout 7.

Centriraš tako što postaviš text-align:center na body.

Razvlačenje na 100% visine koliko se sećam (ispraviće me neko) radi samo u quirks modu, tako što postaviš height na html, body i container na 100%.
jablan je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #4
robi-bobi
expert
Grand Master
 
Avatar robi-bobi
 
Datum učlanjenja: 05.10.2005
Lokacija: Sofia, Bulgaria
Poruke: 805
Hvala: 222
958 "Hvala" u 68 poruka
robi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu auru
Pošaljite poruku preko Skype™ za robi-bobi
Default

bacicu
mogu samo reci da text-align:center kod mene ne radi
takodje ni margin 0 auto
koliko vidim razlog je onaj position: absolute, koji pak sa svoje strane (a zajedno sa bottom: 0px) daje druge probleme
robi-bobi je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #5
Dragan Babić
Designer guy
Wrote a book
 
Avatar Dragan Babić
 
Datum učlanjenja: 06.06.2005
Lokacija: Novi Sad
Poruke: 1.373
Hvala: 55
42 "Hvala" u 22 poruka
Dragan Babić će postati "faca" uskoro
Pošaljite poruku preko Skype™ za Dragan Babić
Default

Nije neophodan quirks mode, stavi height:100% na html, body, i sve containere footera. i overi footer stick alt tehniku.
Dragan Babić je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #6
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

pa ne moze margin:auto, ako ga apsolutno pozicioniras. Apsolutno pozicioniranje znaci da si mu explicitno zadao gde ce da se nalazi, i da se browser tu nista ne pita. Stavi da ti je container position:relative i radice ti margin:auto (text-align: center je samo fix za IE, margine su pravilniji nacin centriranja bloka)

Druga varijanta je da ostavis absolutno, a da stavis sledece (ubacio sam i resenje za visinu 100%)
Kôd:
body, html { width:100%, height: 100%; padding:0; margin:0; }

#container{
	position: absolute;
	width: 780px;
        min-height: 100%;
	left: 50%;
        margin-left: -390px; /* pomeri ulevo za pola shirine */ 
}
/* hack za IE, bolje je ubaciti ga preko conditional comments, al da ne komplikujem */
* html #container { 
       height:100%;
       overflow:visible;
}
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #7
robi-bobi
expert
Grand Master
 
Avatar robi-bobi
 
Datum učlanjenja: 05.10.2005
Lokacija: Sofia, Bulgaria
Poruke: 805
Hvala: 222
958 "Hvala" u 68 poruka
robi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu auru
Pošaljite poruku preko Skype™ za robi-bobi
Default

10x

e sad, kako pozicionirati footer dole, a daprilikom resize-a nema problema
robi-bobi je offline   Odgovorite uz citat
Staro 07. 10. 2006.   #8
robi-bobi
expert
Grand Master
 
Avatar robi-bobi
 
Datum učlanjenja: 05.10.2005
Lokacija: Sofia, Bulgaria
Poruke: 805
Hvala: 222
958 "Hvala" u 68 poruka
robi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu aururobi-bobi ima spektakularnu auru
Pošaljite poruku preko Skype™ za robi-bobi
Default

snasao sam se
hvala svima

evo za arhivu:
HTML kôd:
body, html { width:100%, height: 100%; padding:0; margin:0; }

#container{
	position: absolute;
	width: 780px;
	min-height: 100%;
	left: 50%;
	margin-left: -390px; /* pomeri ulevo za pola shirine */ 
}
* html #container { 
       height:100%;
       overflow:visible;
}
#content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
#containerFooter {
  width: 100%;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
}
#footer{
	clear: both;
	color: #272900;
	text-align: right;
}

.............

...
<body>
  <div id="container">
    <div id="content">...</div>
    <div id="containerFooter"><div id="footer"> ... </div></div>
  </div>
</body>
..
bio bih zahvalan ako mi neko objasni #content:after
i tacnije:
- ovo :after se odnosi na mesto posle elementa?
- content: ".";?
- sto ne radi bez njega? zbog clear?

Poslednja izmena od robi-bobi : 07. 10. 2006. u 04:45.
robi-bobi je offline   Odgovorite uz citat
Staro 09. 10. 2006.   #9
aleck
član
Certified
 
Avatar aleck
 
Datum učlanjenja: 09.12.2005
Lokacija: Beograd
Poruke: 81
Hvala: 0
5 "Hvala" u 4 poruka
aleck is on a distinguished road
Default

Citat:
Originalno napisao robi-bobi
bio bih zahvalan ako mi neko objasni #content:after
i tacnije:
- ovo :after se odnosi na mesto posle elementa?
- content: ".";?
- sto ne radi bez njega? zbog clear?
:after i :before su pseudo-selektori koji kreiraju sadržaj koga originalno na stranici nema. "generated content" su ključne reči za pretragu po Netu.

Ono što staviš unutar content će biti umetnuto u dati element. ako je :after onda se umeće na kraj elementa, a :before znači da ide na početak elementa. Bitno je da shvatiš da se umetanje radi unutar elementa, ne tik pre/posle njega. Znači ta tačka će kreirati ovo: ".</div>" a ne "</div>."

Obzirom da se tačka pretvori u element blok tipa i nad time se primeni clear, onda to uradi clear svih elemenata unutar div-a. Bez toga, kada su ti sve kolone unutar containera floatovane, onda taj container ima visinu 0px.

Detaljno objašnjenje ove tehnike imaš na: http://www.positioniseverything.net/easyclearing.html
__________________
AV
aleck je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

Slične teme
Tema Početna poruka teme Forum Odgovori Poslednja poruka
Telekomove bele strane Dragi Tata Web design, Layout, User Interface 8 27. 12. 2007. 05:49
Navigacija strane pele Sva početnička pitanja 2 10. 12. 2007. 17:47
em vs px kod grafickih elemenata strane dinke (X)HTML, JavaScript, DHTML, XML, CSS 4 28. 09. 2007. 19:08
[css] kako napraviti funktionalni "Footer" darche (X)HTML, JavaScript, DHTML, XML, CSS 18 11. 12. 2006. 13:26
Zalepiti footer na dno centrirane strane i pokoja o brljama od savremenih browsera noviKorisnik (X)HTML, JavaScript, DHTML, XML, CSS 9 23. 11. 2005. 14:01


Vreme je GMT +2. Trenutno vreme je 17:11.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.