Website centreren cross-browser

**Emrullah Cicek** · 10-05-2009, 15:29

Wat is de beste manier om een website te centreren in alle browsers?

met div = center of met wraps en containers?

Alvast Bedankt,

Emrullah

gast14543 · 10-05-2009, 15:30

Ik doe altijd direct naar de body een
<div align="center">

en dan voor de </body> een </div> ;)

**Johannes Timmerman** · 10-05-2009, 15:49

de buitenste div een vaste breedte geven, en dan met css: "margin:0px auto;"

**Daniël de L.** · 10-05-2009, 15:55

Mijn favoriete methode:

Code:

html {
  text-align: center;
}
body {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}

Zo hoef je geen nieuwe div's te introduceren, wat semantisch gezien beter is.

**Michiel H.** · 10-05-2009, 16:41

Maar wat als je website dan groeit, en je wilt een keer een advertentie plaatsen als achtergrond, zoals je dat tegenwoordig wel eens ziet? Of je wilt in de winter een thematische achtergrond gebruiken? Of een keer zo'n page-flip-advertentie in de rechterbovenhoek? Met de methode van Daniël is dat niet mogelijk. Ik raad een het volgende gewoon aan:

#container { width: 980px; margin: 0 auto; }

**Emrullah Cicek** · 11-05-2009, 12:09

Origineel gepost door Michiel H.

Maar wat als je website dan groeit, en je wilt een keer een advertentie plaatsen als achtergrond, zoals je dat tegenwoordig wel eens ziet? Of je wilt in de winter een thematische achtergrond gebruiken? Of een keer zo'n page-flip-advertentie in de rechterbovenhoek? Met de methode van Daniël is dat niet mogelijk. Ik raad een het volgende gewoon aan:

#container { width: 980px; margin: 0 auto; }

ik heb nu het volgende:

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title><title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body>
    <div id="container">
      <img src="img/img-1.png" /> 
      <br />
      <img src="img/img-2.png" /> 
      <br />
      <img src="img/img-3.png" /> 
    </div>
  </body>
</html>

CSS:

Code:

body {
  background:#FFFFFF;
  }
#container { 
  width: 900px; 
  margin: 0 auto; 
  }
#container img {
  width: 300px;
  height: 300px; 
  }

Maar het is dus niet gecentreerd.

Wat doe ik fout?

Alvast Bedankt

**Ben Boogaardt** · 11-05-2009, 12:26

Beste manier is naar mijn inzien;

Code:

left: 50%;
margin-left: -helft.vd.pixels;
position: relative;

**gast2960** · 11-05-2009, 13:42

Origineel gepost door Emrullah Cicek

ik heb nu het volgende:

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title><title>
  <link href="css/styles.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body>
    <div id="container">
      <img src="img/img-1.png" /> 
      <br />
      <img src="img/img-2.png" /> 
      <br />
      <img src="img/img-3.png" /> 
    </div>
  </body>
</html>

CSS:

Code:

body {
  background:#FFFFFF;
  }
#container { 
  width: 900px; 
  margin: 0 auto; 
  }
#container img {
  width: 300px;
  height: 300px; 
  }

Maar het is dus niet gecentreerd.

Wat doe ik fout?

Alvast Bedankt

Zet eens in de body ook margin:0px auto; waarschijnlijk werkt het dan wel?

**gast8427** · 11-05-2009, 21:10

Emrullah,

Zo moet het werken

body {
margin: 0;
padding: 0;
}

#container {
width: 960px;
margin: 0 auto;
background-color:#009900;
}

background is alleen zodat je het ziet :)

Succes

**gast13152** · 11-05-2009, 21:33

ik zet de margin / padding value meestal in deze vorm.

* {margin:0; padding:0;}

Het is hoe je het zelf wilt, maar idd de beste manier om te centreren is met een container met margin:0 auto;

**Gilbert B** · 12-05-2009, 07:55

Probeer eens een ander doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

bijvoorbeeld

Website centreren cross-browser