CSS style centrering hjælp.

Bruger du det rigtigt stylesheet? Når jeg åbner din side og betragter denmed firebugs ser stylen for #page-wrap således ud:

#page-wrap {
    margin: 0 auto;
    text-align: center;
}

og der mangler du margin-left:auto; margin-right:auto; som er vigtigt for centrering.

Hej Christian,

Tak for dit svar.

Jeg gør det sikkert forkert. Men jeg har kun lavet én style.css
og linker fra HTML-koden således:

<link rel="stylesheet" href="style.css">

Hvis du ved hvordan koden + style.css skal se ud, vil jeg være meget taknemmelig for en copy/paste version. Det driver mig til vanvid at det ser fint ud på alle enheder, men ser grimt ud på en iPhone, og sikkert også Android.

Du siger, at siden er fint centreret på I-pad i IE, Crome, og Safari.  Når jeg ser på siden på min PC ser det overhovedet ikke centreret ud i de tre browsere, og heller ikke i Firefox.  Jeg ejer ikke selv en I-pad og heller ikke en I-phone.  Men det er så hvad det er. 

Om selve spørgsmålet, så må jeg fortælle, at jeg heller ikke er den store ekspert.  Jeg har aldrig haft et kursus i css; det har jeg lært ved at følge nogle on-line tutorials og iøvrigt prøve mig frem.  Yderligere er det længe siden jeg selv har arbejdet med det. 

Men jeg kikkede på din kode (ved at højre-klikke på siden og vælge 'View page source'.)  Der ser jeg, at du, som du siger, har en style-sheet.  Din style-sheet definerer kun stylen for #page-wrap.  Der ud over har du i headeren defineret style for 16 forskellige klasser, og yderligere har du i de enkelte divs defineret styles.  Det er jo slet ikke meningen med css.  Du skal så vidt muligt have alle de styles du har brug for i din stylesheet.  For eksempel ser jeg, at du fem forskellige steder har defineret 'font-family: Arial, Helvetica, sans-serif;' og jeg ser ikke, at du har defineret nogen anden font-family nogen steder.  Så hvis du puttede 'font-family: Arial, Helvetica, sans-serif;' i #page-wrap, så ville det gælde for hele siden.  Det ville ikke alene være mindre arbejde.  Det ville også betyde, at hvis du fik en ny ide at du i stedet for Arial ville bruge Times New Roman, så behøvede du kun at rette det et enkelt sted.  Og dine .style1 og .style2 o.s.v., bør du flytte fra headeren til din style-sheet.  Også de styles der står i de enkelte div's skal i stylesheeten.  For eksempel din første div kalder du id="lag1", og der har du defineret en hel række styles, position, left, top, o.s.v.  Der bør du i stylesheetet definere #lag1 og der definere de nødvendige styles. Og jeg ser, at du overalt definerer absolutte positioner og højder og bredder.  Ofte (med mindre jeg har misforstået det) er det bedre at stukturere div'erne indeni og ved siden af/over/under hinanden, og så lade de forskellige browsere selv kalkulere positionerne.

Det jeg vil anbefale er, at du, som jeg gjorde, finder nogle gode on-line tutorials og arbejder dig igennem dem.  Jeg googlede lige på 'css tutorials' og fandt adskillige.

Det var så min morale præk.  Mere konkret ser jeg i koden, at din style-sheet har dette:

#page-wrap {
  text-align: center;
  max-width: auto;
  margin: 0 auto;
  margin-left:auto; margin-right:auto;
}

Men når jeg ser på siden gennem Firefox og ved hjælp af Firebugs ser hvordan siden er opbygget, så har Firefox brugt denne style:

#page-wrap {
    margin: 0 auto;
    text-align: center;
}

Altså Firefox har skippet noget.  Det er nok fordi Firefox ikke har forstået dine instruktioner.  (Jeg fristes til at sige, at den stakkels browser jo også kun er et menneske.)  Jeg er heller ikke sikker på, at jeg forstår det.  Du har sat max-width til auto.  Den kender jeg ikke, og jeg har heller ikke i min browsning idag kunnet finde den.  Og du har defineret margin to gange.  Måske modvirker de hinanden.  En ting du måske kunne forsøge var at ændre #page-wap til kun en enkelt instruktion, 'margin-left:auto; margin-right:auto'.  Om det gør nogen forskel ved jeg ikke.

Men held og lykke med din videre fremgang.

Jeg kom lidt fra det. Og lavede det fra bunden af i M u S e fra a d o b e.
Og det ser ud til at virke meget bedre.
Tak for svar!