/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Placering af footer med CSS
Fra : Jean Jensen


Dato : 22-09-08 09:32

position:fixed;
bottom:0%;

Med ovenstående BLIVER footeren i bunden af skærmen - også selvom
teksten fylder mere end 100% af skærmens højde (teksten lægger
sig bag footer)

Hvis jeg i stedet sætter

position:inherit;

vil min footer altid lægge sig nederst - uanset hvor meget tekst
der er i indhold/content...

Hvordan får jeg footer til at lægge sig i bunden af skærmen,
selvom der kun er tekst til 30% af skærmens højde (dette vil
resultere i en masse tom ingenting, men det er okay). Hvis der så
er tekst til mere end skærmens højde, så skal footer lægge sig
nederst - under skærmens højde?

Hvis det er ren volapyk, vil jeg gerne omformulere...

\ Kapunen

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Philip Nunnegaard (22-09-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 22-09-08 12:35

"Jean Jensen" <jejSNABEL@podaPUNKTUM.com> skrev

> Hvordan får jeg footer til at lægge sig i bunden af skærmen,
> selvom der kun er tekst til 30% af skærmens højde (dette vil
> resultere i en masse tom ingenting, men det er okay). Hvis der så
> er tekst til mere end skærmens højde, så skal footer lægge sig
> nederst - under skærmens højde?

Problemet er sådan set at du ikke kender brugerens skærmhøjde eller rettere
sagt dennes browservindues højde.
Men måske kan du klare det ved at sætte en min-height i procent på det
overordnede element:

min-height: 90%;

Sjus dig frem til det magiske procenttal der giver et brugbart resultat.
Jeg _mener_ også at IE6 understøtter lige min-height. (men ikke max-height,
min-width og max-width).


Birger Sørensen (22-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 22-09-08 12:47

Philip Nunnegaard skrev:
> "Jean Jensen" <jejSNABEL@podaPUNKTUM.com> skrev
>
>> Hvordan får jeg footer til at lægge sig i bunden af skærmen,
>> selvom der kun er tekst til 30% af skærmens højde (dette vil
>> resultere i en masse tom ingenting, men det er okay). Hvis der så
>> er tekst til mere end skærmens højde, så skal footer lægge sig
>> nederst - under skærmens højde?
>
> Problemet er sådan set at du ikke kender brugerens skærmhøjde eller rettere
> sagt dennes browservindues højde.
> Men måske kan du klare det ved at sætte en min-height i procent på det
> overordnede element:
>
> min-height: 90%;
>
> Sjus dig frem til det magiske procenttal der giver et brugbart resultat.
> Jeg _mener_ også at IE6 understøtter lige min-height. (men ikke max-height,
> min-width og max-width).

Men IE6 understøtter ikke bottom :...

Birger



Philip Nunnegaard (22-09-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 22-09-08 13:20

"Birger Sørensen" <sdc@bbsorensen.com> skrev

> Men IE6 understøtter ikke bottom :...

Har lige testet det, og det virker nu fint.
Til gengæld fik jeg så konstateret at min-height ikke virker i IE6.
Skodbrowser!


Birger Sørensen (22-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 22-09-08 16:48

Philip Nunnegaard frembragte:
> "Birger Sørensen" <sdc@bbsorensen.com> skrev
>
>> Men IE6 understøtter ikke bottom :...
>
> Har lige testet det, og det virker nu fint.
> Til gengæld fik jeg så konstateret at min-height ikke virker i IE6.
> Skodbrowser!

Javel ja.
Her virker det bestemt ikke...
http://bbsorensen.dk

Birger



Erik Ginnerskov (22-09-2008)
Kommentar
Fra : Erik Ginnerskov


Dato : 22-09-08 19:55

Philip Nunnegaard wrote:

> Har lige testet det, og det virker nu fint.
> Til gengæld fik jeg så konstateret at min-height ikke virker i IE6.
> Skodbrowser!

Det virker da fint i IE 6:

http://hjemmesideskolen.dk/html/testsider/minheight.asp

Derimod virker max-height, min-width og max-width (som Philip skrev) ikke i
IE 6 uden specielle definitioner:

http://hjemmesideskolen.dk/html/testsider/maxheight.asp
http://hjemmesideskolen.dk/html/testsider/minwidth.asp
http://hjemmesideskolen.dk/html/testsider/maxwidth.asp

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk



Erik Ginnerskov (22-09-2008)
Kommentar
Fra : Erik Ginnerskov


Dato : 22-09-08 20:02

Erik Ginnerskov wrote:
> Philip Nunnegaard wrote:

Der gik da vist rod i mine citater. Det var denne, jeg skulle have svaret
på:

Birger Sørensen wrote:

>>> Men IE6 understøtter ikke bottom :...

>> Har lige testet det, og det virker nu fint.
>> Til gengæld fik jeg så konstateret at min-height ikke virker i IE6.
>> Skodbrowser!
>
> Javel ja.
> Her virker det bestemt ikke...

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk



Philip Nunnegaard (22-09-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 22-09-08 20:12

"Erik Ginnerskov" <erik.ginnerskov@live.dk> skrev

> Det virker da fint i IE 6:
>
> http://hjemmesideskolen.dk/html/testsider/minheight.asp
>
> Derimod virker max-height, min-width og max-width (som Philip skrev) ikke
> i IE 6 uden specielle definitioner:

Altså lige et kort oprids:
Min-height virker, men ingen af de 3 andre muligheder (som jeg regnede med
før jeg testede).
Bottom... ?

Men lad os antage at bottom _ikke_ dur med IE 6:

Så læg det ind således:

<div id="indhold">
Sidens hovedindhold (ikke menuer osv.)
</div>

<div id="footer">
Footerens indhold
</div>

#indhold {
min-height: 90%;
}

#footer {
clear: both;
}

clear:both for at sikre at den lægger sig ned under #indhold.

Muligvis skal begge div'er pakkes ind i en overordnet div med en min-height
også for at de 90% ikke bliver 90% af ingenting. Jeg har desværre ikke tid
til at efterprøve noget af det nu, så måske vrøvler jeg.


Birgit Holme (22-09-2008)
Kommentar
Fra : Birgit Holme


Dato : 22-09-08 20:42

Philip Nunnegaard wrote in dk.edb.internet.webdesign.html:

> #footer {
> clear: both;
> }
>
> clear:both for at sikre at den lægger sig ned under #indhold.
>
> Muligvis skal begge div'er pakkes ind i en overordnet div med en min-height
> også for at de 90% ikke bliver 90% af ingenting. Jeg har desværre ikke tid
> til at efterprøve noget af det nu, så måske vrøvler jeg.
>

Jeg har næsten revet alt mit hår ud, håber en eller anden kan forklare, hvad
jeg gør forkert.

http://www.skatecentral.com/newstartpage.php

Denne sides .css virker fint, når der "bare er tekst og billeder" i
maincontent, så bliver footeren hvor den skal, nemlig forneden!!

Men så ville jeg lave det så forsiden er en mængde bokse som så kunne
formateres forskelligt etc. MEN så flyder min footer op. Jeg kunne jo
selvfølgelig lave en speciel #maincontent for forsiden (resten af siderne
kommer til at bestå af tekst og billeder og der vil det ikke blive noget
problem)

Jeg prøvede at sætte højde på #maincontent og det virker så footeren bliver i
bunden. Men det er ikke rigtig en løsning da jeg vil have at selve sidedesignet
er supersimplet og ens til alle sider, det er nemlig ikke min egen side, men en
jeg laver for en kammerat, som derefter selv skal vedligeholde den (og hans
ambitioner er ikke udi webdesign).

Så prøvede jeg at sætter footeren til "clear both" (god timing med det her
indlæg fra en anden bruger!!) og det virker som sådan, bare at nu er der ikke
nogen "kant" men i det mindste flyder footeren ikke frit rundt på siden.

Så på denne version http://www.skatecentral.com/newstartpage.php er designet
som jeg vil have det, men ja ingen "kant"

Hlææælp! /Birgit



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birgit Holme (22-09-2008)
Kommentar
Fra : Birgit Holme


Dato : 22-09-08 21:38

Doh! glem dette spørgsmål, jeg kunne jo bare sætte min "border" som baggrund i
#container.

Så nu virker det.

Godt jeg lavede den kop te!

Men tak for hjælpen!! / Birgit



Birgit Holme wrote in dk.edb.internet.webdesign.html:
> Philip Nunnegaard wrote in dk.edb.internet.webdesign.html:
>
> > #footer {
> > clear: both;
> > }
> >
> > clear:both for at sikre at den lægger sig ned under #indhold.
> >
> > Muligvis skal begge div'er pakkes ind i en overordnet div med en min-height
> > også for at de 90% ikke bliver 90% af ingenting. Jeg har desværre ikke tid
> > til at efterprøve noget af det nu, så måske vrøvler jeg.
> >
>
> Jeg har næsten revet alt mit hår ud, håber en eller anden kan forklare, hvad
> jeg gør forkert.
>
> http://www.skatecentral.com/newstartpage.php
>
> Denne sides .css virker fint, når der "bare er tekst og billeder" i
> maincontent, så bliver footeren hvor den skal, nemlig forneden!!
>
> Men så ville jeg lave det så forsiden er en mængde bokse som så kunne
> formateres forskelligt etc. MEN så flyder min footer op. Jeg kunne jo
> selvfølgelig lave en speciel #maincontent for forsiden (resten af siderne
> kommer til at bestå af tekst og billeder og der vil det ikke blive noget
> problem)
>
> Jeg prøvede at sætte højde på #maincontent og det virker så footeren bliver i
> bunden. Men det er ikke rigtig en løsning da jeg vil have at selve sidedesignet
> er supersimplet og ens til alle sider, det er nemlig ikke min egen side, men en
> jeg laver for en kammerat, som derefter selv skal vedligeholde den (og hans
> ambitioner er ikke udi webdesign).
>
> Så prøvede jeg at sætter footeren til "clear both" (god timing med det her
> indlæg fra en anden bruger!!) og det virker som sådan, bare at nu er der ikke
> nogen "kant" men i det mindste flyder footeren ikke frit rundt på siden.
>
> Så på denne version http://www.skatecentral.com/newstartpage.php er designet
> som jeg vil have det, men ja ingen "kant"
>
> Hlææælp! /Birgit
>
>
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jean Jensen (22-09-2008)
Kommentar
Fra : Jean Jensen


Dato : 22-09-08 13:16

Philip Nunnegaard wrote in dk.edb.internet.webdesign.html:
>
> Problemet er sådan set at du ikke kender brugerens skærmhøjde eller rettere
> sagt dennes browservindues højde.

Det er nok bare mig, men: Hvis jeg nu beslutter mig for, at min footer skal
være nederst på brugerens skærm, er den så ikke bare det?

> Men måske kan du klare det ved at sætte en min-height i procent på det
> overordnede element:
>
> min-height: 90%;
>
> Sjus dig frem til det magiske procenttal der giver et brugbart resultat.
> Jeg _mener_ også at IE6 understøtter lige min-height. (men ikke max-height,
> min-width og max-width).
>
I IE7 fungerer det ikke...

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (22-09-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 22-09-08 12:45

Jean Jensen skrev:

>
> Hvordan får jeg footer til at lægge sig i bunden af skærmen,
> selvom der kun er tekst til 30% af skærmens højde (dette vil
> resultere i en masse tom ingenting, men det er okay). Hvis der så
> er tekst til mere end skærmens højde, så skal footer lægge sig
> nederst - under skærmens højde?

http://webdesign101.dk/cssbog/kildekode.php
Læs afsnittet "Sidefodens placering".
--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

Jean Jensen (22-09-2008)
Kommentar
Fra : Jean Jensen


Dato : 22-09-08 14:05

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> http://webdesign101.dk/cssbog/kildekode.php
> Læs afsnittet "Sidefodens placering".
>
>
Har læst afsnit 17-19, men det skubber bare min footer ud til højre -
helt over i vindueskarmen

Og selv om teksten fylder langt mere end skærmens hæjde, så bliver
footeren samme sted (teksten lægger sig bag footeren)...

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (22-09-2008)
Kommentar
Fra : Birger Sørensen


Dato : 22-09-08 16:51

Jean Jensen forklarede:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>>
>> http://webdesign101.dk/cssbog/kildekode.php
>> Læs afsnittet "Sidefodens placering".
>>
>>
> Har læst afsnit 17-19, men det skubber bare min footer ud til højre -
> helt over i vindueskarmen
>
> Og selv om teksten fylder langt mere end skærmens hæjde, så bliver
> footeren samme sted (teksten lægger sig bag footeren)...

Absolut positionering - top, indhold og footer.
top med top i 0px
footer med bottom i 0px
indhold med top = toppens højde og bottom = højde.
Virker ikke i IE6 - men i de øvrige...

Birger



Jørgen Farum Jensen (22-09-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 22-09-08 18:29

Jean Jensen skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>> http://webdesign101.dk/cssbog/kildekode.php
>> Læs afsnittet "Sidefodens placering".
>>
>>
> Har læst afsnit 17-19, men det skubber bare min footer ud til højre -
> helt over i vindueskarmen
>
> Og selv om teksten fylder langt mere end skærmens hæjde, så bliver
> footeren samme sted (teksten lægger sig bag footeren)...
>

Hvis mit eksempel virker i din browser, men dit eget
eksempel ikke virker, har du nok en fejl i din CSS-kode.
Prøv at sende os et link til siden, så er det nemmere
at forholde sig til problemet.

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

Jean Jensen (23-09-2008)
Kommentar
Fra : Jean Jensen


Dato : 23-09-08 06:42

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> Prøv at sende os et link til siden, så er det nemmere
> at forholde sig til problemet.
>
Prøv at kigge på http://www.poda.dk/jeanjensen/test.html

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste