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 margin-top skall ju vara -345px (hälften av height)
Danne VMedlem sedan aug. 20068 090 inlägg 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%.
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 Ä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;}
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
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;" ??
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
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
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
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
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
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
