Søg
Avatar billede verakso Nybegynder
06. august 2007 - 14:03 Der er 19 kommentarer og
1 løsning

Fixed header and footer i XHTML

Jeg har Googlet mig frem til en en hel del eksempler og kigget på de svar jeg har kunne finde her på eksperten, men nu er overbkliket fuldstændigt røget, og jeg kaster håndklædet i ringen.

På et site der bruger ASP.NET master pages, vil jeg gerne have et fast sidehoved- og fod, uden brug af frames.

Der findes en doctype, som jeg nødigt piller ved, da den så vil påvirke alle siderne.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Jeg kan pinedød ikke få det til at virke.

Et glimrende eksempel på hvordan det gerne må virke er:
http://www.it-jobbank.dk/ShowProfile.aspx?ProfileId=50105677

Der er max point for en løsning der virker.
Avatar billede w13 Novice
07. august 2007 - 20:07 #1
Masterpages har jeg ikke forstand på. Men hvis du ikke får løst dit problem med dem, så skulle dette virke fint:

<!--#Include virtual="/include/header.htm"-->

...

<!--#Include virtual="/include/footer.htm"-->
Avatar billede verakso Nybegynder
07. august 2007 - 21:23 #2
Nixen.

Det er nu korrekt nok det du skriver, men det er bare ikke det jeg spørger om.

Det jeg efterlyser er en sidehoved- og fod, der ikke scroller.

Det er jo nærmest implicit i master pages, at der kommer en header, noget indhold, og så en footer. Problemet med det er blot at hvis der er meget indhold, så er footeren ikke synlig, og headeren forsvinder når man scroller.

Som skrevet er det muligt at lave som frames eller iframes, men det er ikke den løsning jeg leder efter, men der imod en ren CSS udgaver der viker med den DOCTYPE jeg har beskrevet.

Eks. som denne: http://limpid.nl/lab/css/fixed/header-and-footer
Problemet er, at den kun virker hvis DOCTYPE er <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Avatar billede w13 Novice
08. august 2007 - 05:35 #3
Så vidt jeg ved burde css'en ikke være problemet med en <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Så skulle en simpel overflow:auto; sagtens virke..
Avatar billede verakso Nybegynder
08. august 2007 - 21:37 #4
Det er den heller ikke, men som jeg skrev så virker den ikke med XHTML Doctype'en

Men jeg fandt en løsning, der også virker med
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.cssplay.co.uk/layouts/fixit.html

Og den virker ihvert fald i FF, IE og Safari til PC
Avatar billede olebole Juniormester
08. august 2007 - 21:59 #5
<ole>

Hvorfor i alverden læse artikler om XHTML på et site, der bruger XHTML 1.0 Strict - server sine dokumenter som 'text/html' og bruger flg. meta:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Det er jo åbenlyst en forfatter, der ikke aner det første om, hvad XHTML er!  =)

/mvh
</bole>
Avatar billede verakso Nybegynder
09. august 2007 - 22:26 #6
Næ det kan du have ret i.

Jeg erindrer at have læst noget du skrev omkring doctype's og specielt de forskellige browseres evne til at tolke dette korrekt.

Endelig er der jo også aspektet om webserveren kan servere det rigtige.

Men hvor om alting er, så er der jo stor forskel på hvilken doctype der benyttes, og om der er en URI eller ej

Så uanset hvor stringent korrekt det end måtte være, så fik jeg det til at virke med min doctype (det er ikke mig der har valgt den, men Microsoft og deres RAD værktøj) og det er fint for mig.
Avatar billede verakso Nybegynder
09. august 2007 - 22:28 #7
Men W3 ved heller ikke hvad XHTML er, for deres validator godkender siden:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cssplay.co.uk%2Flayouts%2Ffixit.html
Avatar billede verakso Nybegynder
09. august 2007 - 22:31 #8
Og for at forvirringen er komplet, så har han en andet meta i sin artikel på siden:
http://www.webreference.com/programming/css_frames/

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
Avatar billede mclemens Nybegynder
09. august 2007 - 22:43 #9
^ - Meta linjen har ingen effekt.
... Doctypen er det vigtige.

M.h.t. dine css problemer, så har du vel ikke
<?xml version="1.0" encoding="iso-8859-1"?> (eller UTF-8)
linjen serveret til IE ved besøg på siden ?

- Slå evt. et smut forbi http://www.eksperten.dk/spm/719030 hvis du ikke
server dokumentet som xhtml document for de browsere der "understøtter" xhtml.

M.h.t. om w3c's validator ved hvad xhtml er så er http://validator.w3.org/
et godt eksempel på en xhtml webside der bliver leveret som text/html.
Avatar billede olebole Juniormester
09. august 2007 - 22:48 #10
verakso >> Jamen, du har nok misforstået validatoren. Den kikker udelukkende efter, om markup-koden validerer ... men det er jo kun en lille del af det at bruge XHTML.
Skal du endelig validere et XHTML-dokument, skal 'Verbose output' slået til:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cssplay.co.uk%2Flayouts%2Ffixit.html&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1

- hvor du kan se, hvilken Content-Type (MIME-Type), det bliver served med.

Det bør altid være grund til, at man skriver, som man gør. I min verden er det komplet fjollet at skrive en meningsløs DTD ... hvad skal jeg så skrive en DTD for? Content-Type og DTD bør naturligvis stemme overens.

Denne meta:
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

- er slet ikke så tosset - men det er ikke nok, hvis dokumentet serves som 'text/html'. Derimod er:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

- komplet håbløs i ethvert XHTML-dokument
Avatar billede kongknabe Nybegynder
12. august 2007 - 20:52 #11
Det du gerne vil med en fast side hoved og footer er egentlig ikke særlig svært at lave i CSS - det svære er at få det til at virke i IE6 også.. Mener jeg engang fandt en løsning på dette problem og skal lige se om jeg kan finde den frem af gemmerne :-) (Er dog usikker på om din doctype bliver et problem i denne sammenhæng!? :-))
Avatar billede kongknabe Nybegynder
12. august 2007 - 20:56 #12
Alternativt kunne du jo også servere et mere simpelt layout til IE6 - den browser er jo alligevel på vej ud, så det er spørgsmålet om det kan betale sig at lægge meget energi i at få den til at virke præcis på samme måde også!?
Avatar billede kongknabe Nybegynder
12. august 2007 - 21:13 #13
Her er en løsning der efter min mening degrader på en acceptabel måde i IE6 - Hvis du vil have det til at virke på præcis samme måde i IE6 kan det altså lade sig gøre, men er bøvlet (Og er lige ved att sige at du i så fald er bedre tjent med at smide det hele ind i en tabel)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>
    <head>
        <title></title>
        <style type="text/css">
       
        html, body
       
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
       
        #header
       
        {
            background: #333333;
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
        }
       
        #content
       
        {
            background: #777777;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 30px;
            overflow: auto;
            overflow-x: hidden;
            overflow-y: scroll;
        }
       
        #footer
       
        {
            background: #333333;
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 0;
        }
       
        </style>
        <!--[if lte IE 6]>
            <style type="text/css">
                #header
               
                {
                    position: relative;
                }
               
                #content
               
                {
                    position: relative;
                    overflow-y: hidden;
                    top: 0;
                    bottom: 0;
                }
               
                #footer
               
                {
                    position: relative;
                }
            </style>
        <![endif]-->
    </head>
    <body>
        <div id="header"></div>
        <div id="content">
            Smid en masse tekst ind her for at teste :-)
        </div>
        <div id="footer"></div>
    </body>
</html>
Avatar billede kongknabe Nybegynder
12. august 2007 - 23:09 #14
Og her var så en løsning der også virker i IE6 :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>
    <head>
        <title></title>
        <style type="text/css">
       
        html, body
       
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
       
        #main_container             
       
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
            top: 0px;
            left: 0px
        }
       
        #header
       
        {
            background: #333333;
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
        }
       
        #content
       
        {
            background: #777777;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 30px;
            overflow: auto;
            overflow-x: hidden;
            overflow-y: scroll;
        }
       
        #footer
       
        {
            background: #333333;
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 0;
        }
       
        </style>
        <!--[if lte IE 6]>
            <style type="text/css">
                html, body
               
                {
                    padding: 50px 0px 30px 0px;
                    overflow-y: hidden;
                }
               
                #main_container
               
                {
                    margin-top: -50px;
                }
               
                #header
               
                {
                    position: absolute;
                    top: -50px;
                    z-index: 2
                }
               
                #content
               
                {
                    overflow-y: scroll;
                    height: 100%;
                    padding: -50px 0px 0px 0px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                }
               
                #footer
               
                {
                    position: absolute;
                    bottom: -30px;
                }
            </style>
        <![endif]-->
    </head>
    <body>
        <div id="main_container">
            <div id="header"></div>
            <div id="content">
                Smid en masse tekst ind her for at teste :
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>
Avatar billede verakso Nybegynder
13. august 2007 - 16:18 #15
kongknabe > Tak for din indsats, men jeg fik jo løst problemet, med den DOCTYPE som oprindeligt beskrevet

Til jer andre mclemens & olebole, tak for kommentarene.

Det lader til at det er et stor område, og til trods for diverse ratificeringer, så kunne man håbe at fremtidige servere og udviklingsværktøjer tog hånd om dette, men det er nok lidt naivt at tro.

Specielt Microsoft's indsats på området, har givet mig mange går hår i hovedet, når man skal lave noget der også skal kunne køre på andet end IE og PC.

I skulle tilfældigvis ikke, om MS skulle tage højde for MIME-type proplematikken i deres .NET?

Som jeg læser jeres kommentarere, virker det jo lidt knald i bøtten, at standard doctype et et ASP.NET dokument er:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Når der hverken sættes en meta-tag eller hvis serveren servere en formert mime type.
Avatar billede kongknabe Nybegynder
13. august 2007 - 16:28 #16
verakso: Ok, havde ikke lige forstået at du havde fundet en løsning på problemet :-) - Har du et link evt.? - Er lidt nysgerrig efter at se hvordan du gør :-)
Avatar billede mclemens Nybegynder
13. august 2007 - 17:44 #17
"Det lader til ... håbe at fremtidige servere
og udviklingsværktøjer tog hånd om dette... ."

- Ej, det ville da være træls, så kan alle jo finde ud
af at programmere og så er der jo ingen udfordring i det mere ;)


"I skulle tilfældigvis ikke, om MS skulle tage højde for ...?"

- Melder pas på det spørgsmål, da jeg kun selv leger med php og notesblok.


"Som jeg læser jeres kommentarere, virker det jo lidt
knald i bøtten, at standard doctype et et ASP.NET dokument er:"

- Umiddelbart er det ligeså knald i bøtten at serve xhtml overhovedet (hvis man ser bort fra træning m.v.), da man ikke kan få IE til at køre xhtml'en, hvis man forsøger på at serve det som xhtml.

M.h.t. meta-tag'et i 09/08-2007 22:48:49 så har jeg ledt lidt på kryds og tværs da jeg selv har en <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> stående på min xhtml 1.1 side.

Jeg har dog ikke været istand til at finde <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> nævnt inde hos w3.org :-/, men meta tag'en ser fornuftigere ud end en text/html selvfølgelig, dog ville jeg nok selv (selvom jeg ikke tror, at den har nogen effekt på parsing, da server header sikkert overruler meta'en) gøre den betinget af om browseren understøtter xhtml eller ej - ligesom med server headeren.
Avatar billede olebole Juniormester
13. august 2007 - 17:53 #18
verakso >> Gud være lovet har MS ikke fulgt Mozilla's dårlige eksempel. MS har nemlig vedtaget at vente med at understøtte XHTML, til de har udviklet et ordentligt XHTML-lag - i stedet for at gøre som Moz: Lave en dårlig klon af et buggy HTML-lag  ;o)
Avatar billede verakso Nybegynder
15. august 2007 - 19:29 #19
kongknabe > linket står længere oppe, men her er det igen:
http://www.cssplay.co.uk/layouts/fixit.html

Til jer andre, tjah well, MS er igennem årene blevet bedre til deres værktøjer, jeg erindrer svagt tiden i det forrige årtusinde, hvor der nærmest var afsky for at bruge Interdev, Frontpage m.m.

I dag må jeg blot erkende, at det det laver ikke er så skidt endda, og i bund og grund er de gode RAD værktøjer, specielt hvis man er flere der arbejder på sites sammen.

Men uanset hvad, så sidder jeg alligevel og tester vores sider igennem på IE, FF, Safari på Mac og PC - bare for at være på den sikre side.

Det er nemlig utroligt hvad der kan ske, når en ny version dukker op.

Specielt kan jeg huske problemet med ikke at bruge getElementById i FF, og senest har MS ændret IE måde at "tolke" label på en dropdown. Ikke så fedt når alle andre browsere har valgt at "ignorere" denne, og at udvikleren samtidigt har brugt denne til at ligge data ind i.....

Så jo mclemens, der er skam stadigt udfordringer ved at "kode" web...
Avatar billede mclemens Nybegynder
15. august 2007 - 20:48 #20
^ - Den del var så også ment som en spøg. ( "- Ej, det ... ;)" )
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:06 Min IPad efter sidste opdatering Af nu_igen i Tablet
29/0113:08 Bruge PHP til at hente hjemmeside med fsockopen Af Strawberry i PHP
28/0113:36 godt råd søges Alternativ styresystem på Mac pc Af luffe1955 i Andre styresystemer
28/0111:32 Hjælp til kontrol af sygefravær Af Maja i Excel
27/0113:59 2 skærme til en stationær computer Af BIRGER i Skærme
White papers
Flere white papers »