Hallo allemaal,

Ik ben bezig met het positioneren van mijn site,
nou gebruik ik in de base/container:

Code:

position: relative;
margin: 0 auto;
text-align: left;
width: 1113px;

Die zorgt dat die in FireFox in het midden wordt weergeven van links/rechts
maar niet in boven/onder, en dit is ook de bedoeling!

in IE8 centreert die hem niet, hij blijft namelijk gewoon lekker links boven in het hoekje staan (**** IE)

Hoe krijg ik ze voor beide browsers gecentreerd, in het midden van links/rechts/boven/onder.

Code:

body { text-align: center; }

Voor het horizontaal centreren alvast.

Je kan wel absoluut positioneren, maar dan moet je een width en height ingeven.

Code:

#container {
width: 750px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -250px; /* height / 2 */
margin-left: -375px /* width / 2 */
}

Dit zet hem zowel verticaal als horizontaal centraal :)

Origineel gepost door P. Beulque

Code:

body { text-align: center; }

Voor het horizontaal centreren alvast.

Je kan wel absoluut positioneren, maar dan moet je een width en height ingeven.

Code:

#container {
width: 750px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -250px; /* height / 2 */
margin-left: -375px /* height / 2 */
}

Dit zet hem zowel verticaal als horizontaal centraal :)

welke waardes moet ik nou precies bij margin-top en margin-left zetten?
want dat begrijp ik niet.

Voorderest, toppie!

Origineel gepost door DylanD

welke waardes moet ik nou precies bij margin-top en margin-left zetten?
want dat begrijp ik niet.

Voorderest, toppie!

margin-top: Dat staat er bij, de height gedeeld door 2. Is de height 1000 dan zet je daar 1000 / 2 = 500 neer.
margin-left: Hier doe je het zelfde alleen met dan met de width.

Origineel gepost door A van Schayk

margin-top: Dat staat er bij, de height gedeeld door 2. Is de height 1000 dan zet je daar 1000 / 2 = 500 neer.
margin-left: Hier doe je het zelfde alleen met dan met de width.

ooh, daar stond dat streepje voor dus :')

Origineel gepost door DylanD

ooh, daar stond dat streepje voor dus :')

In de computer wereld gebruiken we geen : (Dubbelpunt) voor gedeeld door. We gebruiken daarvoor / (Schuine streep). Daarnaast gebruiken we voor reken tafels geen x maar een * (Ster).

Origineel gepost door A van Schayk

In de computer wereld gebruiken we geen : (Dubbelpunt) voor gedeeld door. We gebruiken daarvoor / (Schuine streep). Daarnaast gebruiken we voor reken tafels geen x maar een * (Ster).

Dat wist ik, maar je kan een streepje ook gewoon zien als een scheiding, als ordening.

Ander probleempje met padding.
Als ik padding-top: 5px; doet, dan wordt die div 5px hoger in FF en blijft hetzelfde in IE8.

EDIT: Het padding probleem is opgelost, doormiddel van een div ID genaamd padded, en die dan om het gene zetten wat ik padded wou.

Moest uiteraard width / 2 zijn, copy paste foutje. ;)

Nou, ik ben blij dat het werkt!