Ett första försök (XHTML 1.1)

Närå - men du måste servera sidan som någon form av "XML" för att den där "XML-processinstruktionen" ("PI":n) skall fungera...

Dvs det där fungerar inte om du kör ut din sida som "text/html" (vilket du förmodligen gör om du testar med filextensionen .htm eller .html ;) )

"Godkända" MIME-typer för xhtml 1.1 är:

• text/xml
• application/xml
• application/xhtml+xml

på xhtml.nu har jag gjort så att den Apache-server som hanterar webbplatsen skickar ut filer med extensionen .xhtml som "application/xhtml+xml".

xhtml 1.1 *är* knöligt och lite "bleeding edge" idag tack vare att t.ex. MSIE6 inte klarar av "application/xhtml+xml"... och att man inte "får" skicka ut xhtml 1.1 som "text/html" för W3C ;)

Mitt tips: Du kan lika gärna köra med "bakåtkompatibel xhtml 1.0 Strict" om du vill lära dig köra med "lager" istället för tabeller - skillnaden blir att du använder <link rel="stylesheet" /> som vanligt istället för <?xml-stylesheet?> för att plocka in dina stilmalar och att du med gott samvete kan skicka ut sidor i xhtml 1.0 Strict som text/html (dvs med filextensionen .html) vilket underlättar *rejält*.

Den dagen MSIE är "fixad" och "alla" har "uppgraderat" kan du sedan "enkelt" ;) byta upp dig till xhtml 1.1 med några *minimala* kodändringar eftersom det i princip är exakt samma sak - om du vill ;)

Ok,

tack för det utförliga svaret.

Bara en följdfråga nu enligt lager
hur skulle jag kunnde centrera som dom kör på http://XHTML.nu
Har kollat kälddkoden men förstår inte ;)

Som jag har nu så är den centrerad i IE men inte i Mozilla FireFox :(

Man kan ju tillägga att man inte behöver använda XHTML för att göra semantiskt riktiga dokument. I en perfekt värld bör kreatören ta hänsyn till vilken typ av dokument som webbklienten prefererar genom att undersöka HTTP_ACCEPT-headern.

Om nu denne vill ha dokumentet som text/html tycker jag att man gott kan använda HTML 4.01. Om den å andra sidan föredrar application/xhtml+xml, använder man XHTML 1.1 eller liknande.

;)

ReloadMaster skrev:

Bara en följdfråga nu enligt lager
hur skulle jag kunnde centrera som dom kör på http://XHTML.nu
Har kollat kälddkoden men förstår inte ;)

Som jag har nu så är den centrerad i IE men inte i Mozilla FireFox :(

css

width:580px; margin-left:auto; margin-right: auto;

Hur jarvklo(xhtml.nu) har löst det orkar jag inte kolla
;)

frankof skrev:

ReloadMaster skrev:

Bara en följdfråga nu enligt lager
hur skulle jag kunnde centrera som dom kör på http://XHTML.nu
Har kollat kälddkoden men förstår inte ;)

Som jag har nu så är den centrerad i IE men inte i Mozilla FireFox :(

css

width:580px; margin-left:auto; margin-right: auto;

Hur jarvklo(xhtml.nu) har löst det orkar jag inte kolla
;)

Just

margin-left:auto; margin-right: auto;

Har jag användt i koden för att få det att funka i IE men den vill fortfarande fastna i FireFox :(

EDIT:
Nu har jag även problem med att det blir mellanrum i FireFox mellan lagren. Men inte i IE, varför? JAg har padding på 0 och margin 0 i Body i CSS filen.

Här finns CSS filen om ni vill kolla:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.krulltigern.nu%2FXHTML%2Fstyle%2Fstyle.css&warning=1&profile=css2&usermedium=all

Du måste(?) sätta en bredd på elementet du skall centrera.

frankof skrev:

Du måste(?) sätta en bredd på elementet du skall centrera.

Den har width: 1000px

Varför centrera något som du har satt till att fylle hela tillgänglige elementet?

R: läste 100% :r
1000px är förjävligt brett ;)

frankof skrev:

Varför centrera något som du har satt till att fylle hela tillgänglige elementet?

R: läste 100% :r
1000px är förjävligt brett ;)

Som sagt lär jag mig fortfarande och
vet inte riktigt hur jag bygger upp det då det finns ävldigt få sidor. Så har bara kollat xhtml.nu och dom hade ett stort 100% lager (Ja det stod 100% först innan jag ändra lite i CSS filen ;))
Grejen är att jag försöker ju ersätta tabeller och tabeller centrerar man ju simpelt och jag ska ha ett fast värde sen på 80% :/

Hmm...

Du har lagt margin:auto på body...

Hmm...

Jag kör med en standardlösning som brukar tillskrivas BlueRobot på xhtml.nu

Den bygger på två saker.

1. Man kör med en <div> som omsluter allt innehåll och har en fast bredd samt margin-left: och margin-right: satta till auto.
2. Man sätter text-align:center på body.

Här är de väsentliga delarna från CSS:en på xhtml.nu:

html,body {
  margin:0; padding:0;
  text-align:center;
}
#container {
  margin-left:auto;margin-right:auto;
  width:800px;
  text-align:left;
}

och HTML-koden i grova drag:

[...]
<body>
   <div id="container>
[...]
Allt innehåll
[...]
  </div>
</body>
[...]

Grejen är att jag försöker ju ersätta tabeller och tabeller centrerar man ju simpelt och jag ska ha ett fast värde sen på 80%

Hmm...
med liknande HTML-upplägg som ovan så borde

 #container {margin-left:10%; margin-right:10%; width:80%}

funka (har dock inte testat - någon?)

CSS är inte alltid lika enkelt som tabeller när det gäller layout - Det tar för det första ett tag att lära sig, för det andra så finns det ett gäng buggar man måste lära sig leva med (olika i varje webbläsare givetvis) och till sist måste man tyvärr ibland leva med att man inte kan göra precis allt som man kan göra med tabeller utan att ta till lite fiffiga scripts...

Men CSS-lösningar brukar å andra sidan bli ganska eleganta och "minimalistiska" och har man väl vant sig att separera dokumentstrukturen ((x)HTML-koden) och layout/design/utseendespecifikationen (CSS:en) så vill man förmodligen inte "gå tillbaka" till tabell-lösningar om det går att undvika för det man är ute efter iallafall ;)

Får börja med att än en gång tacka jarvklo för ett mycket bra svar.

Har nu lyckats komma en liten bit.
Tyvärr så verkar det vara lite bråk mellan webläsarna.
IE verkar vilja ha margin auto i alla divs medan Firefox nöjer sig med innehall för att centrera.

DOCK!
Så verkar FireFox inte vilja lyssna på mig när det handlar om att få allting inuti "innehall" som är mitt namn för divven med allt innehåll.

Även menyn blir helt annorlunda mot IE

Screens:
http://www.krulltigern.nu/XHTML/ie.jpg
http://www.krulltigern.nu/XHTML/ff.jpg

http://www.krulltigern.nu/XHTML om någon vill kolla hur jag menar.

Hmm...

Du gör det inte lätt för dig när du använder <?xml?>-taggen !

Den ställer nämligen till det så att MSIE och Mozilla hamnar i olika "moder" (dvs beter sig ganska väsentligt olika) - läs t.ex. dectgap:s sammanfattning (med referenser) i http://www.webforum.nu/showthread.php?s=&postid=787126#post787126

Tar du bort <?xml?>-taggen, så har du iallafall ungefär samma problem i bägge webbläsarna (dvs det ser "mer lika" ut mellan webbläsarna eftersom de ställer sig i samma mod om du gör så ;) )

Inte så lätt att veta om man inte snubblat över <!DOCTYPE-problematiken tidigare i HTML eller xhtml, men det är hursomhelst inte så illa att utgå ifrån ett läge där de fungerar relativt lika iallafall (dvs samma mod) - trust me on that one! ;)

Klura/meka ett tag till och fråga igen om det dyker upp detaljer du inte tar dig förbi!

Som Jarvklo nämnde, det är xml deklarationen i början som får det att se annorlunda ut i IE 6.

Om du även vill att IE 6 och Opera 7.0 - 7.03 ska använda sig av strict mode (som du kodat siten i) måste du ta bort den. De kör nämnligen med Quirks mode om du har den.

Läs mer om vilken mode olika browsers switchar till beroendo på DOCTYPE:
http://www.hut.fi/u/hsivonen/doctype.html