Avatar billede Kite Nybegynder
18. marts 2015 - 14:21 Der er 3 kommentarer og
1 løsning

CSS style centrering hjælp.

Hej,

Jeg har nu siddet og forsøgt at lave en centrering af hele min side.
Har lavet style.css med:

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

Og har forsøgt at ændre width til forskellige variabler, men det giver bare et smadret layout på iPhone. Er der nogen der kan se fejlen(e):
Midlertidigt: http://royaltyfree-musictracks.com/baggrundsmusik.dk/

Det er fint centreret på IE, Chrome og Safari på iPad - men på iPhone skal jeg scrolle til højre for at se siden korrekt.
18. marts 2015 - 17:26 #1
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.
Avatar billede Kite Nybegynder
18. marts 2015 - 17:36 #2
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.
19. marts 2015 - 10:25 #3
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.
Avatar billede Kite Nybegynder
22. marts 2015 - 19:01 #4
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!
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester