centrera oavsett upplösning

12 svar · 810 visningar · startad av Ann-Sofie 9 nov. 2006

Ann-SofieMedlem sedan mars 2003136 inlägg

Frågan9 nov. 2006 10:34#1

Jag har ett problem som jag inte riktigt får till trots att jag läst i ett annat inlägg vad som är felet..

Jag har lagt en "platta" med allt innehåll cenrerat på skärmen.

För att centrera denna platta använder jag css stilmall och koden:

#platta
{
     height: 690px;
     width: 920px;
     background:#FFFFFF;
     border:none;
     left:50%;
     top:50%;
     margin-left:-460px;
     margin-top:-336px;
     position:absolute;
     }

Det ser bra ut i de flesta webbläsare men i låg upplösning så får ju inte hela plattan rum på skärmen och problemet är att scroll bara fungerar åt höger och nedåt. Därav försvinner information som ligger högt upp och till vänster på sidan. (ofta menyn vilket är förödande)

Jag har surfat runt för att hitta en lösning och fått veta att det inte alltid funkar med absolut positionering i samband med negativa tal.

Hur sjutton ändrar jag detta för att plattan ändå ska ligga centrerat oavsett upplösning men att scroll fungerar så man kommer åt allt material?

Se gärna https://www.barntyger.se där koden ovan kommer ifrån. I 600x800 ser det inte klokt ut!!!

Tacksam för hjälp!
hälsningar
Ann-Sofie

vicMedlem sedan apr. 2006244 inlägg

9 nov. 2006 10:43#2

margin-top skall ju vara -345px (hälften av height)

Danne VMedlem sedan aug. 20068 090 inlägg

9 nov. 2006 11:32#3

Kommer inte ihåg, men jag donade med detta i våras. Tror det löste sig med att jag satte

html {
height:100%;
}

och sedan margin-top till halva divvens höjd som vic skrivit.

Men du bör ju ha margin:auto för höger och vänster. Inte 50%.

Ann-SofieMedlem sedan mars 2003136 inlägg

9 nov. 2006 22:40#4

Danne V skrev:

Kommer inte ihåg, men jag donade med detta i våras. Tror det löste sig med att jag satte

html {
height:100%;
}

Var menar du att jag ska sätta den koden? Jag har testat nu utan någon framgång tyvärr. (halva divven är också ändrad men det är ju inte det som är problemet utan att det inte går att scrolla!!)

vänliga hälsningar
ann-sofie

liljaMedlem sedan juli 20041 183 inlägg

10 nov. 2006 00:46#5

Är inte problemet att "plattan" är större än 800x600 (bredd*höjd)? Din platta är 920*690, eller?

Varför inte använda relativ positionering och centrera plattan med

#platta {margin:0 auto; text-align:left; width:800px;}
body {text-align:center;}

seattlegrungeMedlem sedan juli 200653 inlägg

10 nov. 2006 06:55#6

Du skriver följande i för din body-tagg (detta för att Explorer ska centrera):

body {
   text-align: center;
}

För din platta skriver du:

#platta {
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

Margin-left/right: auto; är för att Firefox och andra vassa läsare ska centrera ditt innehåll. Text-align: left; är till för att återställa din text till vänsterställd för dessa webbläsare, eftersom du satte center för body-taggen.

Tyvärr lyssnar inte Explorer på margin-left/right: auto; därför satte du text-align: center; för body-taggen.

Så, nu är din sida alltid centrerad, oberoende av upplösning :)

liljaMedlem sedan juli 20041 183 inlägg

10 nov. 2006 07:33#7

seattlegrunge skrev:

Så, nu är din sida alltid centrerad, oberoende av upplösning :)

Det där är exakt samma sak som jag skrev fast du har lite mer förklaring...

Är det någon som vet om nya IE har blivit bättre på att följa standarder såsom t.ex. "margin: 0 auto;" ??

Ann-SofieMedlem sedan mars 2003136 inlägg

10 nov. 2006 08:50#8

Seattlegrunge:
Japp det stämmer och du har svarat fantastiskt pedagogiskt - tack!

Nu är sidan centrerad i sidled fast jag ville egentligen även få den centrerad på skärmen i alla riktningar, alltså att den skulle ligga en bit ner från top. Nu är det inte mycket marginal till skärmens top och det är inte så snyggt...

Är detta möjligt eller måste jag nöja mig med att den är centrerad i sidled?

ann-sofie

TroxyMedlem sedan mars 20041 505 inlägg

10 nov. 2006 11:35#9

lilja skrev:

Är det någon som vet om nya IE har blivit bättre på att följa standarder såsom t.ex. "margin: 0 auto;" ??

Internet Explorer 6 har vad jag vet inga problem att centrera med margin:0 auto;.
Internet Explorer 5 däremot saknar stöd för det.

liljaMedlem sedan juli 20041 183 inlägg

10 nov. 2006 17:56#10

Ann-Sofie skrev:

Nu är sidan centrerad i sidled fast jag ville egentligen även få den centrerad på skärmen i alla riktningar, alltså att den skulle ligga en bit ner från top. Nu är det inte mycket marginal till skärmens top och det är inte så snyggt...

Är detta möjligt eller måste jag nöja mig med att den är centrerad i sidled?

ann-sofie

Man kan göra det med ett fultrick och man kan göra det på ett lite jobbigare men dock mer korrekt sätt. Följande guide tar upp problemen rätt bra och slutar med 4 olika rätt simpla lösningar.

http://apptools.com/examples/tableheight.php

seattlegrungeMedlem sedan juli 200653 inlägg

11 nov. 2006 19:47#11

Sorry Lilja... klockan var 07:55 när jag skrev och jag hade varit vaken hela natten... när mina ögon gick i kors så måste jag på nåt sätt ha missat att du skrev likadant... :)

liljaMedlem sedan juli 20041 183 inlägg

11 nov. 2006 19:58#12

seattlegrunge skrev:

Sorry Lilja... klockan var 07:55 när jag skrev och jag hade varit vaken hela natten... när mina ögon gick i kors så måste jag på nåt sätt ha missat att du skrev likadant... :)

Lugnt! Du svarade trots allt mycket mer utförligt än mig :P

Ann-SofieMedlem sedan mars 2003136 inlägg

13 nov. 2006 11:39#13

Tusen tack för all hjälp!

jag ska kika på länken, just nu har jag löst det genom att den får vara centrerad höger/vänster så tar jag tag i det här med toppen när det är lite lungrare kring skrivbordet!!

tacksam
ann-sofie