/ 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
Hjælp til sidefod (footer)
Fra : Jørgen Farum Jensen


Dato : 25-05-08 12:06

Jeg har lavet et eksempel på, hvordan man kan
konstruere en sidefod, der står i bunden af
browservinduet, hvis der ikke er ret meget
indhold på websiden, og står i bunden af websiden,
hvis der er mere indhold end der er plads til i
browservinduet:
http://webdesign101.dk/cssbog/kildekode/figur17-19en.html

Problemet er, som Dennis Munding har gjort op-
mærksom på, at det ikke virker i Opera. Jeg kan ikke
lige se hvorfor det er sådan. Princippet
virker fortrinligt i IE6/7, Safari og Firefox,
og der er ingen logiske eller syntaktiske fejl i
CSS-koden.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

 
 
Bertel Lund Hansen (25-05-2008)
Kommentar
Fra : Bertel Lund Hansen


Dato : 25-05-08 12:46

Jørgen Farum Jensen skrev:

> Problemet er, som Dennis Munding har gjort op-
> mærksom på, at det ikke virker i Opera.

I Opera står footeren under tekstfeltet, både ved sammenfoldet og
udvidet tekstblok. Ved maksimeret vindue efterlades der en stribe
på ½ cm fra footerens øverste del når den i øvrigt tegnes rigtigt
under tekstblokken.

I IE6 bliver footeren stående når man udvider, og den dækker
således noget af teksten som derfor ikke kan læses.

Sig til hvis du vil se skærmbilleder.

--
Bertel
http://bertel.lundhansen.dk/      FIDUSO: http://fiduso.dk/

Birger (25-05-2008)
Kommentar
Fra : Birger


Dato : 25-05-08 16:52

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:i3ki34117br1lpgjsgjc4niul14v7sbt0u@news.stofanet.dk...
> Jørgen Farum Jensen skrev:
>
>> Problemet er, som Dennis Munding har gjort op-
>> mærksom på, at det ikke virker i Opera.
>
> I Opera står footeren under tekstfeltet, både ved sammenfoldet og
> udvidet tekstblok. Ved maksimeret vindue efterlades der en stribe
> på ½ cm fra footerens øverste del når den i øvrigt tegnes rigtigt
> under tekstblokken.
>
> I IE6 bliver footeren stående når man udvider, og den dækker
> således noget af teksten som derfor ikke kan læses.
>
> Sig til hvis du vil se skærmbilleder.
>
> --


Her sker der følgende :
I IE6 skal vinduet resizes, før footeren flytter på plads efter
expand/collapse.
Opera gør som den selv vil...( footer under tekst, selvom der er plads under
den...)
IE7 og FF gør tilsyneladende "rigtigt"..

Der er den her linie i style...
html>body div#leftcol{margin-left:1em;}
hvad gør den?

Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.



Jørgen Farum Jensen (25-05-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 25-05-08 17:22

Birger skrev:

> Her sker der følgende :
> I IE6 skal vinduet resizes, før footeren flytter på plads efter
> expand/collapse.
> Opera gør som den selv vil...( footer under tekst, selvom der er plads under
> den...)
> IE7 og FF gør tilsyneladende "rigtigt"..

Jeg har vist ikke tydeligt nok tilkendegivet at
jeg (nu) selv har testet siden i IE6/7, Safari 3/Win og
Firefox 2. Ikke desto mindre tak for tilbagemeldingerne,
der afslører to ting som jeg har overset, nemlig boks-
levningen i Opera og at en resize en nødvendig i IE6.

> Der er den her linie i style...
> html>body div#leftcol{margin-left:1em;}
> hvad gør den?

Et levn fra gamle dage:
div#leftcol {
   float:left; width:12em;
   margin: 0 0 .5em 0.5em; padding-top:0.5em;
   border:1px solid black;
   background:white; }
html>body div#leftcol{margin-left:1em;}

IE5/6 fordobler venstre margins bredde på et
left-float'et element og højre margins bredde
på et højre-float'et element. Derfor passerer
den første formdeklaration den halve bredde
til venstre margin, mens den anden formdeklaration
passerer den korrekte bredde til alle browsere, der
forstår forældre>barnselektoren, hvad IE<7 ikke
gør.

Problemet er bedre løst ved følgende form-
deklaration
div#leftcol {
   float:left; width:12em;
   *display:inline;*
   margin: 0 0 .5em *1em*; padding-top:0.5em;
   border:1px solid black;
   background:white; }
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Dennis Munding (25-05-2008)
Kommentar
Fra : Dennis Munding


Dato : 25-05-08 19:23

Hej Jørgen!
"Jørgen Farum Jensen" skrev:
> Jeg har lavet et eksempel på, hvordan man kan
> konstruere en sidefod, der står i bunden af
> browservinduet, hvis der ikke er ret meget
> indhold på websiden, og står i bunden af websiden,
> hvis der er mere indhold end der er plads til i
> browservinduet:
> http://webdesign101.dk/cssbog/kildekode/figur17-19en.html
>
> Problemet er, som Dennis Munding har gjort op-
> mærksom på, at det ikke virker i Opera. Jeg kan ikke
> lige se hvorfor det er sådan. Princippet
> virker fortrinligt i IE6/7, Safari og Firefox,
> og der er ingen logiske eller syntaktiske fejl i
> CSS-koden.

Jeg er bare SÅ genial!! (i al beskedenhed...???) ;-p
Nå - spøg til side....

Jeg vil nu forære dig et lille guldkorn som tak for alle dem, du har givet
mig...:
Fjern "position:absolute;" fra #side...

Det løser næsten problemet helt - der er stadig en stor margin til bunden af
skærmen, men det hjalp...

Testet i IE7, FF2 og Opera9.26 på WinVista


Med venlig hilsen
--
Dennis Munding
http://as-transport.dk/ -Sikker møbeltransport til tiden!
http://pe-vagtservice.dk/ -Når du vil passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! Ganske enkelt...


Jørgen Farum Jensen (26-05-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 26-05-08 12:22

Dennis Munding skrev:

> Det løser næsten problemet helt - der er stadig en stor margin til
> bunden af skærmen, men det hjalp...
>
> Testet i IE7, FF2 og Opera9.26 på WinVista
>
>
> Med venlig hilsen


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Jørgen Farum Jensen (26-05-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 26-05-08 12:31

Dennis Munding skrev:

> Jeg vil nu forære dig et lille guldkorn som tak for alle dem, du har
> givet mig...:
> Fjern "position:absolute;" fra #side...
>
> Det løser næsten problemet helt - der er stadig en stor margin til
> bunden af skærmen, men det hjalp...
>
> Testet i IE7, FF2 og Opera9.26 på WinVista

UPS, jeg var lidt for hurtigt på aftrækkeren
med mit første svar.

Og tak for tippet, nu virker det som det
skal i Opera (næsten).

Men i andre standardkompatible browsere
(IE7, Firefox) virker det jo ikke som tænkt.
Der flytter footeren sig jo blot ned i
bunden af browservinduet.





--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Dennis Munding (26-05-2008)
Kommentar
Fra : Dennis Munding


Dato : 26-05-08 15:53

Hej Jørgen!

"Jørgen Farum Jensen" skrev:
> Dennis Munding skrev:
>
>> Jeg vil nu forære dig et lille guldkorn som tak for alle dem, du har
>> givet mig...:
>> Fjern "position:absolute;" fra #side...

[SNIP]

> Og tak for tippet, nu virker det som det
> skal i Opera (næsten).
>
> Men i andre standardkompatible browsere
> (IE7, Firefox) virker det jo ikke som tænkt.
> Der flytter footeren sig jo blot ned i
> bunden af browservinduet.

Ikke forstået - hos mig er den konstant i bunden:
http://test.munding-webdesign.dk/JFJ/

Eller taler vi forbi hinanden...??


Med venlig hilsen
--
Dennis Munding
http://as-transport.dk/ -Sikker møbeltransport til tiden!
http://pe-vagtservice.dk/ -Når du vil passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! Ganske enkelt...


Jørgen Farum Jensen (26-05-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 26-05-08 18:06

Dennis Munding skrev:
> Hej Jørgen!
>
> "Jørgen Farum Jensen" skrev:
>> Dennis Munding skrev:
>>
>>> Jeg vil nu forære dig et lille guldkorn som tak for alle dem, du har
>>> givet mig...:
>>> Fjern "position:absolute;" fra #side...
>
> [SNIP]
>
>> Og tak for tippet, nu virker det som det
>> skal i Opera (næsten).
>>
>> Men i andre standardkompatible browsere
>> (IE7, Firefox) virker det jo ikke som tænkt.
>> Der flytter footeren sig jo blot ned i
>> bunden af browservinduet.
>
> Ikke forstået - hos mig er den konstant i bunden:
> http://test.munding-webdesign.dk/JFJ/
>
> Eller taler vi forbi hinanden...??
>

Det tror jeg nok.

1. Målet er at indsætte en footer, der står
under indholdet, hvis indholdet ikke udfylder
hele browservinduets højde, men i bunden af siden,
hvis indholdet fylder mere i højden end browser-
vinduet kan rumme.

2. Det er den effekt der kan iagttages i FF og
IE7 på eksempelsiden:
http://webdesign101.dk/cssbog/kildekode/figur17-19en.html

3. I dit eksempel, hvor du har fjernet
position:absolute, er effekten af mere indhold
at footeren rykker ned til bunden af browservinduet,
hvis indholdet øges, og dermed kommer til at
dække over noget af indholdet. Det er et anden
footer-princip end det jeg er ude på.

4. Nu kommer der noget mystisk: Jeg kan ikke i dag
på ovennævnte eksempelside genskabe det problem,
du nævnte i går. Det vil sige at den effekt jeg
ser i Opera er ganske den samme som den jeg ser
i Firefox og IE7, nemlig at footeren rykker
op under indholdet når siden indlæses i et
"normalt" størrelse browservinduet. Klikkes
på linket i i venstre spalte vises noget mere
indhold og footeren rykker ned under teksten.
Og jeg har ikke ændret noget på siden.

5. Og for lige at slå den krølle på: Visningen
i IE6 er ikke tilfredsstillende, fordi siden ikke
gentegnes når display-værdien af den skjulte tekst
ændres. Men i virkeligheden vil man næppe bruge
detet princip på den måde, som jeg har gjort i
eksemplet. Det er jo lavet for at sikre en bestemt
visning af forskellige sider med forskelligt indhold.

***

Og i øvrigt er det ikke noget jeg selv har brugt
eller tror jeg får brug for. Eksemplet stammer
fra min bog (hvis det ikke skulle være gået op
for alle) og er medtaget fordi jeg igennem årene er
stødt på nogle forespørgsler om netop denne effekt.

Jeg takker for din interesse for sagen og
hører gerne mere til sagen hvis jeg endnu
en gang har været for hurtig i mine konklusioner.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Dennis Munding (26-05-2008)
Kommentar
Fra : Dennis Munding


Dato : 26-05-08 18:44

Hej Jørgen!

"Jørgen Farum Jensen" skrev:

[SNIP]

>> Ikke forstået - hos mig er den konstant i bunden:
>> http://test.munding-webdesign.dk/JFJ/
>>
>> Eller taler vi forbi hinanden...??
>
> Det tror jeg nok.
>
> 1. Målet er at indsætte en footer, der står
> under indholdet, hvis indholdet ikke udfylder
> hele browservinduets højde, men i bunden af siden,
> hvis indholdet fylder mere i højden end browser-
> vinduet kan rumme.

Så havde jeg forstået det rigtigt...

> 2. Det er den effekt der kan iagttages i FF og
> IE7 på eksempelsiden:
> http://webdesign101.dk/cssbog/kildekode/figur17-19en.html

Jep!

> 3. I dit eksempel, hvor du har fjernet
> position:absolute, er effekten af mere indhold
> at footeren rykker ned til bunden af browservinduet,
> hvis indholdet øges, og dermed kommer til at
> dække over noget af indholdet. Det er et anden
> footer-princip end det jeg er ude på.

Har fundet årsagen til fejlen - jeg havde ikke testet i mindre
skærmopløsninger (sidder med 1440x900!), så jeg havde selvfølgelig ikke
opdaget fejlen... :-/
Klovn! Det plejer jeg ellers at huske...

> 4. Nu kommer der noget mystisk: Jeg kan ikke i dag
> på ovennævnte eksempelside genskabe det problem,
> du nævnte i går. Det vil sige at den effekt jeg
> ser i Opera er ganske den samme som den jeg ser
> i Firefox og IE7, nemlig at footeren rykker
> op under indholdet når siden indlæses i et
> "normalt" størrelse browservinduet. Klikkes
> på linket i i venstre spalte vises noget mere
> indhold og footeren rykker ned under teksten.
> Og jeg har ikke ændret noget på siden.

Hvis ikke jeg tager fejl...
Har du prøvet at kigge på denne side:
http://webdesign101.dk/cssbog/kildekode/figur17-19.html (den danske
version...)?

Her "hænger" footeren nemlig helt oppe under indhold, og lidt ind over
venstre kolonne...

> 5. Og for lige at slå den krølle på: Visningen
> i IE6 er ikke tilfredsstillende, fordi siden ikke
> gentegnes når display-værdien af den skjulte tekst
> ændres. Men i virkeligheden vil man næppe bruge
> detet princip på den måde, som jeg har gjort i
> eksemplet. Det er jo lavet for at sikre en bestemt
> visning af forskellige sider med forskelligt indhold.

Det har jeg så ikke tjekket - er for doven til at starte den stationære op -
har ikke IE6 på min bærbare... (endnu)

> Og i øvrigt er det ikke noget jeg selv har brugt
> eller tror jeg får brug for. Eksemplet stammer
> fra min bog (hvis det ikke skulle være gået op
> for alle) og er medtaget fordi jeg igennem årene er
> stødt på nogle forespørgsler om netop denne effekt.

Derfor kan man jo godt udforske det...
Nysgerrighed er en af menneskets store laster/stærke sider...

> Jeg takker for din interesse for sagen og
> hører gerne mere til sagen hvis jeg endnu
> en gang har været for hurtig i mine konklusioner.

Tak selv - jeg går ind for hjælp til selvhjælp!
Jeg skal nok vende tilbage - må hellere få lidt næring til "maskineriet"
først...


Med venlig hilsen
--
Dennis Munding
http://as-transport.dk/ -Sikker møbeltransport til tiden!
http://pe-vagtservice.dk/ -Når du vil passe på dine værdier!
http://munding-webdesign.dk/ -Vi ses! Ganske enkelt...


Søg
Reklame
Statistik
Spørgsmål : 177493
Tips : 31966
Nyheder : 719565
Indlæg : 6408474
Brugere : 218886

Månedens bedste
Årets bedste
Sidste års bedste