/ 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
DIV's placeret i bunden af browservindue
Fra : Morten Winkler Jørge~


Dato : 17-06-03 10:35

Hej alle.

Jeg tænker på hvordan jeg kan få placeret et element i bunden af et
browservindue ELLER allernederst alt efter hvor meget tekst der er på
siden. f.eks:

<DIV CLASS="pageheader">header m. menu etc.</DIV>
yada, yada 0<BR>
<DIV CLASS="pagefooter">Opdateret d. ...... af ...... etc.</DIV>

Her får jeg så uden problemer "pageheader" til at bliver klinet til toppen
af vinduet hvorimod "pagefooter" kommer kun en linje nede. Jeg ville gerne
have at den blev klinet til bunden af browservinduet. Derudover skulle

<DIV CLASS="pageheader">header m. menu etc.</DIV>
yada, yada 1<BR>
yada, yada 2<BR>
yada, yada 3<BR>
..
..
..yada, yada 1024<BR>
<DIV CLASS="pagefooter">Opdateret d. ...... af ...... etc.</DIV>

Gerne betyde at brugeren skal scrolle ca 1000 linjer ned for at se
"pagefooter".


Mon der er nogen der kan hjælpe mig med den CSS erklæring af "pagefooter"?

Venlig hilsen,
Morten

 
 
Jens Gyldenkærne Cla~ (17-06-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-06-03 11:24

Morten Winkler Jørgensen skrev:

> Jeg tænker på hvordan jeg kan få placeret et element i bunden
> af et browservindue

..pagefooter{
   position: fixed;
   bottom: 0px;
}
(IE forstår den ikke, men følgende hack kan få nyere IE-udgaver
med: <http://devnull.tagsoup.com/fixed/>)

> ELLER allernederst

..pagefooter{
   position: absolute;
   bottom: 0px;
}


> alt efter hvor meget tekst der er på siden.

- det er bare ikke så nemt at skifte mellem de to. Muligvis kan et
javascript klare ærterne, men det er svært at sikre sig at den
slags virker fornuftigt i alle browsere. Det kan gøres enkelt med
frames - der så til gengæld giver andre problemer.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (17-06-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 17-06-03 11:50

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> Morten Winkler Jørgensen skrev:
>
> > Jeg tænker på hvordan jeg kan få placeret et element i bunden
> > af et browservindue

> - det er bare ikke så nemt at skifte mellem de to. Muligvis kan et
> javascript klare ærterne, men det er svært at sikre sig at den
> slags virker fornuftigt i alle browsere. Det kan gøres enkelt med
> frames - der så til gengæld giver andre problemer.

Der er en simpel standard-overholdende løsning.
html,body {padding:0px;margin;0px;}
html {height:100%;}
body {
min-height:100%;
position:relative;
}
#footer {position:absolute;bottom;0px;}

Da den er simpel, brugbar, og overholder standarden, så er det
naturligvis ingen overraskelse at IE ikke forstår den.
(Faktisk ser det kun ud til at være Opera der forstår det rigtigt)

/L 'IE forstår ikke CSS2'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Morten Winkler Jørge~ (17-06-2003)
Kommentar
Fra : Morten Winkler Jørge~


Dato : 17-06-03 12:01

> html,body {padding:0px;margin;0px;}
> html {height:100%;}
> body {
> min-height:100%;
> position:relative;
> }
> #footer {position:absolute;bottom;0px;}
Det syntes ikke at virke i min Opera.

I øvrigt er jeg ikke helt dus med din definition af #footer. Jeg syntes der
er for mange semikoloner?

Mvh
Morten

Lasse Reichstein Nie~ (17-06-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 17-06-03 12:52

Morten Winkler Jørgensen <mwj@INGEN_SPAM_TIL_MIG.mip.sdu.dk> writes:

> I øvrigt er jeg ikke helt dus med din definition af #footer. Jeg syntes der
> er for mange semikoloner?

Doh! Ja, det skal naturligvis være "bottom:0px", ikke "bottom;0px".

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (17-06-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-06-03 12:21

Morten Winkler Jørgensen skrev:

>> #footer {position:absolute;bottom;0px;}

> Det syntes ikke at virke i min Opera.

Heller ikke her (Opera 7.11). Ingen af mine browsere har vist siden
korrekt.

> I øvrigt er jeg ikke helt dus med din definition af #footer.
> Jeg syntes der er for mange semikoloner?

Oh - det forklarer jo en del. Hvis du tilføjer et halvt kolon,
virker det i Mozilla og Opera (udskift "bottom;0px" med "bottom:
0px;").

I Mozilla er placeringen dog lidt uheldig - toppen af linjen er
placeret på "bundlinjen" - man skal derfor scrolle præcis én linje
for at se teksten.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Morten Winkler Jørge~ (17-06-2003)
Kommentar
Fra : Morten Winkler Jørge~


Dato : 17-06-03 12:34

> I Mozilla er placeringen dog lidt uheldig - toppen af linjen er
> placeret på "bundlinjen" - man skal derfor scrolle præcis én linje
> for at se teksten.
Nemmerlig.

Måske er det her et af de tilfælde hvor jeg må ty til en tabel for at få
siden vist korrekt i så mange browsere som muligt. Trist men tilsyneladende
sandt.

Jens Gyldenkærne Cla~ (17-06-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-06-03 14:15

Lasse Reichstein Nielsen skrev:

> Der er en simpel standard-overholdende løsning.
> html,body {padding:0px;margin;0px;}

Du har vist haft travlt med at bytte om på : og ; (der er en
ombytning mere herover).

> Da den er simpel, brugbar,

Har du testet hvordan den opfører sig når siden er højere end
100 procent?

Prøv at kigge på <http://www.fys.ku.dk/~kerne/bundtekst.shtml> i et
lille vindue. Såvel Opera som Mozilla viser bundteksten oven i den
sidste linje af brødteksten (hvad der, så vidt jeg lige kan
overskue, vel også er korrekt).

Så kan man jo lige så godt bruge fixed - her får man ikke
sammenfald af linjerne. Man skal så bare leve med at bundlinjen
altid er synlig.

Jeg har i øvrigt indtastet Mozillas fejlfortolkning i Bugzilla -
<http://bugzilla.mozilla.org/show_bug.cgi?id=209654>. Kommenter
endelig hvis I har ekstra input.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (17-06-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 17-06-03 15:17

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> Lasse Reichstein Nielsen skrev:
>
> > Der er en simpel standard-overholdende løsning.
> > html,body {padding:0px;margin;0px;}
>
> Du har vist haft travlt med at bytte om på : og ; (der er en
> ombytning mere herover).

Jep. For travlt :)

> Har du testet hvordan den opfører sig når siden er højere end
> 100 procent?

Der bliver position:relativ vigtig, for ellers bliver det placeret
i forhold til <html>-elementet.

> Prøv at kigge på <http://www.fys.ku.dk/~kerne/bundtekst.shtml> i et
> lille vindue. Såvel Opera som Mozilla viser bundteksten oven i den
> sidste linje af brødteksten (hvad der, så vidt jeg lige kan
> overskue, vel også er korrekt).

Det er korrekt. Man skal lave lidt ekstra for at undgå det (f.eks.
sætte noget tom plads ind i bunden af dokumentet). Man kan desværre
ikke bruge padding, da det vil give en højde over 100%. Man kunne
evt. sætte indholdet ind i en div med margin-bottom:2em (eller hvor
meget plads man skal bruge).

> Så kan man jo lige så godt bruge fixed - her får man ikke
> sammenfald af linjerne. Man skal så bare leve med at bundlinjen
> altid er synlig.

Det løste dog ikke det oprindelige problem: At have bundlinjen
placeret i den nederste af bunden af browseren og bunden af
dokumentet.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (17-06-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-06-03 15:36

Lasse Reichstein Nielsen skrev:

>> <http://www.fys.ku.dk/~kerne/bundtekst.shtml> i et lille
>> vindue. Såvel Opera som Mozilla viser bundteksten oven i den
>> sidste linje af brødteksten (hvad der, så vidt jeg lige kan
>> overskue, vel også er korrekt).
>
> Det er korrekt. Man skal lave lidt ekstra for at undgå det
> (f.eks. sætte noget tom plads ind i bunden af dokumentet).

Det var en god idé. Det kræver selvfølgelig at man ved hvor meget
bundteksten fylder, men hvis den er fast - eller i det mindste
altid nogenlunde samme længde - kan man klare sig med at definere
en passende mængde "luft" til sidst i dokumentet.

>> Så kan man jo lige så godt bruge fixed - her får man ikke
>> sammenfald af linjerne.

> Det løste dog ikke det oprindelige problem: At have bundlinjen
> placeret i den nederste af bunden af browseren og bunden af
> dokumentet.

Nej - det var blot fordi jeg ikke havde tænkt på "luft"-ideen. Hvis
teksten kun stod korrekt i bunden når siden var mindre end vinduet
(sådan som det var tilfældet med dit oprindelige forslag), ville
position: fixed opfylde samme funktion.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (17-06-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-06-03 21:12

Jens Gyldenkærne Clausen skrev:

> I Mozilla er placeringen dog lidt uheldig - toppen af linjen
> er placeret på "bundlinjen" - man skal derfor scrolle præcis
> én linje for at se teksten.

Det jeg troede var en fejl, viste sig blot at være en forskel
mellem Opera og Mozillas standardværdier. Mozilla har en
standardtopmargen på h1-elementet (som min testside starter med).
Når body har højden 100% og margen skal lægges oveni så ryger
bundteksten ud af vinduet.

Tilføjer man h1{ margin-top: 0px; } fungerer det nydeligt. Se evt.
den rettede side: <http://www.fys.ku.dk/~kerne/bundtekst.shtml>

(IE kan selvfølgelig stadig ikke vise den korrekt)
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

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