PDA

Pogčedajte punu verziju : CSS - footer na dnu strane

robi-bobi
06. 10. 2006., 23:25
Probao sam da se snadjem na google, ali ocigledno ne trazim pravim keywordima

problem je sledeci:
imam
...
<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:

#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:
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
06. 10. 2006., 23:37
hm, a mozda da sve lepo uradim sa 3 diva (3-column)?


u svakom slucaju, chekam preporuke za gornji slucaj :)
jablan
06. 10. 2006., 23:38
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
06. 10. 2006., 23:56
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., 00:01
Nije neophodan quirks mode, stavi height:100% na html, body, i sve containere footera. i overi footer stick alt (http://www.themaninblue.com/writing/perspective/2005/08/29/) tehniku.
ivanhoe
07. 10. 2006., 01:46
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%)
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., 03:29
10x

e sad, kako pozicionirati footer dole, a daprilikom resize-a nema problema
robi-bobi
07. 10. 2006., 03:43
snasao sam se
hvala svima

evo za arhivu:
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., 18:25
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