Div met procent positioneren.

**Mischa van Gelder** · 09-02-2009, 16:45

Dag,

Normaal gesproken maakte ik mijn honden website altijd met vaste pixels, maar nu wil ik dit met procenten gaan doen.

html:

Code:

<body>
<div id="container"></div>
</body>

css:

Code:

body {
background-color: #000000;
}

#container {
width: 60%;
height: 60%;
margin-left: -30%;
margin-top: -30%;
top: 50%;
left: 50%;
position: absolute;
background-color: #ffffff
}

ik wil dus dat ie zowel horizontaal als verticaal precies in het midden komt te staan.
Met pixels werkt bovenstaande methode wel altijd, maar nu niet.

**Harmen Vogel** · 09-02-2009, 16:48

zet je container div met zo de css

#container{
width: 60%;
margin: 0px auto 0px auto;
}

**Mischa van Gelder** · 09-02-2009, 16:52

Geen height, geen position: absolute enz?

**Harmen Vogel** · 09-02-2009, 16:55

dat moet je dan zelf stylen:)
je kan height op auto zetten dan rekt de hoogte vanzelf mee....

dus bijv zo:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">


body{
    margin: 0;
    }
    
#container{
    margin: 0px auto 0px auto;
    height: auto;
    width: 60%;
    background-color: #333333;
    }





</style>

</head>

<body>

        <div id="container">
        <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

        
        </div>

</body>
</html>

**Mischa van Gelder** · 09-02-2009, 16:58

Nee ik wil niet dat ie vanzelf meerekt, wil ook niet dat de pagina kan scrollen aan de rechterkant, heb ik een hekel aan.

Maar hij wil niet met de codes die je geeft.

**A. Philippe** · 09-02-2009, 20:08

Leg eens uit in een stappenplan aub.

**Mischa van Gelder** · 10-02-2009, 09:32

Nou ik denk dat alles duidelijk is.

Ik wil een website die 60% breed en 60% hoog is precies in het midden krijgen.
En de top: 50% en left: 50% en dan de margin-left: -30% en margin-top: -30% werkt niet. Zoals ik al in mijn eerste bericht zei.
Maar met pixels werkt het wel, maar goed dit gaat om procent.

Dus mijn vraag is, hoe krijg ik de website met procents precies in het midden.

**René Vennik** · 14-02-2009, 22:10

Na even puzzelen heb ik het. Het werk in IE5.5 t/m IE7, Firefox, Chome, Opera en Safari.

Html code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Titel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="container">
</div>

</body>
</html>

En de css code:

Code:

body{
    height: 100%;
    margin: 0;
}

#container{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    right: 20%;
    bottom: 20%;
    left: 20%;
    background: #000;
}

Div met procent positioneren.