[css] centreren van absoluut gepositioneerde website

[me1299]

Ik heb een website met een aantal elementen die ik absoluut heb gepositioneerd. Voorbeeld:

code:

#menu {
    position: absolute;
    left: 205px;
    top: 31px;
    width: 617px;
    height: 30px;
    line-height: 14px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Nu werkt dat allemaal prima. Alleen kreeg iemand het idee dat het toch wel mooier zou zijn om de website in z'n geheel te centreren.

Weet iemand hoe ik dat kan doen zonder de posities van mijn huidige elementen te laten vervallen?

Ik kan het gebeuren wel centreren maar dan komen dus allerlei div's niet meer op de juiste plaats. Logisch natuurlijk want een dus te grotere resolutie dus te meer witruimte is er aan alle zijde.

Ik neem aan dat dit wel met css gedaan kan worden. Ik heb al gezocht op google in op die forum maar ik vond niet echt iets wat mijn probleem behandelde.

[André]

Zet om alles een overkoepelende div die op position:relative staat en centreer die.

[me1299]

Bedankt voor de vlotte response.

Wat voor eigenschappen moet die div meekrijgen om in zijn geheel alles te centreren?

Tot nu toe heb ik als enige methode op dit forum de volgende code gevonden om een site te centreren:

code:

#center {
    position: absolute;
    height: 430px;
    width: 791px;
    top: 50%;
    left: 50%;
    margin-top: -215px;
    margin-left: -396px;
    background-position: 50% 50%;
}

update

Ik het nu voor elkaar gekregen om alles in het midden te centreren op deze manier:

[code]

body {
text-align: center;
min-width: 600px;
}

#centered {
position: relative;
top: 0;
right: 0;
margin: 0 auto;
width: 600px;
text-align: left;
}


[/code]

Binnen die div heb ik de rest gezet. Nu wordt alles horizontaal gecentreerd. Is er ook een methode om het verolges ook verticaal te centreren?

Hmm dit werkt toch niet echt goed.. M'n menu staat nu op de verkeerde plaats en in Firefox wordt hij helemaal niet gecentreerd.

[ Voor 44% gewijzigd door me1299 op 08-10-2004 14:28 ]

[MTWZZ]

Je kunt wat je binnen je body hebt staan binnen een div (met id == wrapper) gooien en dan het volgende doen:

Cascading Stylesheet:

#wrapper {
    text-align: center;
    margin: 0px auto 0px auto;
}

Dit centreert als het goed is je hele site. Alleen moet je er wel rekening mee houden dat je voor je tags binnen #wrapper wel text-align: left; oid aangeeft

@DeathKnight (zie beneden):
Geen idee ik heb alleen nog maar sites gedevved die geen fixed height hebben.

[ Voor 14% gewijzigd door MTWZZ op 08-10-2004 15:08 ]

[me1299]

MTWZZ schreef op 08 oktober 2004 @ 14:59:
Je kunt wat je binnen je body hebt staan binnen een div (met id == wrapper) gooien en dan het volgende doen:

Cascading Stylesheet:

#wrapper {
    text-align: center;
    margin: 0px auto 0px auto;
}

Dit centreert als het goed is je hele site. Alleen moet je er wel rekening mee houden dat je voor je tags binnen #wrapper wel text-align: left; oid aangeeft

Is dit ook nog zo uit te breiden dat het geheel ook verticaal centreert?

[P_de_B]

code:

#container  {
        position            : absolute;
        top                 : 50%;
        left                : 50%;
        height              : 660px;
        width               : 780px;
        margin-top          : -330px;
        margin-left      : -390px; 
            
    }

Dit heb ik laatst gebruikt. De marge is zoals je ziet de helft van de ingestelde hoogte cq. breedte. Dit centreert de pagina zowel horizontaal als verticaal.

[me1299]

P_de_B schreef op 08 oktober 2004 @ 15:03:

code:

#container  {
        position            : absolute;
        top                 : 50%;
        left                : 50%;
        height              : 660px;
        width               : 780px;
        margin-top          : -330px;
        margin-left      : -390px; 
            
    }

Dit heb ik laatst gebruikt. De marge is zoals je ziet de helft van de ingestelde hoogte cq. breedte. Dit centreert de pagina zowel horizontaal als verticaal.

Dat centreert hier alleen horizontaal. Plus dat alle absoluut gepositioneerde elementen helemaal verkeerd stonden.

[me1299]

Ik denk dat ik het zolang maar tussen 4 frames zet oid. Want ik kan nog steeds geen goede oplossing vinden na vele google pogingen.

Mocht iemand nog een idee hebben GRAAG!

[me1299]

André schreef op 08 oktober 2004 @ 14:08:
Zet om alles een overkoepelende div die op position:relative staat en centreer die.

deze methode werkt volgens mij ook alleen in IE. Want in Firefox blijven alle dingen gewoon strak staan.

Dus in IE positioneerd hij met absoluut niet vanaf het browserscherm maar vanaf z'n parentelement. Maar in firefox blijft hij positioneren vanaf het browserscherm.

[X-Lars]

Dit werkt gewoon: http://annevankesteren.nl/test/templates/center-hv

Wat P_de_B zegt dus

[me1299]

X-Lars schreef op 08 oktober 2004 @ 17:06:
Dit werkt gewoon: http://annevankesteren.nl/test/templates/center-hv

Wat P_de_B zegt dus

Dat werkt dus niet.. alle elementen die absoluut gepositioneerd zijn blijven gewoon lekker staan waar ze staan.

[rewind.]

klopt ik denk dat je alle elementen binnen de container relative moet maken om ze mee te laten gaan met de container.

[Clay]

Post anders gewoon ff een link wat je hebt. Met css alleen ben je er niet, je doctype heeft er ook invloed op. Frames heb je hiervoor echt niet nodig.

[me1299]

Het is inmiddels gelukt icm de methode op http://annevankesteren.nl/test/templates/center-hv

Nadat ik deze had gebruikt moest ik de coordinaten enigsinds wijzigen voor alle elementen. Maar nu blijft alles goed staan ook als ik de pagina van grootte verander.

[paulh]

position: absolute trekt zich geen zak aan van wrapper of container divs. Daar is namelijk absolute voor bedacht (om niet afhankelijk te zijn van andere elementen). Dus alles wat je in de container zet moet relative zijn als het daar binnen moet blijven. Het is wel jammer dat je niet een "absolute" tov een ander element kan aangeven dan zou het opgelost zijn.

[drm]

paulh:
position: absolute trekt zich geen zak aan van wrapper of container divs. Daar is namelijk absolute voor bedacht (om niet afhankelijk te zijn van andere elementen). Dus alles wat je in de container zet moet relative zijn als het daar binnen moet blijven. Het is wel jammer dat je niet een "absolute" tov een ander element kan aangeven dan zou het opgelost zijn.

onzin, zie: http://gerard.yoursite.nl/got/paulh/absolute.html

Absoluut gepositioneerde elementen nemen als referentiepunt de ancestor die danwel absoluut danwel relative gepositioneerd is.

[Verwijderd]

Of fixed gepositioneerd.