CSS - footer na dnu strane

robi-bobi · 07. 10. 2006.

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

robi-bobi · 07. 10. 2006.

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

u svakom slucaju, chekam preporuke za gornji slucaj

jablan · 07. 10. 2006.

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%.

robi-bobi · 07. 10. 2006.

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

Dragan Babić · 07. 10. 2006.

Nije neophodan quirks mode, stavi height:100% na html, body, i sve containere footera. i overi footer stick alt tehniku.

ivanhoe · 07. 10. 2006.

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

robi-bobi · 07. 10. 2006.

10x

e sad, kako pozicionirati footer dole, a daprilikom resize-a nema problema

robi-bobi · 07. 10. 2006.

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?

aleck · 09. 10. 2006.

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

07. 10. 2006.	#1
robi-bobi expert Grand Master Datum učlanjenja: 05.10.2005 Lokacija: Sofia, Bulgaria Poruke: 805 Hvala: 222 958 "Hvala" u 68 poruka	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.

07. 10. 2006.	#5
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	Nije neophodan quirks mode, stavi height:100% na html, body, i sve containere footera. i overi footer stick alt tehniku. __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

07. 10. 2006.	#6
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	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.

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

07. 10. 2006.	#3
jablan VD IT Direktora Invented the damn thing Datum učlanjenja: 08.06.2005 Lokacija: Beograd Poruke: 2.118 Hvala: 503 1.307 "Hvala" u 282 poruka	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%.