---

Hej.

Jeg har et problem med positionering af side.
Jeg vil gerne have siden (<div id="canvas") til at stå vertikalt
centreret på skærmen uafhængigt af skærmopløsning.
Lige nu har jeg brugt positionering med css som ser således ud:

#canvas
{
position:absolute;
left:10%;
top:0px;
}
Det virker dog ikke korrekt, da siden flytter sig hvis
skærmopløsningen ændres.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Morten Rasmussen wrote:
> Hej.
>
> Jeg har et problem med positionering af side.
> Jeg vil gerne have siden (<div id="canvas") til at stå vertikalt
> centreret på skærmen uafhængigt af skærmopløsning.
> Lige nu har jeg brugt positionering med css som ser således ud:
>
> #canvas
> {
> position:absolute;
> left:10%;
> top:0px;
> }
> Det virker dog ikke korrekt, da siden flytter sig hvis
> skærmopløsningen ændres.

Du kan bruge negativ margin:
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -?px;
}
?= alt efter hvor bred siden er, og så tager du vist det halve.

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk

---

"tidemann" <tidemann@2Youtdcadsl.dk (Slet 2You)> skrev i en meddelelse
news:456c975f$0$199$edfadb0f@dread11.news.tele.dk...
> Morten Rasmussen wrote:

>> Jeg har et problem med positionering af side.
>> Jeg vil gerne have siden (<div id="canvas") til at stå vertikalt
>> centreret på skærmen uafhængigt af skærmopløsning.
>> Lige nu har jeg brugt positionering med css som ser således ud:

>> Det virker dog ikke korrekt, da siden flytter sig hvis
>> skærmopløsningen ændres.

Opløsningen skal du ikke bekymre dig om, da den intet siger om
browservinduets faktiske størrelse

> Du kan bruge negativ margin:
> {
> position: absolute;
> top: 0px;
> left: 50%;
> margin-left: -?px;
> }
> ?= alt efter hvor bred siden er, og så tager du vist det halve.

Vælger man den model skal man tænke sig grundigt om, ja jeg vil faktisk helt
fraråde den, jævnfør denne testside jeg tidligere har lavet
http://csnet.dk/html/eksempler_og_testsider/center.html


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk

---

Carsten Sørensen wrote:
> "tidemann" <tidemann@2Youtdcadsl.dk (Slet 2You)> skrev i en meddelelse
> news:456c975f$0$199$edfadb0f@dread11.news.tele.dk...
>> Morten Rasmussen wrote:
>
>>> Jeg har et problem med positionering af side.
>>> Jeg vil gerne have siden (<div id="canvas") til at stå vertikalt
>>> centreret på skærmen uafhængigt af skærmopløsning.
>>> Lige nu har jeg brugt positionering med css som ser således ud:
>
>>> Det virker dog ikke korrekt, da siden flytter sig hvis
>>> skærmopløsningen ændres.
>
> Opløsningen skal du ikke bekymre dig om, da den intet siger om
> browservinduets faktiske størrelse
>
>> Du kan bruge negativ margin:
>> {
>> position: absolute;
>> top: 0px;
>> left: 50%;
>> margin-left: -?px;
>> }
>> ?= alt efter hvor bred siden er, og så tager du vist det halve.
>
> Vælger man den model skal man tænke sig grundigt om, ja jeg vil faktisk
> helt fraråde den, jævnfør denne testside jeg tidligere har lavet
> http://csnet.dk/html/eksempler_og_testsider/center.html

Ja nu fik jeg byttet om på vertical og horisontal :)
Min model virker _kun_ til horisontal!!

Men det kan nu godt lade sig gøre alligevel, du skal bare huske at sætte
overflow: auto; og en højde på, se her
http://www.webdesign101.dk/csslayout/ex/autocentrering_4.html

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk

---

"tidemann" <tidemann@2Youtdcadsl.dk (Slet 2You)> skrev i en meddelelse
news:456f2157$0$12627$edfadb0f@dread14.news.tele.dk...

>> Vælger man den model skal man tænke sig grundigt om, ja jeg vil faktisk
>> helt fraråde den, jævnfør denne testside jeg tidligere har lavet
>> http://csnet.dk/html/eksempler_og_testsider/center.html
>
> Ja nu fik jeg byttet om på vertical og horisontal :)

Ja det sker jo

> Min model virker _kun_ til horisontal!!

Nej. Se http://csnet.dk/center.gif ,som viser Farums side hvor jeg har gjort
vinduet mindre nøjagtigt som jeg beskrev på testsiden. Jeg mangler både
toppen og venstre side.

> Men det kan nu godt lade sig gøre alligevel, du skal bare huske at sætte
> overflow: auto; og en højde på, se her
> http://www.webdesign101.dk/csslayout/ex/autocentrering_4.html

Overflow: auto giver så vidt jeg kan se blot et ekstra rullepanel, men
forhindrer ikke at indholdet kan forsvinde uden for vinduet. Så nej modellen
er ikke brugbar. Kan tilføje jeg får samme resultat lige meget om jeg tester
med IE 6 eller firefox


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk

---

tidemann skrev:

> Ja nu fik jeg byttet om på vertical og horisontal :)

Du er langt fra den første der bytter om på de to - af samme grund
plejer jeg at anbefale at man bruger "lodret" og "vandret" i stedet
- det forstår alle. Selv om man kan bruge dem korrekt, hjælper det
ikke meget hvis flere af modtagerne læser dem forkert.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Morten Rasmussen wrote:

> Jeg har et problem med positionering af side.
> Jeg vil gerne have siden (<div id="canvas") til at stå vertikalt
> centreret på skærmen uafhængigt af skærmopløsning.

Det er vanskeligt at lave og der er ikke nogen ide i at gøre det. Derimod
kan der være gode grunde til horisontal centrerint: Lige meget luft til
venstre og højre for selve side uanset størrelsen på browservinduet.

Her har jeg vist forskellige måder at knække den nød på:

http://hjemmesideskolen.dk/html/flyd.asp?id=fpx

Brugerens skærmopløsning skal du slet ikke bekymre dig om, for der er ikke
nogen lovmæssig sammenhæng mellem den og størrelsen på brugerens
browservindue - snarere tvært imod.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk